JavaScriptテンプレートリテラルの使い方｜変数埋め込み・複数行

テンプレートリテラルとは、文字列をバッククォート（`）で囲み、${ } の中に変数や式を書いて埋め込める JavaScript の文字列の書き方です。 "こんにちは、" + name + "さん" と書いていたものが `こんにちは、${name}さん` と1つの文字列で書け、改行もそのまま入れられます。ES2015（ES6）で導入され、現在のブラウザーと Node.js のすべてで使えます。

この記事では、+ 連結からの書き換え対応表と、${} に書ける式のコピペ集を、すべて実行結果つきで載せました。 さらに、複数行で書いたときにインデントの空白が混ざる再現例と対処、innerHTML に埋め込んだときにスクリプトが動く再現例とエスケープ関数、String.raw、タグ付きテンプレートまで扱います。実行結果は Node.js v22.22.2 と Chromium 141 で実際に動かして確かめたものです。

テンプレートリテラルの早見表

やりたいことから書き方を探せる表です。

（name = "佐藤"、price = 1200、qty = 3、score = 72、list = ["赤", "青", "緑"] のとき）

基本の書き方：バッククォートと ${}

3つのルール

テンプレートリテラルのルールは3つだけです。

1. 文字列をバッククォート（`）で囲む。日本語キーボードでは Shift + @ で入力できます。
2. 埋め込みたい変数や式を ${ } の中に書く。
3. 改行はそのまま書ける。

const name = "佐藤";
const age = 28;

console.log(`こんにちは、${name}さん`);   // こんにちは、佐藤さん
console.log(`${name}(${age}歳)`);        // 佐藤(28歳)
console.log(typeof `x`);                 // string
console.log(`a` === "a");                // true

テンプレートリテラルで作った値は、ふつうの文字列（string）です。"a" と `a` は同じ値で、length や toUpperCase() などのメソッドもそのまま使えます。

クォートの種類を間違えると埋め込まれない

${} が働くのはバッククォートの中だけです。 シングルクォートやダブルクォートの中では、ただの文字として出力されます。

const name = "佐藤";
console.log('${name}', "${name}", `${name}`);
// ${name} ${name} 佐藤

画面に ${name} がそのまま表示されたときは、囲んでいる記号がバッククォートになっているかを確かめてみてください。

+連結からの書き換え対応表

これまで + でつないでいた書き方を、テンプレートリテラルに置き換える対応表です。 どの行も、左右で同じ文字列になることを Node.js v22.22.2 で確かめました。

書き換えると計算の間違いにも気づきやすい

+ は「文字列の連結」と「数値の足し算」の両方に使われるため、かっこを忘れると意図しない結果になります。

const price = 1200;
console.log("合計: " + price + 100 + "円");     // 合計: 1200100円  （文字列として連結された）
console.log("合計: " + (price + 100) + "円");   // 合計: 1300円
console.log(`合計: ${price + 100}円`);          // 合計: 1300円

const a = 1, b = 2;
console.log("a+b=" + a + b);     // a+b=12
console.log(`a+b=${a + b}`);     // a+b=3

テンプレートリテラルでは ${ } の中が先に計算され、その結果が文字列に変換されて埋め込まれます。「どこまでが計算で、どこからが文字か」が見た目ではっきりするので、かっこの付け忘れが起きにくくなります。

${} に書ける式のコピペ集

${ } の中には、値を返す「式」なら何でも書けます。 変数、計算、関数呼び出し、三項演算子、メソッドのつなぎ書きなどです。次のデータを使った実行結果を載せます。

const name = "佐藤", price = 1200, qty = 3, n = 5, score = 72;
const list = ["赤", "青", "緑"];
const user = { name: "田中", address: { city: "東京" }, tags: ["a", "b"] };
const items = [{ name: "ペン", price: 120 }, { name: "ノート", price: 300 }];
const d = new Date(2026, 9, 3);

計算・数値の整形

`${1 + 2}`                                  // "3"
`${price * qty}円`                          // "3600円"
`${(price * 1.1).toFixed(0)}円`             // "1320円"
`${price.toLocaleString()}円`               // "1,200円"
`${(0.256 * 100).toFixed(1)}%`              // "25.6%"
`${String(7).padStart(3, "0")}`             // "007"
`${new Intl.NumberFormat("ja-JP").format(1234567)}`   // "1,234,567"

条件で出し分ける（三項演算子）

`${score >= 60 ? "合格" : "不合格"}`        // "合格"
`${n}件${n > 1 ? "以上" : ""}`              // "5件以上"
`${n > 9 ? "多い" : ""}`                    // ""
`${n > 3 && "多い"}`                        // "多い"
`${n > 9 && "多い"}`                        // "false"  （false が文字として出る）

${ } の中に if 文は書けないので、条件分岐には三項演算子（条件 ? A : B）を使います。 && で書くと、条件が成り立たないときに false という文字がそのまま出力されます。「何も出さない」場合は 条件 ? "..." : "" と書くと意図どおりになります。

オブジェクトのプロパティと、値がないときの代わり

`${user.address.city}`                      // "東京"
`${user.phone ?? "未登録"}`                 // "未登録"
`${user.company?.name ?? "なし"}`           // "なし"
`${JSON.stringify(user.tags)}`              // "[\"a\",\"b\"]"  → 表示は ["a","b"]
`${user}`                                   // "[object Object]"

オブジェクトをそのまま埋め込むと [object Object] になります。中身を見たいときは JSON.stringify(obj) を使います。存在しないプロパティは undefined という文字になるので、??（null合体演算子）で代わりの文字を指定しておくと表示が整います。

配列：join と map().join()

`${list.length}色`                          // "3色"
`${list.join("・")}`                        // "赤・青・緑"
`${list}`                                   // "赤,青,緑"
`${list.map(c => `[${c}]`).join("")}`       // "[赤][青][緑]"
`${items.map(i => `${i.name}:${i.price}円`).join(", ")}`   // "ペン:120円, ノート:300円"
`${items.reduce((s, i) => s + i.price, 0)}円`              // "420円"
`${[1, 2, 3].includes(2) ? "あり" : "なし"}`               // "あり"

配列をそのまま埋め込むとカンマ区切りになります。 map() で作った配列も同じで、.join("") を付け忘れると <li>…</li>,<li>…</li> のようにカンマが入ります。区切り文字を決めたいときは必ず join() を付けます。

関数呼び出し・メソッド・日付

`${"sato".toUpperCase()}`                   // "SATO"
`${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`   // "2026/10/3"
`${(() => { if (n > 3) return "大"; return "小"; })()}`   // "大"
`${typeof `${1}`}`                          // "string"

自作の関数も同じように呼べます。引数に初期値を付けた、あいさつ文を作る関数の例です。

const greet = (name = "ゲスト", hour = 9) =>
    `${hour < 12 ? "おはようございます" : "こんにちは"}、${name}さん`;

console.log(greet());             // おはようございます、ゲストさん
console.log(greet("田中", 15));   // こんにちは、田中さん

ネスト：テンプレートリテラルの中にテンプレートリテラル

${ } の中に、さらにバッククォートの文字列を書けます。 内側のバッククォートをエスケープする必要はありません。

const isAdmin = true, cnt = 3;
console.log(`${isAdmin ? `管理者(${cnt}件の通知)` : "一般"}`);
// 管理者(3件の通知)

const html = `<ul>
${items.map(i => `  <li>${i.name} - ${i.price}円</li>`).join("\n")}
</ul>`;
console.log(html);

<ul>
  <li>ペン - 120円</li>
  <li>ノート - 300円</li>
</ul>

ネストが2段を超えると読みにくくなるので、内側を変数や関数に切り出すと見通しがよくなります。

const row = (i) => `  <li>${i.name} - ${i.price}円</li>`;
const html2 = `<ul>\n${items.map(row).join("\n")}\n</ul>`;

値が文字列に変わるときのルール

${ } に入れた値は、文字列に変換されてから埋め込まれます。型ごとの結果を表にまとめます。

自作クラスに toString() を定義すると、埋め込んだときの表示を決められます。

class Money {
    constructor(v) { this.v = v; }
    toString() { return `${this.v.toLocaleString("ja-JP")}円`; }
}
console.log(`価格は${new Money(12800)}です`);   // 価格は12,800円です

toString() と valueOf() の両方を持つオブジェクトでは、テンプレートリテラルは toString() を使い、obj + "" は valueOf() を使いました（結果はそれぞれ "TS" と "42"）。+ 連結から書き換えるときに表示が変わることがある、数少ない場面です。

複数行の文字列とインデントの扱い

そのまま改行できる

バッククォートの中の改行は、そのまま改行文字（\n）として文字列に入ります。

const text = `a
b`;
console.log(JSON.stringify(text));   // "a\nb"
console.log(text.length);            // 3
console.log(text === "a\nb");        // true

再現：関数の中で書くとインデントの空白が混ざる

ソースコードの字下げ（インデント）も文字列の一部になります。 関数の中で見た目をそろえて書くと、行頭の空白や前後の改行がそのまま入ります。

function makeMail(name) {
    const text = `
        ${name} 様
        ご登録ありがとうございます。
    `;
    return text;
}
console.log(JSON.stringify(makeMail("佐藤")));

"\n        佐藤 様\n        ご登録ありがとうございます。\n    "

先頭に改行が1つ、各行の頭に空白が8個、末尾に改行と空白4個が入っています。HTMLとして表示する場合は連続した空白がまとめられるので目立ちませんが、メール本文、ログ、テキストファイル、<pre> や <textarea> の中身では、この空白がそのまま見えます。

対処4通り

// 方法1：配列を join でつなぐ
function makeMail2(name) {
    return [
        `${name} 様`,
        "ご登録ありがとうございます。",
    ].join("\n");
}
console.log(JSON.stringify(makeMail2("佐藤")));
// "佐藤 様\nご登録ありがとうございます。"

// 方法2：各行を trim する
function makeMail4(name) {
    return `
        ${name} 様
        ご登録ありがとうございます。
    `.split("\n").map(l => l.trim()).filter(Boolean).join("\n");
}
console.log(JSON.stringify(makeMail4("佐藤")));
// "佐藤 様\nご登録ありがとうございます。"

共通のインデントだけを取り除く dedent 関数は、後述のタグ付きテンプレートで書けます。各行の先頭の空白のうち、いちばん少ない数だけを全行から削ります。

function dedent(strings, ...values) {
    const raw = strings.reduce(
        (acc, s, i) => acc + s + (i < values.length ? String(values[i]) : ""), "");
    const lines = raw.replace(/^\n/, "").replace(/\n[ \t]*$/, "").split("\n");
    const indent = Math.min(
        ...lines.filter(l => l.trim()).map(l => l.match(/^[ \t]*/)[0].length));
    return lines.map(l => l.slice(indent)).join("\n");
}

function makeMail3(name) {
    return dedent`
        ${name} 様
        ご登録ありがとうございます。
          ・特典A
    `;
}
console.log(JSON.stringify(makeMail3("佐藤")));
// "佐藤 様\nご登録ありがとうございます。\n  ・特典A"

3行目の「・特典A」の前にある2個の空白は残り、共通の8個だけが取り除かれています。

行末に \（バックスラッシュ）を書くと、その改行は文字列に入りません。 長い文をソースコード上だけで折り返したいときに使えます。

const long = `この文は長いので\
途中で折り返しています`;
console.log(JSON.stringify(long));   // "この文は長いので途中で折り返しています"

前後の空白と改行だけを取り除きたい場合は trim() が手軽です。`\na\nb\n`.trim() は "a\nb" になります。

innerHTMLに埋め込むときのXSSとエスケープ関数

再現：入力値をそのまま埋め込むとスクリプトが動く

テンプレートリテラルはHTMLを組み立てるのに便利ですが、利用者が入力した値をそのまま innerHTML に入れると、値の中のHTMLタグがタグとして解釈されます。 この性質を使ってスクリプトを動かされる問題を、XSS（クロスサイトスクリプティング）と呼びます。

Chromium 141（Playwright 経由）で次のページを開いて確かめました。window.fired は、スクリプトが動いたかどうかを記録するための配列です。

<!doctype html><meta charset="utf-8">
<div id="a"></div><div id="b"></div><div id="c"></div>
<script>
window.fired = [];
const escapeHtml = (v) => String(v)
    .replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;").replaceAll("'", "&#39;");

// コメント欄に入力された値、という想定
const comment = `<img src=x onerror="window.fired.push('innerHTML')">こんにちは`;

// (a) そのまま埋め込む
document.getElementById("a").innerHTML = `<p>${comment}</p>`;
// (b) エスケープしてから埋め込む
document.getElementById("b").innerHTML = `<p>${escapeHtml(comment)}</p>`;
// (c) textContent で入れる
const p = document.createElement("p");
p.textContent = comment;
document.getElementById("c").append(p);
</script>

(a) では、入力値の <img> が本物の要素になり、画像の読み込みエラーをきっかけに onerror のコードが実行されました。(b) と (c) では < が < に置き換わり、ただの文字として表示されています。

なお、innerHTML で入れた <script> タグは実行されませんでした（同じ環境で確認）。<script> が動かないからといって安心はできず、onerror などのイベント属性でコードが動くという点がポイントです。

エスケープ関数（コピペ用）

HTMLで特別な意味を持つ5文字を、文字として表示するための書き方に置き換えます。

const escapeHtml = (v) => String(v)
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");

console.log(escapeHtml(`Tom & "Jerry" <b>'s</b>`));
// Tom &amp; &quot;Jerry&quot; &lt;b&gt;&#39;s&lt;/b&gt;

& を最初に置き換えるのがポイントです（あとから置き換えると、< の & まで二重に変換されます）。" と ' の置き換えは、属性値に埋め込むときに効きます。

const v = `" onmouseover="alert(1)`;
// そのまま：<input value="" onmouseover="alert(1)">  → 属性は value と onmouseover の2つ
// escapeHtml(v) を使う → 属性は value の1つだけ。値は「" onmouseover="alert(1)」という文字

Chromium で属性名を調べると、そのまま埋め込んだ場合は ["value", "onmouseover"]、エスケープした場合は ["value"] でした。

どの方法を選ぶか

href については、escapeHtml("javascript:alert(1)") を通しても文字が変わらず、リンクのプロトコルは javascript: のままでした。エスケープはタグや属性の区切りを守るもので、URLの中身の確認は別に行います。 XSS全体の対策は範囲が広いため、この記事ではテンプレートリテラルで起きやすい場面に絞っています。

URLのパラメータに値を入れるときは、HTMLのエスケープではなく encodeURIComponent を使います。

const q = "テンプレート リテラル&x=1";
console.log(`/search?q=${q}`);
// /search?q=テンプレート リテラル&x=1   （& 以降が別のパラメータとして扱われる）
console.log(`/search?q=${encodeURIComponent(q)}`);
// /search?q=%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%20%E3%83%AA%E3%83%86%E3%83%A9%E3%83%AB%26x%3D1

String.raw：バックスラッシュをそのまま残す

String.raw`...` と書くと、\n や \t が改行やタブに変換されず、書いたとおりの文字として残ります。 Windows のパスや正規表現のように \ を多く含む文字列で便利です。

console.log(JSON.stringify(`C:\new\table`));     // "C:\new\table"  ← \n と \t が改行とタブになった
console.log(`C:\new\table`.length);              // 10
console.log(String.raw`C:\new\table`);           // C:\new\table
console.log(String.raw`C:\new\table`.length);    // 12

1行目の JSON 表示の \n と \t は、改行文字とタブ文字が1文字ずつ入っていることを表しています。

正規表現を文字列から作るとき

new RegExp() に文字列を渡すとき、ふつうの文字列では \d の \ が消えます。String.raw なら書いたとおりに渡せます。

console.log(new RegExp("^\d{3}-\d{4}$").test("123-4567"));             // false
console.log(new RegExp(String.raw`^\d{3}-\d{4}$`).test("123-4567"));   // true
console.log(new RegExp("^\\d{3}-\\d{4}$").test("123-4567"));           // true（\ を2つ書く方法）

String.raw で知っておきたいこと

末尾を \ で終えたいときは、String.raw`C:\dir` + "\\" のように最後の1文字だけ別に足します。

タグ付きテンプレート：埋め込む値を関数で加工する

しくみ

バッククォートの直前に関数名を書くと、その関数が「文字の部分」と「埋め込む値」を別々に受け取ります。 これをタグ付きテンプレートと呼びます。String.raw もこの仕組みで作られた関数の1つです。

const name = "佐藤", age = 28;

function tag(strings, ...values) {
    console.log(strings, strings.raw, values);
    return "done";
}
console.log(tag`名前:${name} 年齢:${age}歳`);

[ '名前:', ' 年齢:', '歳' ] [ '名前:', ' 年齢:', '歳' ] [ '佐藤', 28 ]
done

値が文字列になる前に受け取れるのが特徴です。28 は数値のまま届くので、型に応じた加工ができます。また、関数の戻り値は文字列でなくても構いません。

例1：埋め込んだ値を強調する

function highlight(strings, ...values) {
    return strings.reduce(
        (acc, s, i) => acc + s + (i < values.length ? `【${values[i]}】` : ""), "");
}
console.log(highlight`名前:${name} 年齢:${age}歳`);
// 名前:【佐藤】 年齢:【28】歳

strings.reduce(...) で「文字 → 値 → 文字 → 値 → 文字」の順に組み立てるのが、タグ関数の基本の形です。

例2：自動でエスケープする safeHtml

埋め込む値だけを escapeHtml に通すタグ関数を作ると、通し忘れを防げます。 開発者が書いたHTMLの骨組み（strings）はそのまま、外から来た値（values）だけがエスケープされます。

const escapeHtml = (v) => String(v)
    .replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;").replaceAll("'", "&#39;");

function safeHtml(strings, ...values) {
    return strings.reduce(
        (acc, s, i) => acc + s + (i < values.length ? escapeHtml(values[i]) : ""), "");
}

const input = `<img src=x onerror="alert(1)">`;
console.log(`<p>${input}</p>`);
// <p><img src=x onerror="alert(1)"></p>
console.log(safeHtml`<p>${input}</p>`);
// <p>&lt;img src=x onerror=&quot;alert(1)&quot;&gt;</p>

例3：SQLのプレースホルダーに分ける

値を文字列に混ぜず、「SQL文」と「値の配列」に分けて返すタグ関数です。データベースのライブラリが提供するプレースホルダーの仕組みに、そのまま渡せる形になります。

function sql(strings, ...values) {
    return {
        text: strings.reduce((a, s, i) => a + s + (i < values.length ? `$${i + 1}` : ""), ""),
        values,
    };
}
console.log(sql`SELECT * FROM users WHERE id = ${42} AND name = ${"O'Brien"}`);

{
  text: 'SELECT * FROM users WHERE id = $1 AND name = $2',
  values: [ 42, "O'Brien" ]
}

' を含む値も、SQL文の中には入らず values 側に分かれています。

タグ付きテンプレートの細かな仕様

MDN のテンプレートリテラルのページで確認し、Node.js v22.22.2 でも同じ結果になった仕様です。

+連結とテンプレートリテラルの使い分け

どちらも同じ文字列を作れるので、読みやすいほうを選びます。

テンプレートリテラルは書いた時点で評価されるので、あとから値を差し込みたい文面は関数にしておきます。

const tpl = (o) => `こんにちは、${o.name}さん`;
console.log(tpl({ name: "鈴木" }));   // こんにちは、鈴木さん

つまずきやすい点の一覧

よくある質問

Q. テンプレートリテラルはどのブラウザーで使えますか？ A. MDN の互換性情報では「Baseline（広く利用可能）」とされ、2015年9月以降の主要ブラウザーで使えます。Node.js でもそのまま使えます（この記事は v22.22.2 で確認）。

Q. ${} の中に if 文や for 文は書けますか？ A. 書けません。${} に書けるのは値を返す「式」です。条件分岐は三項演算子、繰り返しは map().join("") を使います。処理が長くなるときは、関数に切り出して ${関数名(引数)} と呼ぶと読みやすくなります。

Q. + 連結とテンプレートリテラルで、できあがる文字列に違いはありますか？ A. 通常は同じ文字列になります（`x${a}` === "x" + a は true）。違いが出るのは、toString() と valueOf() の両方を定義したオブジェクトを埋め込むときなど、ごく一部です。

Q. バッククォートや ${ を文字として出したいときは？ A. \ を前に付けます。`\`code\`` は `code`、`\${name}` は ${name} という文字になります。

まとめ

• テンプレートリテラルはバッククォートで囲み、${ } に変数や式を書く。 ' や " の中では埋め込まれない。
• + 連結より区切りがはっきりし、"合計: " + price + 100 のような計算の取り違えに気づきやすい。
• ${ } には三項演算子・関数呼び出し・map().join("")・ネストが書ける。 if 文は書けない。
• 配列は join() を付け、条件は ? : で書く。 && だと false が文字として出る。
• 複数行ではソースのインデントも文字列に入る。 join("\n")・trim()・dedent で整える。
• 入力値を innerHTML に埋め込むときは escapeHtml を通すか textContent を使う。 タグ付きテンプレート safeHtml で通し忘れを減らせる。
• String.raw は \ をそのまま残す。 パスや正規表現の文字列に向いている。

株式会社RJCでは、JavaScriptのテンプレートリテラルや文字列の扱い方を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。