javascript - 带标签的模板文字如何在 JavaScript 中工作？

Question

考虑以下代码片段:

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

为什么保存匿名函数的变量后面的字符串使函数运行时将其自身作为参数传递到数组中？有关于此行为的任何文档引用吗？

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

Answer 1

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] 将是一个空字符串。以同样的方式，以插值结尾会留下尾随空字符串，尽管这并不那么值得注意(前导插值将所有索引移动一位，尾随不会影响它们)。