模板文字的字符串文字数组中的额外元素

【问题标题】：Extra element in string literal array of template literals模板文字的字符串文字数组中的额外元素
【发布时间】：2020-10-26 11:45:35
【问题描述】：

例如，运行下面的代码 -

let a = 5;
let b = 10;

function print(strings, ...values) {
  console.log(strings[0]);
  console.log(strings[1]);
  console.log(strings[2]);
  console.log(values[0]);
  console.log(values[1]);
}

print `add${a + b}mul${a - b}`;

收到以下输出 -

"add"
"mul"
""
15
-5

即使我只提供了两个 add 和 mul ，为什么最后还有一个额外的字符串文字？

【问题讨论】：

标签： javascript string literals template-literals backticks

【解决方案1】：

因为${a - b} 后面有空字符串""。最后一个索引根本无法删除，因为可能存在非空字符串。通过将两个表达式并排放置，它们之间没有任何字符串，您可以获得相同的行为 (${...}${...})。示例：

function tag(...all) {
  console.log(all);
}

tag `a${1}b${2}${3}c`;

如果需要去除空字符串，可以使用Array.filter过滤字符串数组，下面是一个例子：

function tag(strings, ...values) {
  console.log(strings.filter(Boolean)); // filters arary, "" == false
  console.log(values);
}

tag `a${1}b${2}${3}c${4}d${5}`;

输出是

["a","b","c","d"]

代替：

["a","b","","c","d",""]

【讨论】：