【JavaScript】文字列を結合する方法｜+演算子・テンプレートリテラル・concat・join・パフォーマンス比較まで解説

// 基本的な文字列結合
const firstName = "Taro";
const lastName = "Yamada";
const fullName = lastName + " " + firstName;
console.log(fullName); // "Yamada Taro"

// 変数と固定文字列の結合
const greeting = "Hello, " + firstName + "!";
console.log(greeting); // "Hello, Taro!"

// 複数の + で連結
const message = "名前: " + lastName + " " + firstName + " さん";
console.log(message); // "名前: Yamada Taro さん"

// 文字列 + 数値 → 文字列結合（数値が文字列に変換される）
console.log("年齢: " + 25);       // "年齢: 25"
console.log("3" + 5);             // "35"（文字列結合）
console.log(3 + 5 + " 円");       // "8 円"（先に 3+5=8 を計算）
console.log("合計: " + 3 + 5);    // "合計: 35"（左から順に文字列結合）

// 意図通りにするには括弧で計算を先に行う
console.log("合計: " + (3 + 5));  // "合計: 8"

// null / undefined との結合
console.log("値: " + null);       // "値: null"
console.log("値: " + undefined);  // "値: undefined"

// boolean との結合
console.log("結果: " + true);     // "結果: true"

// バッククォート ` ` と ${} で変数を埋め込み
const name = "Taro";
const age = 25;

const message = `Hello, ${name}! You are ${age} years old.`;
console.log(message);
// "Hello, Taro! You are 25 years old."

// 式も埋め込み可能
console.log(`合計: ${3 + 5} 円`);           // "合計: 8 円"
console.log(`税込: ${1000 * 1.1} 円`);       // "税込: 1100 円"
console.log(`大文字: ${name.toUpperCase()}`); // "大文字: TARO"

// 三項演算子の埋め込み
const status = true;
console.log(`状態: ${status ? "有効" : "無効"}`); // "状態: 有効"

// バッククォートなら改行がそのまま含まれる
const html = `
<div class="card">
  <h2>${title}</h2>
  <p>${description}</p>
</div>
`;

// + 演算子で書くと冗長
const html2 = '<div class="card">\n' +
              '  <h2>' + title + '</h2>\n' +
              '  <p>' + description + '</p>\n' +
              '</div>';

// 文字列の concat メソッド
const str1 = "Hello";
const str2 = "World";
const result = str1.concat(", ", str2, "!");
console.log(result); // "Hello, World!"

// 実務では + やテンプレートリテラルの方がシンプル
// concat は使う場面がほとんどない

// 配列の要素を区切り文字で結合
const parts = ["2026", "03", "30"];
console.log(parts.join("-"));  // "2026-03-30"
console.log(parts.join("/"));  // "2026/03/30"
console.log(parts.join(""));   // "20260330"（区切りなし）
console.log(parts.join(", ")); // "2026, 03, 30"

// デフォルトの区切り文字はカンマ
console.log(parts.join());     // "2026,03,30"

// HTML のリストを生成
const items = ["りんご", "バナナ", "みかん"];
const listHtml = "<ul><li>" + items.join("</li><li>") + "</li></ul>";
console.log(listHtml);
// "<ul><li>りんご</li><li>バナナ</li><li>みかん</li></ul>"

let message = "Hello";
message += ", ";
message += "World";
message += "!";
console.log(message); // "Hello, World!"

// ループ内で文字列を構築
const items = ["A", "B", "C"];
let result = "";
for (const item of items) {
  result += `<li>${item}</li>`;
}
console.log(`<ul>${result}</ul>`);
// "<ul><li>A</li><li>B</li><li>C</li></ul>"

// ↑ join() で書くとよりシンプル
const result2 = "<ul>" + items.map(i => `<li>${i}</li>`).join("") + "</ul>";

// HTML エスケープ用のタグ関数
function safeHtml(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const val = values[i - 1];
    // 変数部分を HTML エスケープ
    const escaped = String(val)
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
    return result + escaped + str;
  });
}

// ユーザー入力を安全に埋め込み
const userInput = '<script>alert("XSS")</script>';
const html = safeHtml`<p>コメント: ${userInput}</p>`;
console.log(html);
// "<p>コメント: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;</p>"

const baseUrl = "https://api.example.com";
const endpoint = "/users";
const id = 42;

// テンプレートリテラル
const url = `${baseUrl}${endpoint}/${id}`;
console.log(url); // "https://api.example.com/users/42"

// クエリパラメータの構築は URLSearchParams を使う方が安全
const params = new URLSearchParams({ page: 1, limit: 20 });
const urlWithQuery = `${baseUrl}${endpoint}?${params}`;
console.log(urlWithQuery); // "https://api.example.com/users?page=1&limit=20"

function log(level, message, data) {
  const timestamp = new Date().toISOString();
  console.log(`[${timestamp}] [${level}] ${message}`, data ?? "");
}

log("INFO", "ユーザーがログインしました", { userId: 42 });
// "[2026-03-30T05:00:00.000Z] [INFO] ユーザーがログインしました" { userId: 42 }

// 配列から CSV の 1 行を生成
const row = ["Tanaka", 30, "tokyo@example.com"];
const csvLine = row.join(",");
console.log(csvLine); // "Tanaka,30,tokyo@example.com"

// ヘッダー付き CSV
const headers = ["名前", "年齢", "メール"];
const data = [
  ["Tanaka", 30, "tanaka@example.com"],
  ["Suzuki", 25, "suzuki@example.com"],
];
const csv = [headers, ...data].map(row => row.join(",")).join("\n");
console.log(csv);

const breadcrumbs = ["ホーム", "カテゴリ", "商品詳細"];
const breadcrumbHtml = breadcrumbs
  .map((item, i) => i < breadcrumbs.length - 1
    ? `<a href="#">${item}</a>`
    : `<span>${item}</span>`
  )
  .join(" &gt; ");

console.log(breadcrumbHtml);
// "<a href=\"#\">ホーム</a> &gt; <a href=\"#\">カテゴリ</a> &gt; <span>商品詳細</span>"

// 大量の文字列を結合する場合
const parts = [];
for (let i = 0; i < 100000; i++) {
  parts.push(`<li>Item ${i}</li>`);
}
const html = parts.join("");
// += でループするより配列に push して最後に join する方が安定して高速