Question

我有两个使用模板文字的tagged template功能的代码段

代码一

function myTaggedLiteral(strings, value, value2) {
  console.log(strings, value, value2);
}

let someText = 'Neat';
myTaggedLiteral `test ${someText} ${2 + 3} test2`;

在这种情况下，它将记录

[
  "test ",
  " ",
  " test2"
] Neat 5

另一个例子是来自mdn

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {
  console.log(strings, personExp, ageExp)
  // some other code
}
var output = myTag `That ${ person } is a ${ age }`;

这将记录

[
  "That ",
  " is a ",
  ""
] Mike 28

因此，在第一个日志中，""之后有一个空字符串test，我的理解是模板表达式${someText} ${2 + 3}的含义，但是在第二个日志中，没有""在That之后，尽管两个函数都以几乎相同的参数结构被调用。

如果有人帮助我理解为什么测试后的第一个日志中没有空字符串，我们将非常感谢。

第二，如果我调整第一个程序

function myTaggedLiteral(strings, value, value2) {
  console.log(strings);
}

let someText = 'Neat';
myTaggedLiteral `test test6 test3 ${someText} ${2 + 3}`;

这将记录

[
  "test test6 test3 ",
  " ",
  ""
]

按照mdn

标记函数的第一个参数包含一个字符串数组值。

如果是这样，那么为什么将第一个值输出为"test test6 test3 "而不是"test","test6","test3"？

Answer 1

考虑strings参数，例如String.prototype.split()的结果，其中分隔符是任何placeholder，又名

...以美元符号和大括号（${expression}）表示。

这是一个例子

let templateString = 'test test6 test3 ${someText} ${2 + 3}'
let strings = templateString.split(/\$\{.*?}/) // regex for a placeholder

console.log(strings)

从documentation ...

如果separator出现在字符串的开头或结尾，或同时出现在两个字符串的开头和结尾，则数组分别以一个空字符串开头，结尾或同时出现在两端。

这就是为什么，如果在字符串的边界出现任何占位符，则会在结果数组中获得空字符串。

在这种情况下，您始终可以确保strings的条目比占位符表达式多。创建结果字符串将始终涉及（忽略您可能要执行的任何其他转换）...

strings[0] + arg[0] +
strings[1] + arg[1] +
...                     
strings[n] + arg[n] + strings[n+1]

其中 n 是占位符的数量。

在理解标记模板方面需要帮助

1 个答案: