模板文字：如何正确执行替换？

Question

所以我有一个标签功能：

var tagFunc = function(strings, ...expressions){

}

如果我调用它：

tagFunc`sum is ${2+2}`

那么我假设：

strings 是一个有两个元素的数组。 strings[0] 是 "sum is " 并且 strings[1] 是表达式 ("").
expressions 是一个只有一个元素的数组，表达式 2+2 本身的结果，因此值为 4.
expressions 数组总是比 strings 数组少一项。

我的假设是否正确？如何正确生成 tagFunc 中的最终字符串？

我的尝试是

var tagFunc = function(strings, ...expressions){
    var str = "";
  strings.forEach((string, i) => {
       str += string + (expressions[i]?expressions[i]:"");
  });
    return str;
}
console.log(tagFunc`sum is ${2+2}` === `sum is ${2+2}`) // true

这似乎有效：

我可以依靠我的假设并继续这个逻辑吗？

Answer 1

假设正确，这就是标签的工作原理，另请参阅 the reference。

代码中有错误，这将忽略错误的表达式：

  strings.forEach((string, i) => {
       str += string + (expressions[i]?expressions[i]:"");
  });

由于预期总是有最终字符串并且 strings 比 expressions 多 1 个元素，因此可以是：

const tagFunc = ([initialString, ...strings], ...expressions) => expressions.reduce(
  (str, expression, i) => str + String(expression) + strings[i],
  initialString
);

最好有 String() 因为 .

模板文字：如何正确执行替换？

Template literals: how to perform substitution correctly?

javascript

ecmascript-6

template-literals