テンプレートリテラルを使って文字列を表す

テンプレートリテラルは文字列を表す方法のひとつで文字の並びをバッククォーテーション(`)で囲って記述します。テンプレートリテラルでは改行文字をそのまま改行として入力できるほかに文字列の中に式や変数の値を埋め込むことができます。ここでは JavaScript におけるテンプレートリテラルの使い方について解説します。

(Last modified: 2023年02月03日)

テンプレートリテラルを使った文字列の記述

JavaScript で文字列リテラルを記述するにはシングルクォーテーション(')またはダブルクォーテーション(")で全体を囲って記述します。

let nama = 'Suzuki Hanako';
let address = "愛知県名古屋市";

ECMAScript 2015 (ES 6) からバッククォーテーション(`)で全体を囲っても記述することができるようになりました。基本的な使い方はシングルクォーテーションで囲った場合と同じです。

let msg = `こんにちは。今日は天気がいいですね。`;
console.log(msg);
>> こんにちは。今日は天気がいいですね。

バッククォーテーションで文字列を記述したものをテンプレートリテラルと呼びます。

テンプレートリテラルと他の文字列との大きな違いは、改行文字がそのまま改行として扱われることです。シングルクォーテーションなどを使って文字列を記述した場合、改行を行うにはエスケープシーケンスの \n を記述する必要がありました。テンプレートリテラルでは、改行したい位置で Enter を入力するだけで済みます。

let msg = `こんにちは。
今日は天気がとてもいいですね。
散歩が気持ちいいです。`;

console.log(msg);
>> こんにちは。
>> 今日は天気がとてもいいですね。
>> 散歩が気持ちいいです。

このようにテンプレートリテラルを使うことで複数行にまたがる文字列を記述することができます。

なおテンプレートリテラルでもエスケープシーケンスは記述することができます。改行を表すのに \n を使用したり、文字列の中でバッククォーテーションを文字として使用したい場合には \` と記述します。

※ エスケープシーケンスについては「特殊な文字の入力(エスケープシーケンス)」を参照されてください。

文字列の中に式を埋め込む

テンプレートリテラルのもう一つの特徴が文字列の中に式を埋め込める点です。テンプレートリテラルでは文字列の中で次のように式を記述することができます。

${式}

式の部分に変数を記述した場合、変数に格納されている値が文字列に埋め込まれます。式の部分に演算などが記述された場合は式が評価されその結果が埋め込まれます。

次のサンプルをみてください。

let name = 'オレンジ';
let cost = 100;

let msg = `今日の${name}の値段は${Math.trunc(cost*1.1)}円です。`;
console.log(msg);
>> 今日のオレンジの値段は110円です。

今回のサンプルでは文字列の中に 2 つ式を埋め込んでいます。一つ目の ${name} の部分は変数 name の値で置き換えられます。二つ目の ${Math.trunc(cost*1.1)} の部分はまず cost*1.1 の演算を行ったあと Math.trunc メソッドを使って整数部分を取得し置き換えられます。

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

-- --

JavaScript における文字列リテラルの記述方法について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。