在ES6中将字符串转换为模板文字

Question

Suppose I have a string like "${a + b}" , say read from JSON, that I'd like interpreted as an ES6 template literal. I thought something like this might work:

var x = {"add": "${a + b}"};
var a = 10, b = 20;
alert(`${x.add}`);

But this alerts as ${a + b} , so it just does one level of substitution.

Tried being clever by interpreting it again:

var a = 10, b = 20;
var x = {"add": "${a + b}"};
var i = `${x.add}`;
alert(`${i}`);

This still alerts as ${a + b} .

Tried being even more clever:

var a = 10, b = 20;
var x = {"add": "${a} + ${b}"};
var i = `${x.add}`;
alert(`${i}`);

This alerts as ${a} + ${b} .

Starting with a string, eg "${a + b}" , is there any way to have this evaluated to completion as if it were a template literal? Ideally without eval !

Answer 1

Yes, they aren't recursive.

If your starting point is a string containing those placeholders, as far as I know there is no template compiler function. There's eval , of course; [insert all the usual caveats about using eval — only with content you trust, not if you can avoid it, etc., etc. — here].

So for instance:

 "use strict"; var x = {"add": "${a + b}"}; var a = 10, b = 20; console.log(eval("`" + x.add + "`"));