便利なテンプレートリテラル

テンプレートリテラルを使わない記述の場合

let name = 'チョコレート';

let price = 100;

let quantity = 5;

'チョコレートを5個買って500円だった'

'チョコレートを5個買って500円だった'

この文章を今までの知識で記述しようとすると、

name + 'を' + quantity + '個買って' + price * quantity +'円だった'

上記のようになります。しかしこれだと記号も多いし、入力ミスをしてしまう可能性もありますよね、、

そんな時に便利なのが、「テンプレートリテラル」という構文です。

改行文字をそのまま改行として入力できるほかに文字列の中に式や変数の値を埋め込むことができます。

テンプレートリテラルは文字列を表す方法のひとつで文字の並びをバッククォーテーション(`)で囲って記述します。

※日本語キーボードならShiftキー＋＠

 

let msg = `こんにちは。今日は天気がいいですね。`;

上記のようにメッセージを入れることが可能です。

またもう一つの特徴が文字列の中に式を埋め込めることができます。

`　`の中に下記の式を入れて記述します。

${ 式 }

 

実際に先ほどのチョコレートの文章をテンプレートリテラルを使って書き直します。

`${name}を${quantity}個買って${price * quantity}円だった`

name + 'を' + quantity + '個買って' + price * quantity + '円だった'

下のテンプレートリテラルを使わない文章より見やすくなり、記述もラクになりますよね。

`${name.slice(0,3)}を${quantity}個買って${price * quantity}円だった`

'チョコを5個買って500円だった'

また上記のようにメソッドも入れることが可能です。

 

他の文字列の場合でも文字列の連結を使うことで文字列と変数の値を結合して文字列を作成することができましたが、テンプレートリテラルを使えばより直感的に文字列の中に変数や式を埋め混むことができます。

 

これから頻繁に使っていくことになると思うので、ぜひ覚えておきましょう。