バッククオート（テンプレートリテラル）
変数に簡単に埋め込める
バッククオートを使用すると文字列の中に変数を埋め込む事が簡単になります。従来の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> |
「デフォルト値」の定義方法
||演算子を使う。
前の値がfalseになった場合は自動的に後ろの値が使われます。
|
1 |
const aaa = "" || "デフォルト値"; |
ただ、この方法だと空文字を代入することができなくなります。
Null合体演算子(Nullish Coalecing)を使う。
null or undefinedだったら右の値を取ります。
|
1 |
const aa = "" ?? "デフォルト値"; |
これなら空文字も初期値として使うことができます。
注意点
&&演算子と||演算子と一緒に使おうとするとエラーになります。（ただ、どちらかを丸括弧で囲えばエラーは回避できます。）
この記事へのコメントはありません。