テンプレート文字列 Template Strings

Question

申し訳ございません
スマホからの投稿で改行とかがえらいことになってしまいました。
明日また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である必要があるのでしょうか。

Comments

[think49]

バッククォートはどこにありますか。

[y_waiwai]

なにを指してどういうことかと言ってるんでしょうか。
問題が見えません

[退会済みユーザー]

大変申し訳ございません。
質問修正いたしました。

Answer 1

この文法はタグ付きテンプレートリテラルと呼ばれるものでES2015で導入されたものらしいです。

「ES2015 language specification」でgoogle検索すると

http://www.ecma-international.org/ecma-262/6.0/

が見つかりますのでその中から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]が渡される

さらに追記
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings
このあたりがもっと詳しい解説なので参考になると思います。raw stringsのメカニズムなんかの説明もあります。

Comments

[退会済みユーザー]

とても丁寧な回答ありがとうございます。
あと。
...
の意味を完全に忘れてました、これは、配列が直接渡された場合でなくて、複数の引数が渡された時にそれを、一つの配列にして受け取るものでしたね。
ありがとうございました。

[KSwordOfHaste]

> 複数の引数が渡された時にそれを、一つの配列にして受け取るもの
そうですね。アプリケーションの関数としてあまり使わない文法のような気がしますがライブラリー的なものを書く際には使う機会もある気がします。argumentsがあるのでなくても困りはしませんが...の方が記述が自然に感じます。