19

私は、単純なロギング機能があります:私は(現在はChromeの開発ツールを使用して)括弧なしでそれを呼び出すと、このように、テンプレート文字列を渡す場合テンプレート文字列を使用するときに、関数をかっこなしで呼び出すことができるのはなぜですか?

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

を:

log`foo` 

出力は次のようになります。私は括弧でそれを呼び出した場合logged: ["foo", raw: Array[1]]

log(`foo`) 

出力は:logged: foo

なぜテンプレート文字列を使用して関数を呼び出すと、カッコがJavaScriptで機能しないのですか?結果がカッコで囲まれたものと異なる原因となるのは何ですか?

答えて

21

最初の例(log`foo`)では、言語仕様によってログ機能に渡される値を決定できます(12.3.7参照)。 2番目の例(log(`foo`))は、明示的に1つの引数を渡します。

テンプレートリテラルには、文字列と式を含めることができます。時には、文字列部分と式部分からの文字列の編集をより詳細に制御することができます。この場合、タグ付きテンプレートを探している可能性があります。

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(fooを呼び出すと、と呼び出すと、の文字列がになります。オブジェクトもパートも生の値もありません。

+1

これまでに聞いたことがなかったほど、リンクを追加する価値があります:https://developers.google.com/web/updates/2015/01/ES6-Template-Strings#tagged-templates – Mathletics

関連する問題