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

最好的方法是使用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逻辑。这也可以通过一些思考来补救。

如果你不想使用有序参数或上下文/命名空间来引用模板中的变量，例如${0}，${this. xml。Something}，或者${data。Something}，你可以有一个模板函数来为你处理范围。

如何调用这样一个模板的例子:

const tempGreet = Template(() => `
  <span>Hello, ${name}!</span>
`);
tempGreet({name: 'Brian'}); // returns "<span>Hello, Brian!</span>"

模板函数:

function Template(cb) {
  return function(data) {
    const dataKeys = [];
    const dataVals = [];
    for (let key in data) {
      dataKeys.push(key);
      dataVals.push(data[key]);
    }
    let func = new Function(...dataKeys, 'return (' + cb + ')();');
    return func(...dataVals);
  }
}

在这种情况下，你只需要传递一个返回ES6模板文字的函数(在这个例子中，我使用了一个箭头函数)。我认为要得到我们所追求的那种可重用的插值，这是一个小小的权衡。

这里是GitHub: https://github.com/Adelphos/ES6-Reuseable-Template

简化@metamorphasi提供的答案;

const fillTemplate = function(templateString, templateVars){ var func = new函数(…Object.keys(templateVars)， "return ' "+templateString +" ';") 返回func(…Object.values (templateVars)); ｝ / /样本 var hosting = "overview/id/d:${id}"; var domain = {Id:1234，用户:22}; var result = fillTemplate(主机，域); console.log(结果);

可以使用以下函数动态解析模板，提供新数据。

这使用了javascript的一个不太常见的特性，称为Tagged Template Literal

function template(...args) {
  return (values) =>
    args[0].reduce(
      (acum, current, index) => 
        acum.concat(
          current, values[index] === undefined ? '' : values[index]
        ),
      ''
    )
}

const person = 'Lydia';
const age = 21;

template `${person} is ${age} years old... yes He is ${age}`(['jose', 35, 38]); //?

我对输入这个需要额外的冗余感到恼火。所以我还添加了regex来将。a这样的变量展开为这个。a。

解决方案:

const interp = template => _thisObj =>
function() {
    return template.replace(/\${([^}]*)}/g, (_, k) =>
        eval(
            k.replace(/([.a-zA-Z0-9$_]*)([a-zA-Z0-9$_]+)/, (r, ...args) =>
                args[0].charAt(0) == '.' ? 'this' + args[0] + args[1] : r
            )
        )
    );
}.call(_thisObj);

这样使用:

console.log(interp('Hello ${.a}${.b}')({ a: 'World', b: '!' }));
// outputs: Hello World!

当我看到它的时候，我非常头疼。javascript中的文字模板非常酷，但它们****可重用或带有动态值。但解决方法非常简单。事实上，在花了几天时间编写解析器、格式化器和其他解决方案后，我不得不踢自己几次。最后在我放弃了这个想法，打算使用胡子或其他模板模块后，它击中了我.....

const DT = function dynamicTemplate(source) { return (new Function(`return \`${source}\``))() }

//let a = 1, b = 2;
//DT("${a} + ${b} equals ${a + b}")
// prints '1 + 2 equals 3'

这就是她写的全部内容。