javascript 调用函数的反引号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29660381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backticks calling a function
提问by Sterling Archer
I'm not sure how to explain this, but when I run
我不知道如何解释这一点，但是当我跑步时
console.log`1`
In google chrome, I get output like
在谷歌浏览器中，我得到的输出是
console.log`1`
VM12380:2 ["1", raw: Array[1]]
Why is the backtick calling the log function, and why is it making a index of raw: Array[1]?
为什么反引号调用 log 函数，为什么它会创建一个索引raw: Array[1]？
Question brought up in the JS room by Catgocat, but no answers made sense besides something about templating stringsthat didn't really fit why this is happening.
问题由 Catgocat 在 JS 房间提出，但除了模板字符串的一些内容之外，没有任何答案有意义，这些字符串并不真正适合为什么会发生这种情况。
采纳答案by ShrekOverflow
It is called Tagged Template in ES-6 more could be read about them Here, funny I found the link in the starred section of the very chat.
它在 ES-6 中被称为标记模板，更多可以阅读它们在这里，有趣的是我在聊天的加星标部分找到了链接。
But the relevant part of the code is below (you can basically create a filtered sort).
但是代码的相关部分如下（您基本上可以创建过滤排序）。
function tag(strings, ...values) {
assert(strings[0] === 'a');
assert(strings[1] === 'b');
assert(values[0] === 42);
return 'whatever';
}
tag `a${ 42 }b` // "whatever"
Basically, its merely tagging the "1" with console.log function, as it would do with any other function. The tagging functions accept parsed values of template strings and the values separately upon which further tasks can be performed.
基本上，它只是用 console.log 函数标记“1”，就像它对任何其他函数所做的那样。标记函数接受模板字符串的解析值和可以执行进一步任务的单独值。
Babel transpiles the above code to
Babel 将上述代码转译为
var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };
console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));
As you can see it in the example above, after being transpiled by babel, the tagging function (console.log) is being passed the return value of the following es6->5 transpiled code.
正如你在上面的例子中看到的，在被 babel 转译后，标记函数（console.log）被传递了以下 es6->5 转译代码的返回值。
_taggedTemplateLiteralLoose( ["1"], ["1"] );
The return value of this function is passed to console.log which will then print the array.
这个函数的返回值被传递给console.log，然后它将打印数组。
回答by Willem van der Veen
Tagged template literal:
标记模板文字：
The following syntax:
以下语法：
function`your template ${foo}`;
Is called the tagged template literal.
称为标记模板文字。
The function which is called as a tagged template literal receives the its arguments in the following manner:
作为标记模板文字调用的函数以下列方式接收其参数：
function taggedTemplate(strings, arg1, arg2, arg3, arg4) {
console.log(strings);
console.log(arg1, arg2, arg3, arg4);
}
taggedTemplate`abc`;- The first argument is an array of all the individual string characters
- The remaining argument correspond with the values of the variables which we receive via string interpolation. Notice in the example that there is no value for
arg4(because there are only 3 times string interpolation) and thusundefinedis logged when we try to logarg4
- 第一个参数是所有单个字符串字符的数组
- 剩余的参数与我们通过字符串插值接收到的变量值相对应。请注意，在示例中没有值
arg4（因为只有 3 次字符串插值），因此undefined在我们尝试记录时会记录arg4
Using the rest parameter syntax:
使用 rest 参数语法：
If we don't know beforehand how many times string interpolation will take place in the template string it is often useful to use the rest parameter syntax. This syntax stores the remaining arguments which the function receives into an array. For example:
如果我们事先不知道在模板字符串中会发生多少次字符串插值，那么使用 rest 参数语法通常很有用。此语法将函数接收到的剩余参数存储到数组中。例如：
function taggedTemplate(strings, ...rest) {
console.log(rest);
}
taggedTemplate `abc`;
taggedTemplate `abcd`;