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

Question

考虑以下片段：

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

为什么字符串跟在保存匿名函数的变量后面，使函数运行时将自身作为参数传递给数组？这种行为是否有任何文档参考？

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

Answer 1

标记模板文字采用(strings: string[], ...values: any[]): any.

在你的例子中，

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

x有 type string[]，它是所有非内插字符串的数组（基本上是不在里面的任何东西${}）。由于没有插值，数组包含一个元素（字符串“1234”）。这是作为第一个参数传递给您的函数的内容a。

只有模板文字可以用函数标识符“标记”，这就是为什么您注意到它不适用于单引号或双引号字符串，只能使用反引号。我认为如果您尝试使用常规字符串执行此操作，它会引发语法错误，尽管我尚未对此进行测试。

如果您想插入一个值，您可以通过添加其他参数来接收函数中的值（用作标记）。请注意，它不是作为数组的单个参数，而是单独的参数。当然，您可以使用扩展运算符 ( ...)从它们创建一个数组，如上面的函数签名所示。如 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]则将是一个空字符串。以同样的方式，以插值结尾会留下一个尾随空字符串，尽管这并不显着（前导插值将所有索引移动一个，尾随不影响它们）。