JavaScript 反引号：字符串插值还是标记模板函数？

JavaScript 中的反引号：函数调用还是字符串标记？

在 JavaScript 中使用反引号 (...) 时，您可能会遇到意外行为，例如在反引号内使用单个参数执行 console.log 时：

console.log`1`;

生成输出例如：

console.log`1`
VM12380:2 ["1", raw: Array[1]]

理解标记​​模板

这种行为源于 ES6 中引入的标记模板的概念。标记模板是可以与反引号一起使用来操作字符串文字的函数。调用标记模板时，它会收到两个参数：

• 字符串：字符串文字数组
• ...值：嵌入字符串文字中的值数组

函数调用与函数调用标记

对于带有反引号的console.log，反引号不会调用该函数。相反，他们使用 console.log 函数标记字符串文字“1”。生成的标记模板函数返回一个包含转换值的数组。

具体来说：

• strings[0] 包含字符串文字：“1”
• strings[ 1] 未定义
• values[0] 包含嵌入值： 1
• raw 包含未转换的字符串文字： ["1"]

转译

现代浏览器转译 ES6 代码以使其兼容使用较旧的 JavaScript 版本。在这种情况下，标记模板函数将转换为常规函数调用：

var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };

console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));

_taggedTemplateLiteralLoose 函数返回一个数组，该数组将传递给 console.log 函数，该函数将打印该数组。

结论

JavaScript 中的反引号可以用于两者字符串插值和标记模板。当与标记模板函数一起使用时，该函数接收字符串文字和嵌入值的解析值，从而在输出数据之前能够对数据进行操作和转换。

以上是JavaScript 反引号：字符串插值还是标记模板函数？的详细内容。更多信息请关注PHP中文网其他相关文章！