模板文字和无括号的函数调用

html5 • • 问答

我最近了解到，当使用模板文字作为参数时，ES6 允许在没有括号的情况下进行函数调用。例如

showstring`Hello World`;

showstring`Hello World`;

但是，在阅读了有关此功能的几篇文章后，我对 JS 如何处理这些调用背后的逻辑知之甚少。

在玩弄了我的代码的一些排列之后，我仍然在努力拼凑模板文字在函数内部如何分解的模式，当人们以这种方式调用它时。

回答

在第二个代码片段中，记录了这些：

// str
[
  "Hello World ",
  " ",
  " ",
  " and more"
]

// values
[
  "John",
  "John",
  3
]

如果那些“空字符串”是指数组的第 2 项和第 3 项，则str它们不是空字符串；它们是带有单个空格的字符串。它们来自模板文字中表达式之间的空格：

showstring`Hello World ${name} ${name} ${1 + 2} and more`;
//                            ^       ^

当模板文字前面有一个表达式时——在这种情况下showstring——它被称为标记模板。

在您的showstring函数中，str始终包含比values数组多一项。例如，看看这些日志是什么：

const showstring = (str, ...values) => {
  console.log(str);
  console.log(values)
}
const name = 'John'
showstring``;
showstring`${name}`;
showstring`Hello ${name}!`;

这不是特定于您的功能；这就是标记模板的工作方式。来自《不耐烦程序员的 JavaScript（ES2020 版）》一书中的标记模板部分：

第一个反引号之前的函数称为标记函数。它的论据是：

  • 模板字符串（第一个参数）：带有围绕插值的文本片段的数组${}。
  • 替换（剩余参数）：内插值。

关于你的评论：

有趣的是，无论在调用函数时在表达式之间放置多少个空格，该单个空格将始终保持为单个空格。知道为什么它只修剪到一个空间吗？

情况似乎并非如此。这会记录一个包含三个空格的字符串：

const showstring = (str, ...values) => {
  console.log(str);
  console.log(values)
}
const name = 'John'
showstring`Hello ${name}   ${name}!`;

您是否可能将结果打印到 DOM？除非您正在使用<pre>或white-space: pre;类似的东西，否则多个空格仅显示为一个，因此结果似乎被修剪为一个空格。

以上是模板文字和无括号的函数调用的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容