javascript - 为什么使用模板字符串时可以不用括号调用函数？

Question

这个问题已经有答案了:

Backticks (`…`) calling a function in JavaScript (3 个回答)

已关闭 6 年前。

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

function log(str) {
  console.log('logged: ', str);
}

如果我不带括号调用它(当前使用 Chrome 的开发工具)并传入模板字符串，如下所示:

log`foo`

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

如果我用括号调用它，

log(`foo`)

输出为:logged: foo

为什么在 Javascript 中可以使用模板字符串调用函数而不使用括号？发生了什么导致结果与用括号调用它不同？

Answer 1

第一个示例 ( 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(<code>foo</code>)时，您最终只能得到结果字符串。没有对象，没有零件，没有原始值。