使用模板字符串时为什么函数可以不带圆括号调用?

26

我有一个简单的日志记录函数:

function log(str) {
  console.log('logged: ', str);
}
如果我在不使用括号的情况下调用它(目前使用Chrome的开发工具),并传递一个模板字符串,像这样:


log`foo`
输出结果为:logged: ["foo", raw: Array[1]] 如果我加上括号调用它,
log(`foo`)

输出为:logged: foo

为什么在JavaScript中使用模板字符串且没有括号调用函数有效?这是什么原因导致结果与使用括号调用不同?

1个回答

35

第一个例子(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"]
}

请注意,所有字符串都通过第一个参数传递。同样,所有插值表达式都通过其余的参数传递(在此合并为一个数组)。

有了这种额外的控制,我们可以做各种各样的事情,比如本地化。在这个例子中,语言规范确定要传递给函数的适当值 - 开发者不确定这一点。

相反,当您调用log(foo)时,您最终只获得结果字符串。没有对象,没有部分,没有原始值。


4
很值得添加一个链接,因为我之前从未听说过这个:https://developers.google.com/web/updates/2015/01/ES6-Template-Strings#tagged-templates - Evan Davis
我在审查同事的代码时发现了这个。很酷的东西。感谢解释。 - Dave Sag

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接