Backticks调用函数

Question

Backticks调用函数我不知道该怎么解释，但是当我跑console.log`1`在Google Chrome中，我得到的输出类似于console.log`1`VM12380:2 ["1", raw: Array[1]]为什么反勾号调用日志函数，以及为什么它要将raw: Array[1]?Catgocat在JS的房间里提出的问题，但是除了关于模板串这并不符合为什么会发生这种事。

Answer 1

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

但是代码的相关部分如下(基本上可以创建一个过滤的排序)。

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

基本上，它只是将“1”标记为控制台.log函数，就像它对任何其他函数所做的那样。标记函数分别接受模板字符串的解析值和可以执行进一步任务的值。

Babel将上述代码转到

var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };
console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));

正如您在上面的示例中所看到的那样，在被Babel转移之后，标签函数(控制台.log)被传递给如下ES6->5转置代码的返回值。

_taggedTemplatalLoose([“1”]，[“1”])；

此函数的返回值将传递给控制台。日志将随后打印该数组。

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

使用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}`;

Answer 3

有关：JavaScriptES6标记模板-什么时候使用原始模板？什么时候用煮的？, ES6标记模板函数如何解释它们的参数顺序？