模板文字:如何正确执行替换?

时间:2018-04-11 13:06:03

标签: javascript ecmascript-6 template-literals

所以我有一个标签功能:

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




这似乎有效:

我可以依靠我的假设并继续这种逻辑吗?

1 个答案:

答案 0 :(得分:1)

假设是正确的,这是标签的工作方式,另请参阅the reference

代码中有一个错误,这会忽略错误的表达式:

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

由于预计始终存在最终字符串且strings有1个元素超过expressions,因此可以是:

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