今回は、テンプレートリテラル(テンプレート文字列)についてご紹介していきます。

テンプレートリテラルとは

2015年にリリースされたES6にて、追加された機能になります。
文字列を表す方法のひとつで文字の並びをバッククォーテーションを使って記述していきます。

文字連結との違いと例

変数・定数を文字と連結させたい場合には、下記のような記述になります。

const day = 10;
console.log('今日は、' + day + '日です。');

出力結果

今日は、10日です。

文字列となる部分は、'' または ""の中に書き、+ で繋ぎます。
変数・定数は、そのまま名前を記述することで動作します。

一方、テンプレートリテラルでは下記のようにすることができます。

const day = 10;
console.log(`今日は、${day}日です。`);

出力結果

今日は、10日です。

文字連結と同じ結果が出力されました。

ポイント

• バッククォーテーション(``)を使う
• 変数、定数が入る場所は、${}の形にし{}内に変数名を書く

テンプレートリテラルを使うメリット

• 直感的に文字列の中に変数を入れることができ、わかりやすい
• 改行を含むことができるので見通しの良い記述にすることができる

まとめ

テンプレートリテラルを使うことによって、スッキリとして見やすいコードにすることができます。
規模が大きくなればなるほど煩雑な記述だと改修が大変になります。
そういった観点からも積極的に取り入れて見やすい記述にすることを心がけていけると良いと思います。