This question already has answers here:
Closed 3 years ago.
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?
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