带有模板文字但没有括号的ES6调用函数[重复]答案

【问题标题】：ES6 calling function with template literal but no parentheses [duplicate]带有模板文字但没有括号的ES6调用函数[重复]
【发布时间】：2016-07-10 03:13:58
【问题描述】：

根据MDN，Tagged template literals可以这样使用：

var a = 5;
var b = 10;
function tag(strings, ...values) {
  alert(strings[0]); // "Hello "
  alert(strings[1]); // " world "
  alert(values[0]); // 15
  alert(values[1]); // 50
  return "Bazinga!";
}
tag `Hello ${ a + b } world ${ a * b }`; // "Bazinga!"

在上面的示例中，函数tag 的调用没有使用括号。

我希望它应该像 tag(`Hello`) 一样调用，但它会将模板文字产生的字符串作为函数的 strings 参数的参数传递。

不带括号但带参数调用函数的这个特殊功能是什么？

【问题讨论】：

您可以添加指向该示例源的链接吗？
标记模板：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。语法就是这样。它本身就很特别。
这是我第一次看到在没有 () 的情况下调用函数。最初认为这是一些速记符号，但快速检查表明并非如此
有人能解释一下为什么 -ve 投票
new 运算符例如：new Foo。当然还有call和apply（当然也是函数，但你不是“使用括号”来调用函数本身）。

标签： javascript ecmascript-6 tagged-templates

【解决方案1】：

调用不带括号的函数有什么特别之处？

标记模板的语法就是allowed by the the grammar:

MemberExpression : MemberExpression TemplateLiteral
CallExpression : CallExpression TemplateLiteral

这些规则意味着MemberExpression 或CallExpression 后跟TemplateLiteral 被视为函数调用。规范中的附加说明：

标记模板是一个函数调用，其中调用的参数派生自 TemplateLiteral (12.2.9)。实际参数包括一个模板对象 (12.2.9.3) 和通过计算嵌入在 TemplateLiteral 中的表达式而产生的值。

如果你问为什么会这样，我不能给你答案。

但是，如果你仔细想想，不可能只使用“普通”的函数调用语法。 tag(`...`) 表示 tag 被传递了一个参数，这是评估模板文字的结果。但正如您在 MDN 的示例中看到的那样，标记的模板函数实际上传递了多个参数。如果函数被传递一个模板文字而不是用不同的值调用，那么如果函数以不同的方式（内部）调用，那肯定会更令人惊讶。然后，如果您真的想将模板文字传递给函数，如何调用它？

因此引入新语法似乎是有意义的。

FWIW，这是"ordinary" function calls 的语法：

CallExpression : MemberExpression Arguments
CallExpression : CallExpression Arguments

【讨论】：

还可以添加解释参数如何进入函数的说明。
所以你的意思是模板文字是如何“分解”成多个参数的？
是的，就像问题一样。 strings 如何拥有 {"Hello", "world"} 和 values 拥有 {a + b, a * b}，尽管它已通过 Hello ${a+b} world ${a*b}。
如果你问为什么会这样，我不能给你答案。 这样做是为了让人们轻松定义迷你语言（DSL ) 适用于从本地化到 DOM 模板的用例。
@torazaburo：我说的不是标记模板本身，只是语法决定。