标记的模板文字如何在JavaScript中工作？

Posted 2021-05-07

请考虑以下代码段：

let a = (x) => console.log(x);
a`1234`; // prints "Array [ "1234" ]"

为什么字符串在包含匿名函数的变量之后，使函数在Array中作为参数运行？是否有针对此行为的任何文档参考？

另外，为什么在使用引号或双引号来声明字符串文字时它不起作用？

答案

Tagged template literals采取(strings: string[], ...values: any[]): any的形式。

在你的例子中，

let a = (x) => console.log(x);
a`1234`; // prints "Array [ "1234" ]"

x的类型为string[]，它是所有非插值字符串的数组（基本上任何不在${}中的字符串）。因为没有插值，所以数组包含一个元素（字符串“1234”）。这是作为函数a的第一个参数传递的内容。

只有template literals可以用函数标识符“标记”，这就是为什么你注意到它不适用于单引号或双引号字符串，只有反引号。我认为如果您尝试使用常规字符串，它会抛出语法错误，但我还没有测试过。

如果要插值，可以通过添加附加参数来接收函数中的值（用作标记）来实现。请注意，它不是单个参数，而是一个数组，而是单独的参数。当然，您可以使用扩展运算符（...）从它们创建一个数组，如上面的函数签名所示。与MDN提供的（修改）示例一样，

const person = 'Mike';
const age = 28;

function tag(strings, person, age) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // const str2 = strings[2];

  const age_description = age > 99 ? 'centenarian' : 'youngster';
  return [str0, name, str1, ageDescription].join('');
}

const output = tag`That ${person} is a ${age}`;

console.log(output); // "That Mike is a youngster"

请注意，如注释中所示，始终存在前导和尾随字符串，即使它恰好为空。因此，如果您使用插值开始模板文字，strings[0]将是一个空字符串。以相同的方式，以插值结束留下尾随空字符串，尽管这不是显着的（前导插值将所有索引移位一，尾随不影响它们）。