JavaScriptのテンプレート文字列（テンプレートリテラル）とは？基本の使い方を解説
テンプレート文字列（テンプレートリテラル）とは
テンプレート文字列は、ES6（ECMAScript 2015）で導入された機能で、文字列の中に式を直接埋め込むことを可能にしました。従来のシングルクォート（''）やダブルクォート（""）の代わりに、バッククォート（``）を使用する点が特徴です。
テンプレート文字列を使うと、文字列の連結や補間（インターポレーション）がはるかに直感的に行えます。例えば ${a + b} のように記述することで、文字列の中に任意の式をそのまま埋め込めます。従来のように + 演算子で文字列をつなぎ合わせる方法と比べると、はるかに読みやすく美しい構文です。
JavaScriptにおけるテンプレート文字列のサンプルコード
以下は、2つの数値を足し合わせて結果を表示する簡単なデモです。
コード例
<!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>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、2つの数値を加算して結果を表示します</h3>
<script>
let resEle = document.querySelector(".result");
let a = 22;
let b = 44;
function add(a, b) {
return a + b;
}
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = `The sum of ${a} and ${b} = ${add(a, b)}`;
});
</script>
</body>
</html>
実行結果
「CLICK HERE」ボタンをクリックすると、次のように計算結果が表示されます。
ポイントまとめ
- テンプレート文字列はES6で導入され、バッククォート（
``）で囲んで記述する。 ${ }の中に変数や式を書くことで、文字列内に動的に値を埋め込める（式展開）。+演算子による文字列連結よりも可読性が高く、複雑な文字列もすっきりと書ける。- 改行を含む複数行の文字列も、エスケープシーケンスなしでそのまま記述できる。
-
JavaScriptでテンプレート文字列をネストする方法
JavaScriptのES6で導入されたテンプレート文字列（テンプレートリテラル）は、バッククォート（`）で囲むことで文字列の中に変数や式を埋め込める便利な機能です。実は、この${}（プレースホルダー）の中に、さらに別のテンプレート文字列を入れ子（ネスト）として記述することもできます。テンプレート文字列のネストとは${}の中には任意のJavaScript式を書けるため、その中で再度バッククォートを使ったテンプレート文字列を評価することが可能です。これにより、関数呼び出しの引数として動的に生成した文字列を渡すなど、柔軟な文字列組み立てが行えます。コード例以下は、ボタンをクリックすると、ネストされ
-
JavaScriptのタグ付きテンプレートリテラルとは？使い方を実例で解説
テンプレートリテラルには、タグ付きテンプレートリテラル（tagged template literal）と呼ばれる応用形があります。タグ付きリテラルは関数定義に似た仕組みで、テンプレートリテラルを自由に解析・加工できるのが大きな特徴です。 通常の関数呼び出しとは異なり、タグ付きリテラルでは括弧 () を使用しません。テンプレートリテラルの直前にタグ関数名を置くだけで呼び出しが行われ、タグ関数の第1引数には文字列リテラルの配列が渡されます。その後、テンプレート内の ${} で埋め込まれた式の評価結果が、残りの引数として順番に渡されていきます。 タグ関数に渡される引数の構成 第1引数：テンプレー