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

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

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

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

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

${変数名}

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

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

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

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

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

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

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

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

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

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

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を挿入する処理の際に便利です。

JavaScript 初心者にはコチラが分かりやすかったです▼