---
type: reference
language: javascript
slug: string/template
title: "テンプレートリテラル — 値を埋める・改行する・加工する"
title_tag: "JavaScript のテンプレートリテラル — 埋め込みとタグ付きの使い方"
summary: >
  バッククォートで囲むと値を埋め込め、改行もそのまま書けます。何を入れても文字列になること、
  オブジェクトが [object Object] になること、タグ付きテンプレートの仕組みまで実行して確かめます。
description: >
  テンプレートリテラルに何を入れても文字列になります。オブジェクトが [object Object] になる理由、
  入れ子や条件の書き方、タグ付きテンプレートで安全に組み立てる形まで実行して確かめられます。
status: published
difficulty: 2
minutes: 8

versions:
  verified: "Node 22.22.3"
  since: "ES2015"
  deprecated: null
  removed: null

sources:
  - title: "Template Literals — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-template-literals"
  - title: "String.raw — ECMAScript® 2026 Language Specification"
    url: "https://tc39.es/ecma262/#sec-string.raw"
  - title: "テンプレートリテラル — MDN"
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals"

terms: [文字列化, 補間, タグ付きテンプレート]

links:
  related:
    - javascript/learn/string/basics
    - javascript/reference/string/replace
    - javascript/reference/json/parse

content_updated_at: 2026-09-08
published_at: 2026-09-08
---

バッククォートで囲むと、**`${}` の中に式を書けます。**

```js run
const name = '猫';
const count = 3;

console.log(`${name}が${count}匹`);
console.log(`1 + 1 = ${1 + 1}`);
console.log(`1行目
2行目`);
```
```output
猫が3匹
1 + 1 = 2
1行目
2行目
```

- **式**が書けます。変数だけでなく計算も関数呼び出しも入ります
- **改行をそのまま書けます。** `\n` を書く必要はありません

## 何を入れても文字列になる

```js run
for (const value of [null, undefined, [1, 2], { a: 1 }, true]) {
  console.log(`値: ${value}`);
}
```
```output
値: null
値: undefined
値: 1,2
値: [object Object]
値: true
```

**`null` も `undefined` もそのまま文字になります。**
「無いから空にしたい」なら、自分で書いてください。

```js run
const missing = null;

console.log(`値: ${missing ?? '（未設定）'}`);
```
```output
値: （未設定）
```

→ [?. と ??](/ja/javascript/reference/operator/optional-chaining/)

### オブジェクトは `[object Object]` になる

```js bad
const user = { name: 'あ' };

console.log(`ユーザー: ${user}`);
```
```output
ユーザー: [object Object]
```

**ログに出したつもりで、中身が消えます。**
見たいなら `JSON.stringify()` を挟んでください。

```js run
const user = { name: 'あ' };

console.log(`ユーザー: ${JSON.stringify(user)}`);
```
```output
ユーザー: {"name":"あ"}
```

配列はカンマで繋がりますが、これも `join()` が呼ばれているだけです。
→ [join() — 配列を1本の文字列にする](/ja/javascript/reference/array/join/)

## 入れ子と条件

`${}` の中に、もう1つテンプレートリテラルを書けます。

```js run
const items = ['a', 'b'];

console.log(`<ul>${items.map((item) => `<li>${item}</li>`).join('')}</ul>`);
```
```output
<ul><li>a</li><li>b</li></ul>
```

条件は三項演算子で書きます。

```js run
const count = 0;

console.log(`件数: ${count > 0 ? `${count}件` : 'なし'}`);
```
```output
件数: なし
```

[bad:`if` 文は書けません。] 式だけです。
入れ子が2段を超えたら、**先に変数へ出してください。** 読めなくなります。

## `+` と比べて

```js run
const name = 'あ';
const age = 20;

console.log('名前: ' + name + ' / 年齢: ' + age + '歳');
console.log(`名前: ${name} / 年齢: ${age}歳`);
```
```output
名前: あ / 年齢: 20歳
名前: あ / 年齢: 20歳
```

結果は同じです。ですが `+` は、**数と混ざったときに足し算になります。**

```js bad
const price = 100;

console.log('合計: ' + price + 50 + '円');
console.log(`合計: ${price + 50}円`);
```
```output
合計: 10050円
合計: 150円
```

[key:混ぜるならテンプレートリテラル]です。
→ [文字列の基本 — 作る・つなぐ・数える](/ja/javascript/learn/string/basics/)

## タグ付きテンプレート

関数名をバッククォートの直前に書くと、**分解された状態で受け取れます。**

```js run
function tag(strings, ...values) {
  console.log(strings);
  console.log(values);
  return strings.raw.join('|');
}

const x = 1;

console.log(tag`a${x}b${x + 1}c`);
```
```output
[ 'a', 'b', 'c' ]
[ 1, 2 ]
a|b|c
```

- 第1引数 … `${}` で**切られた文字の並び**
- 第2引数以降 … **埋め込まれた値**

必ず「文字・値・文字・値・文字」の順で、
[key:文字のほうが1つ多くなります]。

これを使うと、**埋め込む値だけをまとめて加工できます。**

```js run
function escapeHtml(strings, ...values) {
  return strings.reduce((out, part, i) => {
    if (i === 0) return part;
    const escaped = String(values[i - 1]).replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return out + escaped + part;
  }, '');
}

const input = '<script>';

console.log(escapeHtml`入力: ${input}`);
```
```output
入力: &lt;script&gt;
```

[dim:これは仕組みを示すための最小の例です。実際の画面では、自分で組み立てず、枠組みの側の仕組みに任せてください。属性の中や URL の中では、必要な変換が違います。]

## `String.raw`

`\` をそのままの文字として扱いたいときに使います。

```js run
console.log(String.raw`C:\new\table`);
console.log(`C:\new\table`.length);
```
```output
C:\new\table
10
```

`String.raw` を付けないと、`\n` は改行、`\t` はタブとして扱われます。
**正規表現やファイルパスを書くときに効きます。**

## よくある間違い：SQL やコマンドを組み立てる

```js
const query = `SELECT * FROM users WHERE name = '${input}'`;
```

**これはやらないでください。**
`input` に `'` が入るだけで壊れ、意図しない命令が混ざります。

[em:文字列として組み立てるのではなく、値は値として渡す仕組みを使ってください。]
テンプレートリテラルは**見やすくするためのもの**で、安全にするものではありません。

## まとめ

- `${}` には**式**が書ける。改行はそのまま書ける
- **何を入れても文字列になる。** `null` も `undefined` もそのまま出る
- オブジェクトは `[object Object]` に[bad:化ける]。`JSON.stringify()` を挟む
- `+` と違い、**数と混ざっても足し算にならない**
- タグ付きにすると、[key:文字の並び]と[key:埋めた値]を分けて受け取れる
- `String.raw` は `\` をそのままにする
- **SQL やコマンドを組み立てるのに使わない**