为什么在使用模板字符串时可以在没有括号的情况下调用函数?

Seb*_*ist 22 javascript ecmascript-harmony ecmascript-6 template-strings ecmascript-2015

我有一个简单的日志功能:

function log(str) {
  console.log('logged: ', str);
}
Run Code Online (Sandbox Code Playgroud)

如果我在没有括号的情况下调用它(目前使用Chrome的开发工具)并传入模板字符串,如下所示:

log`foo`
Run Code Online (Sandbox Code Playgroud)

输出是: logged: ["foo", raw: Array[1]]

如果我用括号称呼它,

log(`foo`)
Run Code Online (Sandbox Code Playgroud)

输出是: logged: foo

为什么在Javascript中使用模板字符串调用函数没有括号?发生了什么导致结果与用括号调用结果不同?

Sam*_*son 27

第一个示例(log`foo`)允许语言规范确定传递给日志函数的值(见12.3.7).第二个示例(log(`foo`))显式传递一个参数.

模板文字可以包含字符串以及表达式.有时您可能希望从字符串部分和表达式部分更多地控制字符串的编译.在这种情况下,您可能正在寻找标记模板.

var name = "Jonathan";
var mssg = foo `Hello, ${name}. Nice name, ${name}.`;

function foo ( strings, ...values ) {
    console.log( strings ); //["Hello, ", ". Nice name, ", ".", raw: Array[3]]
    console.log( values  ); //["Jonathan", "Jonathan"]
}
Run Code Online (Sandbox Code Playgroud)

请注意这里所有字符串是如何通过第一个参数传入的.同样,所有插值值表达式都通过其余参数传递(这里一起拉到一个数组中).

通过这种增加的控制,我们可以做各种事情,例如本地化.在此示例中,语言规范确定要传递给函数的适当值 - 开发人员不会确定此值.

相比之下,当你打电话时,你最终得到结果字符串.没有对象,没有零件,没有原始值.log(foo)

  • 值得添加链接,因为我之前没有听说过这个链接:https://developers.google.com/web/updates/2015/01/ES6-Template-Strings#tagged-templates (2认同)