ES6 calling function with template literal but no parentheses [duplicate]

问题

According to MDN, Tagged template literals can be used as follows:

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!"

In the example above, the function tag is called without using parentheses.

I expected it should be called like tag(`Hello`), but that passes the string resulting from the template literal as the argument for the strings parameter of the function.

What's this special feature of calling functions without parentheses but with parameter?

回答1:

What's this special feature of calling functions without parentheses?

This syntax for tagged templates is simply allowed by the the grammar:

MemberExpression : MemberExpression TemplateLiteral
CallExpression : CallExpression TemplateLiteral

These rules means that a MemberExpression or CallExpression followed by a TemplateLiteral is considered to be a function call. Additional note from the spec:

A tagged template is a function call where the arguments of the call are derived from a TemplateLiteral (12.2.9). The actual arguments include a template object (12.2.9.3) and the values produced by evaluating the expressions embedded within the TemplateLiteral.

If you are asking for why it was done this way, I cannot give you an answer.

However, if you think about it, the couldn't have just used "ordinary" function call syntax. tag(`...`) means that tag is passed a single argument, the result of evaluating the template literal. But as you can see in the example from MDN, tagged template functions actually get passed multiple arguments. It would certainly be more surprising if functions were called differently (internally) if they were passed a template literal vs if they were called with a different value. And then, how would call a function if you really wanted to pass a template literal to it?

Hence introducing a new syntax seems to make sense.

FWIW, this is the grammar for "ordinary" function calls:

CallExpression : MemberExpression Arguments
CallExpression : CallExpression Arguments

来源：https://stackoverflow.com/questions/36167849/es6-calling-function-with-template-literal-but-no-parentheses

标签

javascript

ecmascript-6

tagged-templates