带标签的模板文字在JavaScript中如何工作? [英] How do tagged template literals work in JavaScript?

问题描述

请考虑以下代码段:

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

为什么在包含匿名函数的变量之后的字符串使函数运行以本身作为参数传递给Array?是否有任何有关此行为的文档参考?

Why does the string, following the variable holding the anonymous function, makes the function run passing itself in an Array as argument? Is there any documentation reference for this behavior?

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

Also, why it doesn't work when using quotes or double quotes for declaring the string literal?

推荐答案

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

在您的示例中，

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

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

x has the type string[], which is an array of all non-interpolated strings (basically anything that's not inside ${}). Because there are no interpolations, the array contains one element (the string "1234"). This is what is passed as the first argument to your function a.

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

Only template literals can be "tagged" with a function identifier, which is why you've noticed that it doesn't work with single or double-quoted strings, only backticks. I presume it would throw a syntax error if you tried to do it with a regular string, though I haven't tested that.

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

If you wanted to interpolate a value, you'd do so by receiving the value in the function (which is used as the tag) by adding additional parameters. Note that it is not a single parameter that is an array, but rather separate parameters. You can, of course, create an array from them by using the spread operator (...), as indicated in the function signature above. As in the (modified) example provided by 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]将是一个空字符串.以相同的方式，以插值结尾会留下一个尾随的空字符串，尽管这种情况并不明显(前导插值会将所有索引都移动一个，尾随不会影响它们).

Note that as indicated in the comments, there is always a leading and trailing string, even if it happens to be empty. As such, if you began a template literal with an interpolation, strings[0] would be an empty string. In the same manner, ending with an interpolation leaves a trailing empty string, though this isn't as notable (a leading interpolation shifts all indexes by one, a trailing doesn't affect them).

这篇关于带标签的模板文字在JavaScript中如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！