質問: 申し訳ございません スマホからの投稿で改行とかがえらいことになってしまいました。 明日またpcの方から修正します。 ↓ 申し訳ございません。 あまりにも質問が雑すぎました。 修正加えました。 ``` function taggedStr( formats, ... args) { console.log( formats); //結果:["","、","さん!"] console.log( args); //結果:["こんにちは","山田"] return formats[ 0] + '[' + args[ 0] + ']' + formats[ 1] + '[' + args[ 1] +']' + formats[ 2]; } let greeting ='こんにちは', name ='山田'; // 1.テンプレート文字列を taggedStr関数で加工 console.log( taggedStr ` ${ greeting}、 ${ name}さん! `); //結果:[こんにちは]、[山田]さん!? ``` これは一体どういうことなのでしょうか。 まずバッククウォートで変数を含んだ文字列を囲むことで、一つの文字列にすることができると思うのですが(`${ greeting}、 ${ name}さん!`)、それを利用してそのまま関数を呼び出すと、 formatsには変数以外の文字が配列で、また...argsには変数が配列で入ってくるのでしょうか。 またこれは、formatsは...formatsではなくformats、そして...argsはargsではなく...argsである必要があるのでしょうか。
回答: この文法はタグ付きテンプレートリテラルと呼ばれるものでES2015で導入されたものらしいです。 「ES2015 language specification」でgoogle検索すると が見つかりますのでその中からtaggedと探すと > > 12.3.7 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. > > > 回答者によるなんちゃって翻訳: > > 12.3.7 タグ付きテンプレートはテンプレートリテラルから派生した引数への関数呼び出しだ。実引数にはテンプレートオブジェクトとテンプレートリテラルに埋め込まれた式を評価した結果を含む。 > > > 簡単な例は質問者さんが書いたとおりで、 > > 関数 テンプレートリテラル > > > のような文法です。例えば ``` 関数 `固定部1${式1}固定部2${式2}固定部3${式3}固定部4` ``` のように記述するとテンプレートリテラルの中の固定部分と埋め込まれた式を評価した結果が ['固定部1', '固定部2', '固定部3', '固定部4'] [式1の評価結果, 式2の評価結果, 式3の評価結果] という具合に分解され上記が関数へ引数として渡されて実行されます。 ただテンプレートリテラルの中の固定部分(文字列の配列)は第一引数に渡されるけれど、テンプレートリテラルに埋め込まれた各式の結果は第二引数へ配列として渡されるのではなく最初の式の評価結果が第二引数、次の式の評価結果が第三引数、・・・のように可変個の引数として渡される仕様のようです。 ``` f `A${1 + 1}B${2 + 2}C` => f(['A', 'B', 'C'], 2, 4) ``` のような関数呼び出しとして解釈されるということですね。 おっと書き忘れ・・・こういう引数を受け取る場合第一引数は formats のようにただ一つの仮引数で受け取りますが、第二引数以降は可変個数の引数なので ...args のように...を仮引数の前に書く必要があります。こうすると複数のカンマ区切りの引数が配列としてargsに入ってくれます。 ``` function f(formats, ...args) { ... } f(['A', 'B', 'C'], 2, 4) ==> formatsには['A', 'B', 'C']が渡され argsには[2, 4]が渡される ``` さらに追記 このあたりがもっと詳しい解説なので参考になると思います。raw stringsのメカニズムなんかの説明もあります。