We Keep Coding

Variable substitution within a string

I'm trying to come up with some very reusable code that will look up and perform variable substitutions within a string.
The example string below contains a $$ reference to a variable. Format is varname.key.
I want the subText() function to be reusable. The issue I'm having is repvars themselves can require substitution. The code hasn't finished substituting the example text and I'm asking it to substitute the repvars.cr by calling the same function. This seems to through it off. I'm saying that because if I do it separately in works.
var exampleText = "A string of unlimited length with various variable substitutions included $$repvars.cr$$";
var repvars = {
cr: 'Copyright for this is $$repvars.year$$',
year: '2019'
}
function subText(text) {
var subVars = findSubs(text);
return makeSubs(text, subVars);
}
function findSubs(theText) {
var subarr = [];
while (theText.indexOf('$$') > -1) {
theText = theText.substring(theText.indexOf('$$') + 2);
subarr.push(theText.substring(0, theText.indexOf('$$')));
theText = theText.substring(theText.indexOf('$$') + 2);
}
return subarr;
}
function makeSubs(text, subs) {
for (var s = 0; s < subs.length; s++) {
var subst = getSubVal(subs[s]);
text = text.split("$$" + subs[s] + "$$").join(subst);
}
return text;
}
function getSubVal(subvar) {
var subspl = subvar.split('.');
switch (subspl[0]) {
default:
return processRepVar(subspl[1]);
}
}
function processRepVar(rvName) {
var data = getRepVarData(rvName);
if(data.indexOf('$$') > -1) {
subText(data);
} else {
return data;
}
}
function getRepVars() {
return repvars;
}
function getRepVarData(key) {
return getRepVars()[key];
}
subText(exampleText);

Aren't you just missing a return here?
function processRepVar(rvName) {
var data = getRepVarData(rvName);
if(data.indexOf('$$') > -1) {
subText(data);
} else {
return data;
}
}
Changing subText(data) to return subText(data); makes your code work for me.
Working jsfiddle: https://jsfiddle.net/uzxno754/

Have you tried regular expressions for this?
function replace(str, data) {
let re = /\$\$(\w+)\$\$/g;
while (re.test(str))
str = str.replace(re, (_, w) => data[w]);
return str;
}
//
var exampleText = "A string with variables $$cr$$";
var repvars = {
cr: 'Copyright for this is $$year$$',
year: '2019'
}
console.log(replace(exampleText, repvars))
Basically, this repeatedly replaces $$...$$ things in a string until there are no more.

Extend Javascript Syntax to Add Typing

I'd like to extend javascript to add custom type checking.
e.g.
function test(welcome:string, num:integer:non-zero) {
console.log(welcome + num)
}
which would compile into:
function test(welcome, num) {
if(Object.prototype.toString.call(welcome) !== "[object String]") {
throw new Error('welcome must be a string')
}
if (!Number.isInteger(num)) {
throw new Error('num must be an integer')
}
console.log(welcome + num)
}
What's the most straightforward way of doing this?
So far i've looked at:
sweet.js (online documentation looks out of date as I think it's going through some sort of internal rewrite)
esprima and escodegen (not sure where to start)
manually parsing using regular expressons

After evaluating all the various options, using sweet.js appears to be the best solution. It's still fairly difficult to get working (and I am probably doing stuff the wrong way) but just in case someone want's to do something similar this here was my solution.
'use strict'
syntax function = function(ctx) {
let funcName = ctx.next().value;
let funcParams = ctx.next().value;
let funcBody = ctx.next().value;
//produce the normal params array
var normalParams = produceNormalParams(funcParams)
//produce the checks
var paramChecks = produceParamChecks(funcParams)
//produce the original funcBody code
//put them together as the final result
var params = ctx.contextify(funcParams)
var paramsArray = []
for (let stx of params) {
paramsArray.push(stx)
}
var inner = #``
var innerStuff = ctx.contextify(funcBody)
for (let item of innerStuff) {
inner = inner.concat(#`${item}`)
}
var result = #`function ${funcName} ${normalParams} {
${paramChecks}
${inner}
}`
return result
function extractParamsAndParamChecks(paramsToken) {
var paramsContext = ctx.contextify(paramsToken)
//extracts the actual parameters
var paramsArray = []
var i = 0;
var firstItembyComma = true
for (let paramItem of paramsContext) {
if (firstItembyComma) {
paramsArray.push({
param: paramItem,
checks: []
})
firstItembyComma = false
}
if (paramItem.value.token.value === ',') {
firstItembyComma = true
i++
} else {
paramsArray[i].checks.push(paramItem.value.token.value)
}
}
for (var i = 0; i < paramsArray.length; i++) {
var checks = paramsArray[i].checks.join('').split(':')
checks.splice(0, 1)
paramsArray[i].checks = checks
}
return paramsArray
}
function produceNormalParams(paramsToken) {
var paramsArray = extractParamsAndParamChecks(paramsToken)
//Produces the final params #string
var inner = #``
var first = true
for (let item of paramsArray) {
if (first === true) {
inner = inner.concat(#`${item.param}`)
} else {
inner = inner.concat(#`,${item.param}`)
}
}
return #`(${inner})`
}
function produceParamChecks(paramsToken) {
var paramsArray = extractParamsAndParamChecks(paramsToken)
var result = #``
for (let paramObject of paramsArray) {
var tests = produceChecks(paramObject)
result = result.concat(#`${tests}`)
}
return result
}
function produceChecks(paramObject) {
var paramToken = paramObject.param
var itemType = paramObject.checks[0]
var checks = paramObject.checks
if (itemType === undefined) return #``
if (itemType === 'array') {
return #`if (Object.prototype.toString.call(${paramToken}) !== "[object Array]") throw new Error('Must be array:' + ${paramToken})`
else {
throw new Error('item type not recognised: ' + itemType)
}
}
}

In Javascript, how to apply a dynamically created function name

My goal is to efficiently apply a dynamically chosen set of transforms to each element of a matrix. I store the selected functions in an array, then apply each of them in a single pass thru the matrix.
My question is, how can I dynamically create the name of a function that I add to the array of functions?
This fiddle contains my attempt. My question is included in the comment block.
function dynam () {
var prepend = 'before - ';
var append = ' - after';
var whichCase = 'Upper';
var functionsToApply = [];
var matrix = [
['aBc', 'DeF'],
['ghi', 'JKL'],
];
var out = 'Initial: ' + matrix.join(' | ');
document.getElementById('output').innerHTML = out + '\n';
console.log(out);
// Set up transforms
if (whichCase == 'Lower') {
functionsToApply.push(function(v) {return v.toLowerCase();});
} else if (whichCase == 'Upper'){
functionsToApply.push(function(v) {return v.toUpperCase();});
}
// How can the function be defined dynamically?
// Perhaps something like:
// if(['Lower','Upper'].indexOf(whichCase) != -1) {
// functionsToApply.push(function(v) {'return v.to' + which + 'Case();'});
// }
if (prepend && prepend.length > 0 && prepend != 'none') {
functionsToApply.push(function(v) {return prepend + v;});
}
if (append && append.length > 0 && append != 'none') {
functionsToApply.push(function(v) {return v + append;});
}
// Apply all of the transforms to each of the elements of the matrix
matrix = matrix.map(function(row){
return row.map(function(val) {
for (var fn = 0; fn < functionsToApply.length; fn++) {
val = functionsToApply[fn](val);
}
return val;
})
});
out = 'Final: ' + matrix.join(' | ');
document.getElementById('output').innerHTML += out + '\n';
console.log(out);
}

I like to declare my functions in a hash in this case, then you can call them based on the value passed in, which is the key to the hash.
Updated: I've added a way to get the lower/upper function dynamically, and call it.
function dynam(whichCase, prepend, append, matrix) {
var functionHash = {
"Lower" : function(v) {return v.toLowerCase();},
"Upper" : function(v) {return v.toUpperCase();},
"Prepend" : function(v) {return prepend + v;},
"Append": function(v) {return v + append;}
}
// to actually get the case function based on the word passed in,
// you can do it this way.
var lowerUpperFunction = String.prototype['to' + whichCase + 'Case'];
var str = lowerUpperFunction.call("xyz");
console.log(str);
var functionsToApply = [];
var out = 'Initial: ' + matrix.join(' | ');
console.log(out);
// see how we just take the whichCase and make that a call to the hash?
functionsToApply.push(functionHash[whichCase]);
if (prepend && prepend.length > 0 && prepend != 'none') {
functionsToApply.push(functionHash["Prepend"]);
}
if (append && append.length > 0 && append != 'none') {
functionsToApply.push(functionHash["Append"]);
}
// Apply all of the transforms to each of the elements of the matrix
matrix = matrix.map(function(row){
return row.map(function(val) {
for (var fn = 0; fn < functionsToApply.length; fn++) {
console.log("applying function to val" + val );
val = functionsToApply[fn](val);
}
return val;
})
});
out = 'Final: ' + matrix.join(' | ');
return out;
}
var p = 'before - ';
var a = ' - after';
var w = 'Upper';
var m = [
['aBc', 'DeF'],
['ghi', 'JKL'],
];
console.log( dynam(w, p, a, m) );

What is best way to replace %[variable, percentage] with (variable*percentage)/100 in string?

I have string where there may be occurrence of %[{variable}, percentage] which i want to convert to (({variable}*percentage)/100) and replace it at same location. What is best way to do it?
Example: {operation} + %[{cost}, 10] should be converted to {operation} + (({cost}*10)/100)
I tried following but it didn't work:
function Service(){
this.percentageRegx = "\%\[(.*?)]";
this.percentageVariableRegx = "\%\[(.*?)]";
this.percentageValueRegx = "\,(.*?)]";
this.getPercentageFromFormula = function (formula) {
var data = [];
try {
do {
m = self.percentageRegx.exec(formula);
if (m) {
var variableData = self.percentageVariableRegx.exec(m[1]),
percentageData = self.percentageValueRegx.exec(m[1]);
if(variableData !== null && percentageData !== null){
data.push({
string: m[1],
variable: variableData[1],
percentage: percentageData[1]
});
}
}
} while (m);
} catch (e) {}
return data;
};
/**
* Convert percentages to formula
*/
this.replacePercentageToFormula = function (formula) {
var percentages = self.getPercentageFromFormula(formula);
angular.forEach(percentages, function (percentage) {
formula.replace(percentage.string,"(("+percentage.variable+"*"+percentage.percentage+")/100)");
});
return formula;
};
}
var service = new Service();
formula = service.replacePercentageToFormula("{operation} + %[{cost}, 10]");
It giving me Uncaught SyntaxError: Invalid or unexpected token error

That's a lot of code for what seems to me like a simple one-line regex-based string replacement:
var input = "{operation} + %[{cost}, 10] {?} * %[{123}, 5]";
var output = input.replace(/%\[(\{[^}]+\}), *(\d+)\]/g, "(($1*$2)/100)");
console.log(output);

I suggest you to implement a very very basilar template engine, or, if you need for many and solid features, have a look at one existing such as HandleBars, or TwigJS.
By the way, this is a little implementation:
var Template = (function() {
function TemplateEngine() {
this._re = (function(start, end) {
start = "\\" + start.split("").join("\\");
end = "\\" + end.split("").join("\\");
return new RegExp(
"(("+ start +")(.*)("+ end +"))",
"g"
);
}).apply(this, this.separators);
}
TemplateEngine.prototype.separators = ["{{", "}}"];
TemplateEngine.prototype.map = function(str, model) {
return str
.replace(this._re,
function(matches, tpl, sStart, content, sEnd) {
return Object.keys(model).reduce(function(res, variable) {
return (
res = content.replace(variable, model[variable])
);
}, "");
}
);
}
TemplateEngine.prototype.render = function(tpl, context) {
var parsed = this.map(tpl, context), result;
try {
result = eval(parsed);
} catch(e) {
result = parsed.replace(/['"`]/g, "");
}
this._re.lastIndex = 0;
return result;
};
return new TemplateEngine();
})();
// TESTS
console.log(
Template.render("{{foo * 5}}", {foo: 2})
);
console.log(
Template.render("{{foo 'World'; }}", {foo: "Hello"})
);
NOTE: I always suggest you to use a community-trusted solution.

JavaScript: Repeated code vs. extra functions when code length is same

After updating my code based on answers to this previous question, I came up with the following solution:
var Coder = (function() {
var controlWords = [
['ONE','OO'],
['TWO','TT'],
['THREE','RR'],
//['...','..'],
['END','NN']
],
map = {
'0':' ', '1':'_', '2':',',
'3':'.', '4':'?', '5':'!',
'6':'\'','7':'"', '8':'(',
'9':')', 'a':'o', 'b':'d',
'c':'a', 'd':'e', 'e':'p',
'f':'i', 'g':'f', 'h':'v',
'i':'u', 'j':'l', 'k':'m',
'l':'y', 'm':'q', 'n':'x',
'o':'b', 'p':'j', 'q':'t',
'r':'n', 's':'z', 't':'w',
'u':'k', 'v':'h', 'w':'s',
'x':'c', 'y':'r', 'z':'g'
},
reverseMap = (function() {
var j, tmp = {};
for (j in map){
if (Object.prototype.hasOwnProperty.call(map, j))
tmp[map[j]] = j;
}
return tmp;
})(),
value, i,
encode = function(data) {
var input = (typeof data == 'string' ? data : '');
console.log('Input to encode: '+input);
for (i = 0; i < controlWords.length; i++) {
value = new RegExp(controlWords[i][0],'g');
input = input.replace(value,controlWords[i][1]);
}
console.log('Encode step 1: '+input);
input = input.replace(/./g, function(c){
return reverseMap[c]
|| reverseMap[c.toLowerCase()].toUpperCase();
});
console.log('Encoding output: '+input);
return {length: input.length, data: input};
},
decode = function(data) {
var input = (typeof data == 'string' ? data : '');
console.log('Input to decode: '+input);
input = input.replace(/./g, function(c){
return map[c]
|| map[c.toLowerCase()].toUpperCase();
});
console.log('Decode step 1: '+input);
for (i = 0; i < controlWords.length; i++) {
value = new RegExp(controlWords[i][1],'g');
input = input.replace(value,controlWords[i][0]);
}
console.log('Decoding output: '+input);
return {length: input.length, data: input};
};
return {encode: encode, decode: decode};
})();
var str = 'ONE Hello, TWO JavaScript THREE World! END',
enc = Coder.encode(str).data,
dec = Coder.decode(enc).data;
As you can see, there's a lot of fully- or nearly-repeated code. The only meaningful differences are the order in which the two transformations happen, whether map or reverseMap is used, and which index of each control word array is used as the regex and which as the replacement value.
To abide by the concept of wrapping repeated code in a sub-function and calling that function, I made the following attempt. It defines the two transformations as internal functions, and then based on the value of the type argument, decides the rest.
var Coder = (function() {
var controlWords = [ /* same */ ],
map = { /* same */ },
reverseMap = /* same */,
code = function(data, type) {
var input = (typeof data == 'string' ? data : ''),
mapping, x, y, value, i,
transform = function() {
return input.replace(/./g, function(c){
return mapping[c]
|| mapping[c.toLowerCase()].toUpperCase();
});
},
replace = function() {
for (i = 0; i < controlWords.length; i++) {
value = new RegExp(controlWords[i][x],'g');
input = input.replace(value,controlWords[i][y]);
}
return input;
};
if (type == 'decode') {
mapping = map;
x = 1;
y = 0;
input = transform();
input = replace();
} else if (type == 'encode') {
mapping = reverseMap;
x = 0;
y = 1;
input = replace();
input = transform();
} else {
throw new Error('Invalid type argument!');
}
return {data: input, length: input.length};
};
return {code: code};
})();
var str = 'ONE Hello, TWO JavaScript THREE World! END',
enc = Coder.code(str, 'encode').data,
dec = Coder.code(enc, 'decode').data;
However, you might notice that this code is actually longer. It's still more easily extended, if I wanted to add more types than 'encode' and 'decode' (not going to). But currently less efficient?
I then went back to the version with two functions (to avoid the passing of and check of 'type'):
var Coder = (function() {
var controlWords = [ /* same */ ],
map = { /* same */ },
reverseMap = { /* same */ },
input, mapping, x, y, value, i,
transform = function() {
return input.replace(/./g, function(c){
return mapping[c]
|| mapping[c.toLowerCase()].toUpperCase();
});
},
replace = function() {
for (i = 0; i < controlWords.length; i++) {
value = new RegExp(controlWords[i][x],'g');
input = input.replace(value,controlWords[i][y]);
}
return input;
},
encode = function(data) {
input = (typeof data == 'string' ? data : '');
mapping = reverseMap;
x = 0;
y = 1;
input = replace();
input = transform();
return {length: input.length, data: input};
},
decode = function(data) {
input = (typeof data == 'string' ? data : '');
mapping = map;
x = 1;
y = 0;
input = transform();
input = replace();
return {length: input.length, data: input};
};
return {encode: encode, decode: decode};
})();
// Call methods same as first example
So lengthy post to basically ask, which is better, repeated code or extra functions/checks, when it doesn't really help code length and there's no plans to extend the code or release it as a public project? Which of these is the most elegant solution, or is there an even better?
EDIT
One way I thought of to clean it up in general is to remove the variable declarations of mapping, x, and y and just pass them as arguments to replace and transform. This would yield
decode = function(data) {
var input = (typeof data == 'string' ? data : '');
input = transform(map);
input = replace(1,0);
return {length: input.length, data: input};
}