JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのテンプレート文字列を使ってフォーマット済み文字列を作成する方法

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,
    .sample {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
    .sample {
        color: red;
    }
</style>
</head>
<body>
<h1>テンプレート文字列によるフォーマット済み文字列（JavaScript）</h1>
<div class="sample">
`この人の名前は ${personObj.name} です。年齢と出席番号は
それぞれ ${personObj.age} 歳と ${personObj.rollno} 番です`
</div>
<div class="result"></div>
<br />
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、personObj の値を使って
整形されたテンプレート文字列が表示されます</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let personObj = { name: "Rohan Sharma", age: 12, rollno: 22 };
    let arr = [22, 55, 11, 19, 55];
    BtnEle.addEventListener("click", (event) => {
        resEle.innerHTML = `この人の名前は ${personObj.name} です。年齢と出席番号は
        それぞれ ${personObj.age} 歳と ${personObj.rollno} 番です`;
    });
</script>
</body>
</html>

実行結果

ページを開くと、最初は次のように表示されます。

JavaScriptのテンプレート文字列を使ってフォーマット済み文字列を作成する方法


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

JavaScriptのテンプレート文字列を使ってフォーマット済み文字列を作成する方法


このように、テンプレート文字列内の ${personObj.name} や ${personObj.age} の部分が、オブジェクトの実際の値に置き換えられて表示されます。ポイントは以下のとおりです。

  • 文字列は必ずバッククォート（`）で囲む
  • 変数や式は ${ } の中に記述する（計算式やメソッド呼び出しも可能）
  • 改行を含めた複数行の文字列も、エスケープシーケンスなしでそのまま記述できる
  1. JavaScriptでテンプレート文字列をネストする方法

    JavaScriptのES6で導入されたテンプレート文字列（テンプレートリテラル）は、バッククォート（`）で囲むことで文字列の中に変数や式を埋め込める便利な機能です。実は、この${}（プレースホルダー）の中に、さらに別のテンプレート文字列を入れ子（ネスト）として記述することもできます。テンプレート文字列のネストとは${}の中には任意のJavaScript式を書けるため、その中で再度バッククォートを使ったテンプレート文字列を評価することが可能です。これにより、関数呼び出しの引数として動的に生成した文字列を渡すなど、柔軟な文字列組み立てが行えます。コード例以下は、ボタンをクリックすると、ネストされ

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

    テンプレートリテラルには、タグ付きテンプレートリテラル（tagged template literal）と呼ばれる応用形があります。タグ付きリテラルは関数定義に似た仕組みで、テンプレートリテラルを自由に解析・加工できるのが大きな特徴です。 通常の関数呼び出しとは異なり、タグ付きリテラルでは括弧 () を使用しません。テンプレートリテラルの直前にタグ関数名を置くだけで呼び出しが行われ、タグ関数の第1引数には文字列リテラルの配列が渡されます。その後、テンプレート内の ${} で埋め込まれた式の評価結果が、残りの引数として順番に渡されていきます。 タグ関数に渡される引数の構成 第1引数：テンプレー