在 JavaScript 中调用函数的反引号（'...'）

javascript ecmascript-6 template-strings template-literals tagged-templates

2022-08-30 04:32:25

我不知道如何解释这一点，但是当我跑步时

console.log`1`

在谷歌浏览器中，我得到的输出像

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

为什么反引号调用 log 函数，为什么它索引？raw: Array[1]

Catgocat在JS房间里提出了问题，但除了关于模板化字符串的东西之外，没有任何答案是有意义的，这些字符串并不适合为什么会发生这种情况。

答案 1

它被称为ES-6中的标记模板，可以在这里阅读有关它们的信息，有趣的是，我在聊天的星标部分找到了链接。

但是代码的相关部分如下（您基本上可以创建过滤排序）。

function tag(strings, ...values) {
  assert(strings[0] === 'a');
  assert(strings[1] === 'b');
  assert(values[0] === 42);
  return 'whatever';
}
tag `a${ 42 }b`  // "whatever"

基本上，它只是用控制台.log功能标记“1”，就像使用任何其他功能一样。标记函数分别接受模板字符串的已分析值和可执行进一步任务的值。

Babel 将上述代码转译为

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

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

正如您在上面的示例中看到的，在被 babel 转译后，标记函数（console.log）正在传递以下 es6->5 转译代码的返回值。

_taggedTemplateLiteralLoose( ["1"], ["1"] );

此函数的返回值将传递到控制台.log然后控制台将打印数组。

答案 2

标记的模板文本：

以下语法：

function`your template ${foo}`;

称为标记的模板文本。

作为标记模板文本调用的函数按以下方式接收其参数：

function taggedTemplate(strings, arg1, arg2, arg3, arg4) {
  console.log(strings);
  console.log(arg1, arg2, arg3, arg4);
}

taggedTemplate`a${1}b${2}c${3}`;

第一个参数是所有单个字符串字符的数组
其余参数对应于我们通过字符串插值接收的变量值。请注意，在示例中没有值（因为只有 3 次字符串插值），因此当我们尝试记录日志时，将记录arg4undefinedarg4

使用 rest 参数语法：

如果我们事先不知道在模板字符串中将发生多少次字符串插值，那么使用 rest 参数语法通常很有用。此语法将函数接收的其余参数存储到数组中。例如：

function taggedTemplate(strings, ...rest) {
  console.log(rest);
}

taggedTemplate `a${1}b${2}c${3}`;
taggedTemplate `a${1}b${2}c${3}d${4}`;

在 JavaScript 中调用函数的反引号 （'...'）

标记的模板文本：

使用 rest 参数语法：

在 JavaScript 中调用函数的反引号（'...'）