反引号调用函数

Question

我不确定如何解释这个问题，但是当我跑步时

console.log`1`

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

这样的输出

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

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

Catgocat在JS会议室提出的问题，但除了templating strings的某些内容之外没有任何答案是有道理的，这些内容并不适合发生这种情况的原因。

Answer 1

在ES-6中称为标记模板可以阅读更多关于它们Here，搞笑我在聊天的已加星标部分找到了链接。

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

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

基本上，它只是标记＆＃34; 1＆＃34;使用console.log函数，就像使用任何其他函数一样。标记函数接受模板字符串的解析值和单独的值，可以在其上执行其他任务。

Babel将上述代码转换为

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

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

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

_taggedTemplateLiteralLoose（[＆＃34; 1＆＃34;]，[＆＃34; 1＆＃34;]）;

此函数的返回值传递给console.log，然后打印数组。

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

迟到的聚会，但是TBH，没有一个答案可以解释原始问题的50％（“为什么raw: Array[1]”）

1。为什么可以使用反引号来调用不带括号的函数？

console.log`1`

正如其他人所指出的，这称为Tagged Template（更多细节也称为here）。

使用此语法，该函数将接收以下参数：

• 第一个参数：一个数组，其中包含不是表达式的字符串的不同部分。
• 参数的其余部分：每个要插值的值（即那些表达式）。

基本上，以下是“几乎”等效的：

// Tagged Template
fn`My uncle ${uncleName} is ${uncleAge} years old!`

// function call
fn(["My uncle ", " is ", " years old!"], uncleName, uncleAge);

（请参阅第2点，以了解它们为何不完全相同）

2。为什么使用["1", raw: Array[1]] ???

作为第一个参数传递的数组包含属性raw，在输入时，允许accessing the raw strings（不处理转义序列）。

用例示例：

let fileName = "asdf";

fn`In the folder C:\Documents\Foo, create a new file ${fileName}`

function fn(a, ...rest) {
  console.log(a); //In the folder C:DocumentsFoo, create a new file
  console.log(a.raw); //In the folder C:\Documents\Foo, create a new file 
}

什么，具有属性的数组？？？ ???

是的，因为JavaScript数组实际上是对象，所以它们可以store properties。

示例：

const arr = [1, 2, 3];
arr.property = "value";
console.log(arr); //[1, 2, 3, property: "value"]