在 ES2015 中，如何以正确的顺序重构标记的模板文字？

Question

使用 MDN 文档中有关模板文字的示例，我们可以创建自定义 "tag" 函数。

var a = 5;
var b = 10;

function tag(strings, ...values) {
    console.log(strings[0]);
    console.log(strings[1]);
    console.log(values[0]);
    console.log(values[1]);

    return strings[0] + ' ' + values[0] + ' ' + strings[1] + ' ' + values[1];
}

tag`Hello ${ a + b } world ${ a * b }`;

从这里开始，我们如何按照混合 strings 和 values 时输入的相同顺序构造消息？

上面的tag函数在交换value/string顺序时会出现顺序维护失败的情况，例如：

tag`Hello ${ a + b } world ${ a * b }`;
// swapped to
tag`${ a + b } hello ${ a * b } world`;

文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 1

strings.length 总是比 ...values.length 大一。 strings 的第一个值将始终是模板字符串的内容，直到第一次替换为止。当替换为模板字符串的第一个值时，strings[0] 为空字符串。当模板字符串的最后一个值是替换时也是如此，strings[strings.length-1] 是一个空字符串。

因此，在您的示例中，您将空字符串输出为 strings[0]，而 strings[1] 变为 hello，但您永远不会为 world 输出 strings[2]。重新加入字符串的正确方法是将 strings 的第一个索引分配给一个字符串，然后遍历所有值并将它们按顺序加在一起。

function tag(strings, ...values) {
  var str = strings[0];
  for (i = 0; i < values.length; i++) {
    str += values[i] + strings[i+1];
  }

  return str;
}

在 ES2015 中，如何以正确的顺序重构标记的模板文字？

In ES2015, how do you reconstruct a tagged template literal in the correct order?

javascript

ecmascript-6

template-literals

tagged-templates