テンプレート文字列を目にする機会が増えたので理解して使えるようになりたいとおもいます。
テンプレート文字列とは
テンプレート文字列はテンプレートリテラルとも呼ばれ、テンプレート文字列で書くとプレースホルダーを記述することができ、文字列の中で、+を用いた結合を使わずに変数や定数を表示させることができます。
構文
const str = `テンプレート文字列`;
文字列を通常はシングルクォーテーション又はダブルクォーテーションで囲うのに対し、テンプレート文字列はバッククォート( backquote )を「`」使います。
※ だいたいはキーボードの 「@ + shift」 でバッククォートを表示できます。
プレースホルダーを使う時
const name = “鈴木さん”;
const str = `${name}、こんにちは！`;
console.log(str); // 鈴木さん、こんにちは！
プレースホルダーはドル記号「 $ 」と波括弧「 { } 」で記述します。波括弧の中に関数や変数名などを書くことで値を表示することができます。
通常の文字列結合の場合クォーテーションを書き忘れたり、読みづらかったりしていたのがテンプレート文字列を使うことで解消でき便利です。
その他テンプレート文字列を使ったサンプルコード
その他テンプレート文字列でできることを見ていきます。
関数の呼び出し
const func =(num1, num2) => {
let total =num1+num2;
return total;
}
console.log(`1+1=${func(1, 1)}`); // 1+1=2
変数だけでなく関数を呼び出し、結果を表示することも可能です。
計算式
console.log(`1+1=${1+1}`); // 1+1=2
プレースホルダー内では計算をすることも可能です。
改行
const bstr = `文字を
改行させます。`;
console.log(bstr);
改行コード（「\n」など）をいれることなく文字を改行できます。改行コードなどエスケープシーケンスをいれることもできます。
おわり
なんとなくvue を少し勉強した時に使ったので、vue の機能かと混同していた部分もあり、きちんと勉強しないとダメだなと身が引き締まりました。
今後は文字列を書く際はモダンなテンプレートリテラルを使っていきたいと思います。
