String interpolation on variable

Question

Say I have a variable str

var str = "123"

Now I could do console.log(`Hello ${str}`) and it will print Hello 123

Now I have another variable strnew

var strnew = 'Hello ${str}'

Note (based on answers/comments) - strnew is read from a file, so its always a string and cant be replaced with `

How do I console.log(...) to print Hello 123

Is it possible wihtout any kind of eval()

I think the best way in this case is to use function, that accepts `str` and uses this template string inside. — Dmitry Masley, Dec 13 '16 at 09:46
I think this is just example, if you have very long string with multiple concatenations - template string is better. — Dmitry Masley, Dec 13 '16 at 09:53
If string is from file maybe it is better to use `_.template` instead, or some other template engine. I don't see any option to generate template string from string. — Dmitry Masley, Dec 13 '16 at 09:57
use regex replace like `strnew.replace(/\$\{(.*?)\}/g,()=>window[RegExp.$1])` if you are not using scopes — Josh Lin, Dec 13 '16 at 09:58
What is the reason of using string templates with simple strings? — The Reason, Dec 13 '16 at 10:00
Instead of using ES6 template strings try to use a template engine like Moustache and use the compile() function for getting the result — gyss, Dec 13 '16 at 10:06
@TheReason not related reason.. angular2 doesnt have an equivalent angular1 $compile functionality — Faiz Mohamed Haneef, Dec 13 '16 at 10:08

georg · Accepted Answer · 2017-09-26T12:24:26.597

35

With something as simple as ${str} you can use a simple string replacement:

var template = (tpl, args) => tpl.replace(/\${(\w+)}/g, (_, v) => args[v]);

var tpl = 'Hello ${str} and ${other}';

console.log(template(tpl, {str: 'foo', other: 'bar'}));

In a general case, no, not possible without eval (short of writing your own js interpreter), because ${...} can contain arbitrary expressions.

For completeness' sake, here's the eval solution:

var template = function(tpl, args) {
    var keys = Object.keys(args),
        fn = new Function(...keys, 
          'return `' + tpl.replace(/`/g, '\\`') + '`');
    return fn(...keys.map(x => args[x]));
};


function test() {
    var myTpl = 'Hello ${str + "!"} and ${other.toUpperCase()}';
    console.log(template(myTpl, {str: 'foo', other: 'bar'}));
}

test();

edited Sep 26 '17 at 12:24

answered Dec 13 '16 at 10:03

georg

211,518
52
313
390

I'm very sorry, I edited your post instead of suggesting an edit, but I reverted it. new Function('', 'return `' + tpl + '`'); could be optimized to new Function('return `' + tpl + '`'); – Lyubomir Dec 13 '16 at 10:30
Great answer!! This should be the accepted answer. Give me a day or two to confirm. – Faiz Mohamed Haneef Dec 13 '16 at 11:07
1

_`template(myTpl, str='foo', other='bar')`_ this code implicitly creates two global variables. Argumants passed to the function are never used. – Qwertiy Sep 26 '17 at 12:13
1

@Qwertiy: right-o, too much python recently ;) fixed. – georg Sep 26 '17 at 12:24

score 1 · Answer 2 · answered Dec 13 '16 at 09:50

1

You can use function instead of just string.

var strnew = function(str){
  return `Hello ${str}`;
}
var str = "123";
console.log(strnew(str))

answered Dec 13 '16 at 09:50

Dmitry Masley

525
4
9

2

IMHO the best solution and probably the way template literals were intended to be used. – nils Dec 13 '16 at 10:05
Template strings are read from a file, they are not in the OP's code. – georg Dec 13 '16 at 10:05
@georg yes, he added this note later, I wrote comment about this. – Dmitry Masley Dec 13 '16 at 11:46
yes. based on answers, i had to adjust my question. thanks @dm – Faiz Mohamed Haneef Dec 13 '16 at 12:43

score 0 · Answer 3 · answered Aug 14 '17 at 20:59

Thanks to this answer, here is a bit of black magic code that achieves what you want. Disclaimer - this is for fun / very limited and exotic application. It is likely to be very slow and break down on lots of edge cases, but with a limited scope of your question it works.

function getString(){
 return "calculating ${foo} + ${bar} = ${foo + bar}";
}

var localEnvironmentProxy = new Proxy({}, {
    has(target, prop) { return true; },
    get(target, prop) { return (prop in target ? target : window)[prop]; }
  });
  
  with(localEnvironmentProxy){
  
 var foo = 1;
 var bar = 2;
  
 var templString = getString();
 
 var fnFullText = 'with(arguments[0]){ return `' + templString + '`;}';
 
 var tempalteFn = new Function(fnFullText);
    
 console.log(tempalteFn(localEnvironmentProxy));
    //calculating 1 + 2 = 3
  
  }

score 0 · Answer 4 · answered Jan 21 '21 at 14:59

I built off of @georg's answer above for a typescript solution:

public renderTemplate(templateStr: string, args: any): string {
  templateStr = templateStr.replace(/`/g, '\\`');
  
  const keys = Object.keys(args);

  const fn = new Function(...keys, 'return `' + templateStr + '`');

  return fn(...keys.map(key => args[key]));
}

The usage is virtually the same as well.

String interpolation on variable

4 Answers4

Linked

Related