なぜテンプレート文字列（ ``）は先行するトークンを関数として実行するのですか？

Question

今日はエラーが発生しました - TypeError: "fa" is not a function - 短い調査の後、私は原因を見つけました。私はオブジェクトリテラルでカンマを忘れてしまった。文字列の後ろにテンプレート文字列（本質的には"fa"``）が続く。 not a functionを見て、私はいくつかの括弧を見つけようと思っていましたが、これは興味深いものでしたので、私はノードREPLで調査を深めました。

''``    // TypeError: '' is not a function 
'foo'``   // TypeError: 'foo' is not a function 
1``    // TypeError: 1 is not a function 
(() => 'foobar')`` //'foobar' 

さて、テンプレート文字列はトークンの後にかっこを置くのと同じように動作するようです。 Curiouserとcuriouser。

は、私はそれが任意の引数に沿って通るかどうかは疑問に思ったので、私はこれを書いた：

function showArgs() { 
    return arguments 
} 

showArgs()     // {} 
showArgs``     // { '0': [ '' ] } 
showArgs`foo`    // { '0': [ 'foo' ] } 
showArgs`foo${'bar'}`  // { '0': [ 'foo', '' ], '1': 'bar' } 
showArgs`foo${'bar'}${1}` // { '0': [ 'foo', '', '' ], '1': 'bar', '2': 1 } 
showArgs(`foo${'bar'}${1}`) // { '0': 'foobar1`' } 

はここで何が起こっていますか？

引数は、彼らがのn + 1番目の引数を指定して N番目の配列項目をconcatinatingし、それらのすべてを結合して、それを構築することができるよう、明らかに、テンプレート文字列とは何かを持っているが、なぜですそれらの引数で先行するトークンを実行しているテンプレート文字列？

Answer 1

tagged template literalsを参照してください。

テンプレートリテラルのより高度な形態は、テンプレートリテラルをタグ付けされます。それらを使用すると、関数を使用してテンプレートリテラルの出力を変更できます。最初の引数には文字列リテラルの配列[...]が含まれています。第2引数と第1引数の後の各引数は、処理された（または調理されたとも呼ばれる）代入式[...]の値です。最後に、あなたの関数はあなたの操作された文字列を返します。

MDNから

---

例：

var a = 5; 
var b = 10; 

function tag(strings, ...values) { 
    console.log(strings[0]); // "Hello " 
    console.log(strings[1]); // " world " 
    console.log(strings[2]); // "" 
    console.log(values[0]); // 15 
    console.log(values[1]); // 50 

    return "Bazinga!"; 
} 

tag`Hello ${ a + b } world ${ a * b }`; 
// "Bazinga!"