JavaScriptで文字列補間を行う方法｜テンプレートリテラルの基本と実例

JavaScriptでは、ES6（ECMAScript 2015）以降、文字列補間がネイティブでサポートされるようになりました。これを実現するのがテンプレートリテラルです。

テンプレートリテラルとは、式を埋め込むことができる文字列リテラルのことです。通常のシングルクォート（'）やダブルクォート（")の代わりに、バッククォート（`）で文字列を囲むのが特徴です。

例えば、次のように記述します。

var greeting = `Hello World!`;

${ } 構文によるプレースホルダー

テンプレートリテラルでは、${ } という構文を使ってプレースホルダーを埋め込むことで、文字列の中に変数や式の値を差し込むことができます。以下に具体的な使用例を紹介します。

例1：変数の埋め込み

var name = "Brendan";
console.log(`Hello, ${name}!`);

出力結果

Hello, Brendan!

例2：式の評価

${ } の中には、単純な変数だけでなく計算式なども書けます。

var a = 10;
var b = 10;
console.log(`${a} と ${b} の合計は ${a+b} です`);

出力結果

10 と 10 の合計は 20 です

例3：関数呼び出しの埋め込み

関数の戻り値も同様に埋め込むことができます。

function fn() { return "Hello World"; }
console.log(`Message: ${fn()} !!`);

出力結果

Message: Hello World !!

複数行の文字列を扱う

テンプレートリテラルのもうひとつの利点は、改行を含む複数行の文字列をそのまま記述できる点です。従来は \n を使って改行を表現する必要がありましたが、テンプレートリテラルなら改行コードを意識せずに直感的に書けます。

例：複数行文字列

var multiLine = `This is
a string
with multiple
lines`;
console.log(multiLine);

出力結果

This is
a string
with multiple
lines

まとめ

JavaScriptにおける文字列補間には、ES6で導入されたテンプレートリテラルを使うのが最も簡単で推奨される方法です。${ } を使えば変数・式・関数の結果を柔軟に埋め込めるほか、複数行文字列もスッキリと記述できます。文字列連結のための + 演算子や concat() を多用していたコードも、テンプレートリテラルに置き換えることで可読性が大きく向上します。