JavaScript | テンプレートリテラルで文字列の中に変数や処理を記述する方法

2021-07-172023-02-06JavaScript 文字列,JavaScript

JavaScriptのES6から利用可能となっているバッククォートを使ったテンプレートリテラル（テンプレート文字列）で文字列の中に変数や処理を記述する方法を紹介しています。

テンプレートリテラルで文字列の中に変数や処理を記述する

テンプレートリテラルは文字列をエスケープ文字列なしでそのまま改行できたりと便利な記述方法です。

シングルクォートやダブルクォートで囲われた文字列より、バッククォートで囲って使えるテンプレートリテラルの方が文字列の中に変数や処理を簡単に記述する事も可能になっています。

変数

例えば、文字列中に変数を入れた場合、通常のリテラル記述では以下のような記述になります。

let text = '私は' + name + 'です。';

テンプレートリテラルでは、文字列をバッククォートで囲う事で以下の様に利用する事が可能です。

let text = `私は${name}です。`;

この${}を使った記述方法は変数に限らず結果が文字列または数値になるものであればJavaScriptの処理をそのまま記述する事もできます。

変数の代入

テンプレートリテラル内で変数に値を代入した場合の結果です。

let test = ``;
let text = `私は${test = '太郎'}です。`;

//私は太郎です。

変数の宣言・定義

constやletで変数を定義した場合はエラーとなりました。

let test = ``;
let text = `私は${let test = '太郎'}です。`;

// エラーになる

別要素の中身を取得

例えば、HTML要素の中身を取得してそのまま文字列として記述する事も可能です。

<p id="fruits">バナナ</p>

let text = `私は${document.querySelector(`#fruits`).textContent}です。`;

// 私はbananaです。

数式

数式を記述する事も可能。

let text = `私は${1+1+1}歳です。`;

// 私は3です。

配列の値

配列の値も記述可能です。

let array = ['猫','犬','熊'];
let text = `私は${array[2]}です。`;

// 私は熊です。

配列そのまま

配列をそのまま記述した場合、以下のようになりました。

連想配列の場合は{Object…}と表示されると思います。

let array = ['猫','犬','熊'];
let text = `私は${array}です。`;

// 私は猫,犬,熊です。