反引号调用函数

Question

我不知道如何解释这个,但是当我跑步时

console.log`1`

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

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

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

Catgocat在JS房间里提出了一个问题,但除了一些关于模板字符串的内容之外没有任何答案是有意义的,因为这些字符串并不真正适合发生这种情况的原因.

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,然后将打印该数组.

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
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，允许在输入原始字符串时访问它们（不处理转义序列）。

示例用例：

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 数组实际上是对象，它们可以存储属性。

例子：

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