JavaScriptの文字列補間（String Interpolation）入門：初心者向けガイド

JavaScriptの文字列補間（string interpolation）とは、文字列の中に式を埋め込む処理のことです。式の埋め込みには「テンプレートリテラル」を使用します。補間を使えば、変数や計算結果などの値を文字列の中に簡単に組み込むことができます。

JavaScriptの文字列の中に値を追加したいと思ったことはありませんか？そのようなときに役立つのが、テンプレートリテラルという構文です。テンプレートリテラルを使うと、複数行にまたがる文字列の扱いが容易になり、文字列内への値の埋め込みもシンプルに行えます。テンプレートリテラルこそが、JavaScriptにおける文字列補間の構文なのです。

この記事では、JavaScriptの文字列補間について解説します。文字列補間とは何か、どのように動作するのかを説明し、実際のコード例を通して基本的な使い方を学んでいきましょう。

それでは早速、始めていきます！

JavaScriptの文字列補間とは

JavaScriptでは、テンプレートリテラルを使って文字列の中に値を追加できます。構文は「ドル記号（$）」の後に「波括弧（{}）」を続けた形です。波括弧の中には、文字列に埋め込みたい式を記述します。

テンプレートリテラルを使えば、文字列連結に頼らずに値を埋め込むことが可能です。テンプレートリテラルを宣言する際は、文字列をクォーテーションマークではなくバッククォート（`）で囲む必要がある点に注意してください。

次の構文を見てみましょう。

`これは文字列です。9 + 10 の計算結果は ${9 + 10} です。`

ここではテンプレートリテラルを宣言しています。埋め込まれている式は以下の部分です。

${9 + 10}

この式は「9 + 10」を評価し、その結果が文字列の末尾（ピリオドの直前）に挿入されます。式をピリオドの前に記述しているためです。

JavaScriptの文字列補間の実例

テンプレートリテラルを使うと、値を直接文字列に埋め込めます。次のコードを見てください。

const address_number = "10 Downing Street";
const prime_minister_address = `首相の住所は${address_number}です。`;
console.log(prime_minister_address);

1行目のコードで住所（番地）を定義しています。次に、テンプレートリテラルを使って完全な住所の文字列を作成します。「${}」という構文によって、変数「address_number」の値が文字列に埋め込まれます。

このコードを実行すると、コンソールには次のように出力されます。

首相の住所は10 Downing Streetです。

このように、2つの文字列が1つに結合されました。

テンプレートリテラルの中には、あらゆる種類の値を埋め込めます。文字列でも数値でも、JavaScriptの計算結果でも問題ありません。また、テンプレートリテラルの中にさらに別のテンプレートリテラルを埋め込む必要もありません。

文字列補間の大きなメリットの一つは、その構文の明快さにあります。JavaScriptのコードを文字列の中に直接記述できるため、コードの意図が読み取りやすくなります。

連結（Concatenation）で文字列を結合する方法

参考までに、従来の「連結（concatenation）」による文字列結合の方法も見てみましょう。次のような2つの文字列があるとします。

const full_address = `首相の住所は`;
const address_number = `10 Downing Street`;

2つの文字列は、プラス記号（+）を使って連結できます。

const prime_minister_address = full_address + address_number + "。";
console.log(prime_minister_address);

コンソールには次の値が出力されます。

首相の住所は10 Downing Street。

これで、2つの文字列を組み合わせた新しい文字列を作成できました。最後に連結演算子を使って、文末に句点（。）を追加しています。

しかし、この構文には欠点があります。連結では値を文字列の末尾にしか追加できないのです。これこそが、テンプレートリテラル構文が導入された大きな理由の一つです。テンプレートリテラルなら、文字列の途中にも簡単に値を挿入できるようになりました。

文字列補間で計算結果を埋め込む

テンプレートリテラルの中に記述したコードは、JavaScriptのステートメントとして扱われます。つまり、テンプレートリテラル内で計算を実行し、その結果を文字列に埋め込むこともできるのです。

カフェで2杯のドリンクを注文した際の合計金額を計算し、その結果を文字列に含める例を作成してみましょう。

var drink1 = 2.30;
var drink2 = 2.20;

var bill = `お飲み物の合計金額は$${drink1 + drink2}です。`;

「${}」の中に計算式を記述しています。この計算では、2つのJavaScript変数「drink1（2.30）」と「drink2（2.20）」の値を足し合わせています。コードを実行すると、合計額を含んだ次の文字列が返されます。

お飲み物の合計金額は$4.50です。

文字列補間で三項演算子を使う

JavaScriptの三項演算子（ternary operator）を使うと、ある条件が真（True）か偽（False）かを評価できます。三項演算子はif文をより簡潔に書くための方法で、if文の結果が1行程度のコードで済む場合に特に便利です。

例として、顧客のコーヒー代が4.00ドルを超えた場合は請求書を提示した上で、コーヒー店のポイントカードクラブへの参加を促すメッセージを表示し、4.00ドル以下の場合は請求書だけを表示するという処理を考えてみましょう。三項演算子を使えば、この条件分岐を簡潔に実装できます。

var drink1 = 2.30;
var drink2 = 2.20;
var total = drink1 + drink2;

var bill = `お飲み物の合計金額は$${total}です。 ${total > 4.00 ? "当店のコーヒークラブに参加しませんか？10杯ごとに1杯無料になります。" : ""}`;
console.log(bill);

このテンプレートリテラルには、2つの埋め込み式が含まれています。1つ目は変数「total」の値を文字列に埋め込む式、2つ目は三項演算子を使って顧客にポイントカードクラブへの参加を促すべきかどうかを判定する式です。

合計購入金額が4.00ドルを超えている場合、コンソールには次のメッセージが出力されます。

お飲み物の合計金額は$4.50です。 当店のコーヒークラブに参加しませんか？10杯ごとに1杯無料になります。

一方、条件が偽（False）と評価された場合は、コロン（:）の後ろにある値が返されます。この例ではコロンの後に空文字列（""）を指定しているため、購入金額が4.00ドル未満の顧客には、テンプレートリテラルの最初の文だけが表示される仕組みです。

まとめ

テンプレートリテラルを使うと、文字列の中に値を埋め込むことができます。テンプレートリテラル内では計算も実行可能です。テンプレートリテラルはバッククォート（`）で宣言し、評価したい式は「ドル記号（$）+ 波括弧（{}）」で囲んで記述します。

文字列補間をマスターすれば、動的なメッセージ生成やデータの整形など、日常的なJavaScript開発の幅が大きく広がります。まずは自分のコードで${}構文を試してみてください。