【JavaScript】テンプレートリテラル（テンプレート文字列）【基本】

  • 投稿日
  • 更新日
  • 著者 NKMR
  • カテゴリー JavaScript

テンプレートリテラル（テンプレート文字列）は、「 ` (バックティック shift + @)」で囲んだ部分のテキストを文字列データにする。

クォートで囲む通常の文字列にはない機能をいくつか持っている。

文字列の中に変数を埋め込める

変数を埋め込むには、「$ {変数名} 」というように、「${ 」と「 } 」で変数名を囲みます。

${変数名}

通常の文字列連結と比べてみましょう。

// 変数を定義する
let myName = 'たろう';

// 通常の文字列連結
let introduction = 'はじめまして' + myName + 'です';

// テンプレート文字列
let introduction = `はじめまして${myName}です`;

テンプレートリテラル（テンプレート文字列）は文字列を作る際、${〜}で囲まれた変数を読み取って、その内容を前後の文字列と連結して文字列を作ります。

通常の文字列連結よりクォートや演算子が省略できるのでスッキリとした見た目になります。

${〜}内で関数（ファンクション）を呼び出す

テンプレートリテラル（テンプレート文字列）には変数だけでなく、関数（ファンクション）も埋め込むことができます。

まだ関数をご存知ない方は過去記事をご参照ください。

【JavaScript】関数（ファンクション）【基本】
関数（ファンクション）とは、よく行う処理を１つにまとめた小さなサブプログラム（プログラム内の小さなプログラム）…
clicklyquickly.com

過去記事でご紹介した例文をテンプレートリテラルで書き換えてみます。

function total(price) {
const tax = 0.1;
return price + price * tax; 
}

// 通常の文字列連結
console.log('ジュースの値段は' + total(100) + '円です。');

// テンプレート文字列で連結
console.log(`ジュースの値段は${total(100)}円です。`);

${〜}内で計算する

${〜}の中で計算させることもできます。

次の例文では、定数totalPayに計算を含めた文字列を代入しています。

const totalPay = `やまだの支払い総額は${200 * 5}円です。`

文字列の途中で改行する

通常の文字列連結では文字列の途中で改行できませんが、テンプレートリテラル（テンプレート文字列）なら可能になります。

const textElement = `<div>
  <p>こんにちは、やまだたろうです</p>
</div>`;

文字列の途中で改行できるのは、HTMLを挿入する処理の際に便利です。

基本