Converting Strings to Template Literals in 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, e.g. "${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 + "`"));