反引号调用函数


92

我不确定如何解释,但是当我跑步时

console.log`1`

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

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

反引号为什么要调用log函数,为什么要对它进行索引raw: Array[1]

由Catgocat在JS室提出的问题,但是除了关于模板化字符串的事情之外,没有其他任何答案是合乎情理的。


Answers:


67

在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,该控制台随后将打印阵列。


10
我发现这更容易理解explanantion- wesbos.com/tagged-template-literals
Dave Pile

34

标记的模板文字:

语法如下:

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.