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

【问题标题】：Template literals: how to perform substitution correctly?模板文字：如何正确执行替换？
【发布时间】：2018-04-11 21:55:31
【问题描述】：

所以我有一个标签功能：

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

这似乎有效：

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

【问题讨论】：

我无法回答这个问题，但我不知道您可以使用模板文字和函数来做到这一点。使用模板调用没有 () 的函数很酷。感谢您提出有趣的问题。

标签： javascript ecmascript-6 template-literals

【解决方案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。

【讨论】：