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

Question

例如，在运行下面的代码 -

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？

Answer 1

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

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

tag `abc`;

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

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

tag `abcd`;

输出为

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

而不是：

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

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

Extra element in string literal array of template literals

javascript

string

literals

template-literals

backticks