JavaScriptでテンプレート文字列をネストする方法

JavaScriptのES6で導入されたテンプレート文字列（テンプレートリテラル）は、バッククォート（`）で囲むことで文字列の中に変数や式を埋め込める便利な機能です。実は、この${}（プレースホルダー）の中に、さらに別のテンプレート文字列を入れ子（ネスト）として記述することもできます。

テンプレート文字列のネストとは

${}の中には任意のJavaScript式を書けるため、その中で再度バッククォートを使ったテンプレート文字列を評価することが可能です。これにより、関数呼び出しの引数として動的に生成した文字列を渡すなど、柔軟な文字列組み立てが行えます。

コード例

以下は、ボタンをクリックすると、ネストされたテンプレート文字列を使って氏名（フルネーム）を表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptでのテンプレート文字列のネスト</h1>
<div class="result"></div>
<br />
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、ネストされたテンプレート文字列でフルネームが表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function fullName(fName, lName) {
        return fName + " " + lName;
    }
    let firstName = "Rohan";
    let lastName = "Sharma";
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = `FirstName = ${firstName} and lastname = ${lastName} and
        fullname = ${fullName(
            `${firstName}`,
            `${lastName}`
        )}`;
    });
</script>
</body>
</html>

コードの解説

ポイントは以下の部分です。外側のテンプレート文字列の中にある${fullName(...)}の引数として、さらに`${firstName}`と`${lastName}`というテンプレート文字列をネストして渡しています。

resEle.innerHTML = `FirstName = ${firstName} and lastname = ${lastName} and fullname = ${fullName(`${firstName}`, `${lastName}`)}`;

このように書くことで、名前と姓をそれぞれ個別のテンプレート文字列として生成し、それをfullName()関数に渡して結合した結果を、外側の文字列に埋め込んでいます。

実行結果

ページを開いた時点では、見出しと「ここをクリック」ボタンのみが表示されています。

「ここをクリック」ボタンを押すと −

画面に次のような結果が表示されます。

FirstName = Rohan and lastname = Sharma and fullname = Rohan Sharma

このように、テンプレート文字列をネストすることで、複雑な文字列の組み立てでも可読性を保ちながら簡潔に記述できます。従来の文字列連結（+演算子）では冗長になりがちな処理も、ネストされたテンプレートリテラルを使えばスッキリと表現できるのが大きなメリットです。

JavaScriptで動的インポート（dynamic import）をawaitする方法

JavaScriptのタグ付きテンプレートリテラルとは？使い方を実例で解説

JavaScriptのテンプレート文字列を使ってフォーマット済み文字列を作成する方法
JavaScriptでは、テンプレート文字列（テンプレートリテラル）を使用することで、変数や式を埋め込んだフォーマット済み文字列を簡単かつ直感的に作成できます。通常のシングルクォートやダブルクォートの代わりに、バッククォート（`）で文字列を囲み、${ } の中に変数名や式を記述するだけで、その評価結果が自動的に文字列へ挿入されます。従来の文字列連結（+ 演算子）と比べると、コードが読みやすくなり、複雑な文字列の組み立てもミスなく行えるのが大きなメリットです。以下は、テンプレート文字列を使ってオブジェクトの値を埋め込んだフォーマット済み文字列を作成するコード例です。サンプルコード<!DOC
JavaScriptのタグ付きテンプレートリテラルとは？使い方を実例で解説
テンプレートリテラルには、タグ付きテンプレートリテラル（tagged template literal）と呼ばれる応用形があります。タグ付きリテラルは関数定義に似た仕組みで、テンプレートリテラルを自由に解析・加工できるのが大きな特徴です。通常の関数呼び出しとは異なり、タグ付きリテラルでは括弧 () を使用しません。テンプレートリテラルの直前にタグ関数名を置くだけで呼び出しが行われ、タグ関数の第1引数には文字列リテラルの配列が渡されます。その後、テンプレート内の ${} で埋め込まれた式の評価結果が、残りの引数として順番に渡されていきます。タグ関数に渡される引数の構成第1引数：テンプレー