文字列に変数を埋め込む |テンプレート文字列(テンプレートリテラル)の書き方

※TypeScriptだけでなくJavaScriptでも同じ動きをします。

テンプレート文字列(テンプレートリテラル)

テンプレート文字列(テンプレートリテラル)とは文字列の中に変数を埋め込むことができる記述方法です。

では、どうのように記述するか次の例をご覧ください。

let firstName = '山田';
console.log('名前は' + firstName); //名前は山田

このように文字列と変数を繋ぐためには+(プラス)を使い繋がないといけません。文字列と変数の数が多くなると+(プラス)の数が増加し可読性が悪くなります。そこでテンプレート文字列の出番です。

上記をテンプレート文字列で記載すると以下のようになります。

let firstName = '山田';
console.log(`名前は${firstName}`); //名前は山田

若干ではありますが短くなりました。

では、実際にどのように記載していくのか、「console.log(‘名前は’ + firstName);」をもとにテンプレート文字列に書き換える方法を説明します。

最終的には「console.log(`名前は${firstName}`)」となれば書き換え完了です。

改行するには Enterキーを押せば改行できます。

「${ }」を初めて見た時は？？でしたがテンプレート文字列を知った時は少し感動しました。うまく使いこなしコードの可読性をあげて行きたいです。