【JavaScript】改行をエスケープせずに文字列として扱う方法｜テンプレートリテラル・配列join・String.rawの使い分け

この記事で学べること

• テンプレートリテラルで改行をそのまま含める基本構文
• 式の埋め込み（${}）と複数行文字列の組み合わせ
• 配列 + joinで改行を挿入する方法
• String.rawでエスケープシーケンスを無効化する方法
• HTMLテンプレート生成の実務パターン
• \n vs テンプレートリテラルの比較と使い分け
• 改行を含む文字列の注意点とインデント対策

const message = `1行目
2行目
3行目`;

console.log(message);

実行結果

1行目
2行目
3行目

// \n を使ったエスケープが必要
const message = "1行目\n2行目\n3行目";

// 文字列連結で改行を入れる方法もあるが冗長
const message2 = "1行目\n" +
                  "2行目\n" +
                  "3行目";

ポイント：テンプレートリテラルを使えば\nや+による連結が不要になり、コードの可読性が大幅に向上します。

const name = "田中";
const age = 30;

const profile = `名前: ${name}
年齢: ${age}歳
来年: ${age + 1}歳`;

console.log(profile);

実行結果

名前: 田中
年齢: 30歳
来年: 31歳

const items = ["りんご", "みかん", "バナナ"];

const report = `商品数: ${items.length}個
一覧: ${items.join(", ")}
先頭: ${items[0].toUpperCase()}`;

console.log(report);

実行結果

商品数: 3個
一覧: りんご, みかん, バナナ
先頭: りんご

function createCard(user) {
  return `<div class="card">
  <h2>${user.name}</h2>
  <p>${user.email}</p>
  <span class="role">${user.role}</span>
</div>`;
}

const html = createCard({
  name: "田中太郎",
  email: "tanaka@example.com",
  role: "管理者"
});

console.log(html);

実行結果

<div class="card">
  <h2>田中太郎</h2>
  <p>tanaka@example.com</p>
  <span class="role">管理者</span>
</div>

const fruits = ["りんご", "みかん", "バナナ"];

const list = `<ul>
${fruits.map(f => `  <li>${f}</li>`).join("\n")}
</ul>`;

console.log(list);

実行結果

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>

const lines = [
  "1行目: ヘッダー",
  "2行目: 本文",
  "3行目: フッター"
];

const text = lines.join("\n");
console.log(text);

実行結果

1行目: ヘッダー
2行目: 本文
3行目: フッター

const isAdmin = true;

const lines = [
  "ユーザー: 田中太郎",
  "メール: tanaka@example.com",
];

// 条件に応じて行を追加
if (isAdmin) {
  lines.push("権限: 管理者");
}

console.log(lines.join("\n"));

実行結果

ユーザー: 田中太郎
メール: tanaka@example.com
権限: 管理者

// 通常のテンプレートリテラル → \n が改行になる
const normal = `Line1\nLine2`;
console.log(normal);
// Line1
// Line2

// String.raw → \n がそのまま文字列になる
const raw = String.raw`Line1\nLine2`;
console.log(raw);
// Line1\nLine2

// Windowsのファイルパス（\をエスケープ不要）
const path = String.raw`C:\Users\tanaka\Documents`;
console.log(path);
// C:\Users\tanaka\Documents

// 正規表現パターンの記述
const pattern = String.raw`\d{3}-\d{4}`;
const regex = new RegExp(pattern);
console.log(regex.test("123-4567"));
// true

注意：String.rawはエスケープシーケンスを無効化しますが、${}による式の埋め込みは通常通り動作します。

function getMessage() {
  return `1行目
  2行目
  3行目`;  // ← 2行目・3行目の先頭にスペースが入る
}

console.log(getMessage());

実行結果

1行目
  2行目
  3行目

function getMessage() {
  return `1行目
2行目
3行目`;  // ← 見た目は崩れるが出力は正しい
}

function dedent(str) {
  const lines = str.split("\n");
  const nonEmpty = lines.filter(l => l.trim());
  const minIndent = Math.min(
    ...nonEmpty.map(l => l.match(/^\s*/)[0].length)
  );
  return lines.map(l => l.slice(minIndent)).join("\n").trim();
}

const html = dedent(`
  <div>
    <p>Hello</p>
  </div>
`);

console.log(html);

実行結果

<div>
  <p>Hello</p>
</div>

ポイント：npmパッケージのdedentを使えば、同様の処理をより手軽に実現できます。

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] !== undefined
      ? `<strong>${values[i]}</strong>`
      : "";
    return result + str + value;
  }, "");
}

const name = "田中";
const role = "管理者";

const msg = highlight`${name}さんは
${role}です`;

console.log(msg);

実行結果

<strong>田中</strong>さんは
<strong>管理者</strong>です

タグ付きテンプレートの活用例

• String.raw: エスケープ無効化（前述）
• HTMLエスケープ: XSS対策として埋め込み値をサニタイズ
• 国際化（i18n）: 翻訳キーの解決
• CSS-in-JS: styled-componentsなどで使用

ポイント：IE11を除くすべてのモダンブラウザで対応しています。IE11対応が必要な場合はBabelなどのトランスパイラを使用してください。

あわせて読みたい

• 【JavaScript】改行を\nを使用せずに挿入する方法
• 【JavaScript】改行を全て削除する方法
• 【JavaScript】文字列を改行ごとに分割する方法
• 【JavaScript】改行をbrタグに変換する方法
• 【JavaScript】改行を削除・置換する方法
• 【JavaScript】replace() で文字列を置換する方法
• 【JavaScript】区切り文字を指定して文字列を分割する方法
• 【JavaScript】文字列を句読点ごとに分割する方法
• JavaScriptでの文字列結合
• 【JavaScript】プレースホルダーに改行を入れる方法