一般来说，我反对使用邪恶的eval()，但在这种情况下，它是有意义的:

var template = "`${a}.${b}`";
var a = 1, b = 2;
var populated = eval(template);

console.log(populated);         // shows 1.2

然后如果你改变值并再次调用eval()，你会得到新的结果:

a = 3; b = 4;
populated = eval(template);

console.log(populated);         // shows 3.4

如果你想把它写在一个函数中，那么它可以这样写:

function populate(a, b){
  return `${a}.${b}`;
}

我解决了这个插值模板使用:

function flatKeys(inputObject: any): {[key: string]: any} {
    const response: {[key: string]: any} = {};
  function iterative(currentObject: any, parentKeys: string[]=[]) {
    const llaves = Object.keys(currentObject);
    for (let i=0; i<llaves.length; i++) {
        const llave: string = llaves[i];
      const valor = currentObject[llave];
      const llavesNext = parentKeys.concat(llave);
      if (typeof valor == 'object') {
        iterative(valor, llavesNext);
      } else {
        response[llavesNext.join('.')] = valor;
      }
    }
  }
  iterative(inputObject);
  return response;
}

function interpolate(template: string, values: any, defaultValue='') {
  const flatedValues = flatKeys(values);
  const interpolated = template.replace(/\${(.*?)}/g, function (x,g) {
    const value = flatedValues[g];
    if ([undefined, null].indexOf(value) >= 0) {
      return defaultValue;
    }
    return value;
  });
  return interpolated;
}

const template = "La ${animal.name} tomaba ${alimento.name} con el ${amigos.0.names}";
const values = {
    animal: {
    name:"Iguana"
  },
  alimento: {
    name: "café"
  },
  amigos: [
    { name: "perro" },
    true
  ]
};

const interpolated = interpolate(template, values);

console.log(interpolated);

你可以在函数中放入一个模板字符串:

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”中分离出常量字符串，然后返回一个函数，该函数每次都根据一组新的值将它们重新组合在一起。

我遗漏了什么吗?是否有一个[好]方法来使一个可重用的模板文字?

也许我遗漏了一些东西，因为我对这个问题的解决方案对我来说太明显了，以至于我很惊讶没有人在这样一个古老的问题中写下这个答案。

对于这个问题，我几乎只有一句话:

function defer([first, ...rest]) {
  return (...vals) => rest.reduce((acc, str, i) => acc + vals[i] + str, first);
}

这是所有。当我想重用一个模板并推迟替换的解析时，我只做:

function defer([first, ...rest]) { return (...vals) => rest.reduce((acc, str, i) => acc + vals[i] + str, first); } t = defer`My template is: ${null} and ${null}`; a = t('simple', 'reusable'); // 'My template is: simple and reusable' b = t('obvious', 'late to the party'); // 'My template is: obvious and late to the party' c = t(null); // 'My template is: null and undefined' d = defer`Choose: ${'ignore'} / ${undefined}`(true, false); // 'Choose: true / false' console.log(a + "\n" + b + "\n" + c + "\n" + d + "\n");

应用此标记将返回一个'函数'(而不是'字符串')，该函数将忽略传递给字面量的任何参数。然后可以稍后用新参数调用它。如果一个参数没有相应的替换，它就变成了“undefined”。

扩展的回答

这段简单的代码是功能性的，但是如果您需要更详细的行为，可以应用相同的逻辑，并且有无限的可能性。你可以:

利用原始参数:

您可以在结构中存储传递给文字的原始值，并在应用模板时以创造性的方式使用它们。它们可以成为标志、类型验证器、函数等。下面是一个使用它们作为默认值的例子:

function deferWithDefaults([first，…，…默认值){ 返回(…values) => rest。Reduce ((acc, curr, i) => { 返回acc + (i < values。长度呢?值[i]: defaults[i]) + curr; },第一); ｝ 我的模板是:${'extendable'}和${'versatile'}; A = t('awesome'); // '我的模板是:awesome and versatile' console.log(一个);

写一个模板工厂:

通过将此逻辑包装在一个函数中，该函数期望作为参数的自定义函数可以应用于约简(当连接模板字面量的片段时)，并返回具有自定义行为的新模板。

然后，你可以，例如，编写模板，自动转义或清除参数时，编写嵌入式html, css, sql, bash…

使用这个naïve(我重复一遍，naïve!) sql模板，我们可以构建这样的查询:

const createTemplate = fn => function (strings, ...defaults) { const [first, ...rest] = strings; return (...values) => rest.reduce((acc, curr, i) => { return acc + fn(values[i], defaults[i]) + curr; }, first); }; function sqlSanitize(token, tag) { // this is a gross simplification, don't use in production. const quoteName = name => (!/^[a-z_][a-z0-9_$]*$/ .test(name) ? `"${name.replace(/"/g, '""')}"` : name); const quoteValue = value => (typeof value == 'string' ? `'${value.replace(/'/g, "''")}'` : value); switch (tag) { case 'table': return quoteName(token); case 'columns': return token.map(quoteName); case 'row': return token.map(quoteValue); default: return token; } } const sql = createTemplate(sqlSanitize); q = sql`INSERT INTO ${'table'} (${'columns'}) ... VALUES (${'row'});` a = q('user', ['id', 'user name', 'is"Staff"?'], [1, "O'neil", true]) // `INSERT INTO user (id,"user name","is""Staff""?") // VALUES (1,'O''neil',true);` console.log(a);

接受命名参数进行替换:基于已经给出的内容，这是一个不那么困难的练习。在另一个答案中有一个实现。 使返回对象的行为像一个“字符串”:嗯，这是有争议的，但可能会导致有趣的结果。在另一个答案中。 解析调用站点全局命名空间中的参数:

我给你，可重用的模板文字

这是OP展示的附录，使用了邪恶的命令，我的意思是eval。这可以在没有eval的情况下完成，只需将传递的变量名搜索到全局(或窗口)对象中即可。我不演示怎么做，因为我不喜欢它。闭包是正确的选择。

你可以像这样使用内联箭头函数， 定义:

const template = (substitute: string) => `[^.?!]*(?<=[.?\s!])${substitute}(?=[\s.?!])[^.?!]*[.?!]`;

用法:

console.log(template('my replaced string'));

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

这使用了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]); //?