バッククオート（テンプレートリテラル）
変数に簡単に埋め込める
バッククオートを使用すると文字列の中に変数を埋め込む事が簡単になります。従来のJavaScriptであればシングルクオートやダブルクオート等の文字列を+演算子を使ってつなげる事で実現していたので見た目がシンプルになりました。
|
1 2 3 |
const age = 25; let msg = `私の年齢は${age}歳です。` console.log(msg); |
改行も簡単に行える。
改行も特別な記法を使わずとも単純にプログラム内で改行するだけで文章の改行を行う事が可能です。従来型のJavaScriptであれば/nを文章の中に仕込まなければならなかったので簡単に実装できるようになりました。(なお、バッククオートを使ったとしても、従来の/nによる改行も行うことは可能です。）
|
1 2 3 4 |
const age = 25; let msg = `私の年齢は${age}歳です。 あなたの年齢は何歳ですか？` console.log(msg); |
エクスプレッション
ちなみに、この${変数}という記法のことをエクスプレッションと呼びます。変数だけでなく関数等も埋め込む事が可能なので簡単な関数程度あれば直接埋め込んでしまう方が良いかもしれません。
タグ付きテンプレートリテラル
関数の引数を通常の丸括弧ではなく、バッククオートとする事で引数としてエクスプレッションを渡す事が可能です。用途としては文字列処理が従来のJavaScriptよりも柔軟になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function kansu(strings, ...nums) { console.log(strings); //[ '"太郎", ', ', ', ' ' ] ←エクスプレッション以外の文字列 console.log(nums); //[ 1, 2 ] ←エクスプレッションを配列とすることができる。 let msg = ""; strings.forEach((string, index) => { msg += string; if (index < nums.length) { msg += `<strong>${nums[index]}</strong>` } }) return msg; } console.log(kansu`"太郎", ${1}, ${2} `); //"太郎", <strong>1</strong>, <strong>2</strong> |
この記事へのコメントはありません。