javascript - 模板文字 : how to perform substitution correctly?

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() 因为 Symbol cannot be implicitly coerced to a string .