反引号 (\`...\`) 在 JavaScript 中调用函数

Question

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

console.log`1`

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

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

为什么反引号会调用日志函数，为什么它会生成 raw: Array[1] 的索引？

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

原文由 Sterling Archer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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"

基本上，它只是用 console.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"] );

这个函数的返回值被传递给 console.log 然后打印数组。

原文由 ShrekOverflow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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}`;

1. 第一个参数是所有单个字符串字符的数组
2. 剩余的参数对应于我们通过字符串插值接收到的变量值。请注意示例中 arg4 没有值（因为只有3次字符串插值）因此 undefined 在我们尝试记录 arg4 -5c563时被记录

使用剩余参数语法：

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

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

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

原文由 Willem van der Veen 发布，翻译遵循 CC BY-SA 4.0 许可协议