タグ付きテンプレートリテラルについて学びました。今のところ実際にどんな場面で使用するのか理解できていません。理解できた部分だけ記述しています。
意味
とりあえずMDNから引用します。
タグ付きテンプレートは、テンプレートリテラルのより高度な形式です。
タグを使用すると、テンプレートリテラルを関数で解析できます。タグ関数の最初の引数には、文字列リテラルの配列を含みます。残りの引数は式に関連付けられます。
タグ関数は、これらの引数に対して何でも望み通りの操作を実行することができ、加工された文字列を返します。（または、以下の例の一つで示しているように、まったく異なるものを返すこともできます。）
タグに使用される関数の名前は、自由に指定できます。
MDN |タグ付きテンプレートリテラル
理解できたことをまとめてみました↓
- 丸括弧を使う以外に、テンプレートリテラルを使って関数を実行できる。
- テンプレートリテラルを使って関数を実行する場合、タグ関数と呼ばれる。
- 第一引数には、テンプレートリテラル内の文字列が配列形式で渡される。
- 第二、第三引数..にはテンプレートリテラル内のプレースホルダーが渡される。
※この記事内では、テンプレートリテラルを使って実行する関数をタグ関数と表記していきます。
以下より詳しく見ていきます。
タグ関数を実行
通常、関数を実行するときはfn()のように関数名に続けて丸括弧を記述します。
また、fn``のように関数名に続けてバッククウォートを記述して実行できます。
function greeting() {
console.log("hello")
}
greeting();// hello
greeting``;// hello タグ関数と呼ばれるタグ関数に渡される引数
タグ関数と通常の関数の違いは引数が存在する場合に異なります。
以下のコードを見てください↓
function greeting(name) {
console.log(`${name}さん、こんにちは`)
}
let name = "yuito";
greeting(name);//yuitoさん、こんにちは
greeting`${name}`;// ,さん、こんにちはタグ関数では、「yuito」の文字列が空になっていることが分かります。
冒頭のMDNの説明にあったとおり、タグ関数の第一引数には、テンプレートリテラル内の文字列の配列が渡されます。${name}のようなプレースホルダーは、第二、第三引数に渡されます。
上記のコードでは、文字列が何も記述されていないため、空になったわけです。
よって以下のように書きます↓
function greeting(name) {
console.log(`${name}さん、こんにちは`)
}
greeting`yuito`;//yuitoさん、こんにちは第一引数の配列（文字列型）の分け方
文字列がどこで区切られ、各インデックスに渡されるのか確認します。
結論を書くと、プレースホルダーがあるとそこで区切られます↓
function greeting(strings,name) {
const [type,san] = strings;//["こんにちは","さん"]
console.log(`${type}${name}${san}`) // こんにちはyuitoさん
}
const name = "yuito";
greeting`こんにちは${name}さん`;${name}の前後で文字列が区切られ、0番目に”こんにちは”、1番目に”さん”が渡されています。
第二引数以降について
プレースホルダーが出てきた順に、第二、第三引数と渡されます↓
function greeting(strings,...parameter) {
console.log(parameter);//["yuito","適当"]
const [type,san] = strings;
const name = parameter[0];
console.log(`${type}${name}${san}`)
}
const name = "yuito";
const tekitou = "適当"
greeting`こんにちは${name}さん${tekitou}`;余談ですが、関数の引数にスプレッド構文を使用すると、オブジェクトの中身を展開するのではなく、引数をオブジェクトにまとめる働きがあることを初めて知りました。
残余引数構文と呼ばれるらしいでです。↓
実際の利用場面
ググったり、Twitterで検索してみると利用場面が見つかりました。Styled ComponentやSQLインジェクション対策などに使用されているみたいです。理解はできていないので、記事を見て勉強します。
