【JavaScript】文字列の後ろに文字を追加する方法｜+演算子・concat・テンプレートリテラル・padEnd・パフォーマンス比較まで完全解説

この記事で学べること

• + 演算子での文字列結合の基本
• += 代入演算子で末尾に追加する方法
• concat() メソッドによる結合
• テンプレートリテラル（バッククォート）での結合
• padEnd() で固定長に揃える方法
• Array.join() で配列を文字列に結合
• 配列 push + join パターン（大量結合の最適解）
• パフォーマンス比較（+, concat, join, テンプレートリテラル）
• 文字列の先頭に追加する方法（padStart含む）
• 実務パターン（パス構築・URL構築・CSV生成）
• ブラウザ互換性と注意点

const greeting = "Hello";
const result = greeting + ", World!";
console.log(result);

// 複数の文字列を連続で結合
const fullName = "田中" + " " + "太郎";
console.log(fullName);

// 数値と結合すると自動的に文字列に変換される
const message = "合計: " + 100 + "円";
console.log(message);

実行結果

Hello, World!
田中 太郎
合計: 100円

注意：+ 演算子は元の文字列を変更しません。JavaScriptの文字列はイミュータブル（不変）なので、結合するたびに新しい文字列が生成されます。大量の結合ではパフォーマンスに影響する場合があります。

let html = "<ul>";
html += "<li>りんご</li>";
html += "<li>バナナ</li>";
html += "<li>オレンジ</li>";
html += "</ul>";

console.log(html);

// ループでの使用例
const fruits = ["Apple", "Banana", "Cherry"];
let list = "";
for (const fruit of fruits) {
  list += fruit + ", ";
}
// 末尾のカンマとスペースを除去
list = list.slice(0, -2);
console.log(list);

実行結果

<ul><li>りんご</li><li>バナナ</li><li>オレンジ</li></ul>
Apple, Banana, Cherry

ポイント：+= は let で宣言した変数に対して使います。const で宣言した変数には再代入できないため、+= は使用できません。

str.concat(str2)
str.concat(str2, str3, ..., strN)

const str1 = "Hello";
const str2 = ", ";
const str3 = "World!";

// 1つの引数
console.log(str1.concat(str2));

// 複数の引数を一度に結合
console.log(str1.concat(str2, str3));

// 空文字列をベースにして複数を結合
const fullPath = "".concat("/home", "/user", "/documents");
console.log(fullPath);

実行結果

Hello, 
Hello, World!
/home/user/documents

注意：MDNの公式ドキュメントでは、concat() よりも + 演算子や += の使用が推奨されています。パフォーマンス面でも + の方が高速な場合が多いです。

const name = "太郎";
const age = 25;

// 変数を埋め込み
const intro = `私の名前は${name}です。${age}歳です。`;
console.log(intro);

// 式を埋め込み（計算結果も可）
const price = 1000;
const tax = 0.1;
const receipt = `税込: ${price * (1 + tax)}円`;
console.log(receipt);

// 文字列の後ろに追加（+ 演算子の代替）
const base = "Hello";
const appended = `${base}, World!`;
console.log(appended);

// 複数行にまたがる文字列（改行がそのまま含まれる）
const multiLine = `1行目
2行目
3行目`;
console.log(multiLine);

実行結果

私の名前は太郎です。25歳です。
税込: 1100円
Hello, World!
1行目
2行目
3行目

ポイント：テンプレートリテラルは + 演算子と比べて、変数が多い場合に圧倒的に読みやすくなります。特に複数の変数を埋め込む場面ではテンプレートリテラルが最適です。

str.padEnd(targetLength)
str.padEnd(targetLength, padString)

// スペースで埋めて15文字に揃える
console.log("Apple".padEnd(15));
console.log("Banana".padEnd(15));
console.log("Cherry".padEnd(15));

// 指定した文字で埋める
console.log("100".padEnd(8, "0"));
console.log("Hi".padEnd(10, "-="));

// 実用例: テーブル風の整形表示
const items = [
  { name: "りんご", price: 150 },
  { name: "バナナ", price: 100 },
  { name: "ぶどう", price: 500 },
];

items.forEach(item => {
  const line = item.name.padEnd(8) + `${item.price}円`;
  console.log(line);
});

実行結果

Apple          
Banana         
Cherry         
10000000
Hi-=-=-=-=
りんご     150円
バナナ     100円
ぶどう     500円

const words = ["JavaScript", "is", "awesome"];

// スペースで結合
console.log(words.join(" "));

// カンマで結合
console.log(words.join(", "));

// 区切り文字なしで結合
console.log(words.join(""));

// 省略するとカンマ区切りになる
console.log(words.join());

// HTMLタグを区切りに使う
const items = ["ホーム", "ブログ", "お問い合わせ"];
const breadcrumb = items.join(" > ");
console.log(breadcrumb);

実行結果

JavaScript is awesome
JavaScript, is, awesome
JavaScriptisawesome
JavaScript,is,awesome
ホーム > ブログ > お問い合わせ

// += パターン（非推奨: 大量データの場合遅い）
let result1 = "";
for (let i = 0; i < 1000; i++) {
  result1 += "item" + i + ", ";
}

// push + join パターン（推奨: 大量データに最適）
const parts = [];
for (let i = 0; i < 1000; i++) {
  parts.push(`item${i}`);
}
const result2 = parts.join(", ");

// 実用例: HTML テーブルの行を生成
const data = [
  { name: "田中", score: 85 },
  { name: "佐藤", score: 92 },
  { name: "鈴木", score: 78 },
];

const rows = [];
data.forEach(d => {
  rows.push(`<tr><td>${d.name}</td><td>${d.score}</td></tr>`);
});
const tableHTML = "<table>" + rows.join("") + "</table>";
console.log(tableHTML);

実行結果

<table><tr><td>田中</td><td>85</td></tr><tr><td>佐藤</td><td>92</td></tr><tr><td>鈴木</td><td>78</td></tr></table>

ポイント：push + join パターンは、ループで文字列を組み立てる場面で特に有効です。+= は結合のたびに新しい文字列を生成しますが、push は配列に要素を追加するだけなので、最後の join で一度だけ文字列を生成します。

const iterations = 100000;

// 1. + 演算子
console.time("+ operator");
let s1 = "";
for (let i = 0; i < iterations; i++) {
  s1 = s1 + "a";
}
console.timeEnd("+ operator");

// 2. += 演算子
console.time("+= operator");
let s2 = "";
for (let i = 0; i < iterations; i++) {
  s2 += "a";
}
console.timeEnd("+= operator");

// 3. concat()
console.time("concat");
let s3 = "";
for (let i = 0; i < iterations; i++) {
  s3 = s3.concat("a");
}
console.timeEnd("concat");

// 4. テンプレートリテラル
console.time("template literal");
let s4 = "";
for (let i = 0; i < iterations; i++) {
  s4 = `${s4}a`;
}
console.timeEnd("template literal");

// 5. Array push + join
console.time("push + join");
const arr = [];
for (let i = 0; i < iterations; i++) {
  arr.push("a");
}
const s5 = arr.join("");
console.timeEnd("push + join");

パフォーマンスのまとめ

• 少量の結合（数回〜数十回）：どの方法でも差はほぼない。可読性で選ぶ
• 変数埋め込みが多い場合：テンプレートリテラルが最も読みやすい
• ループで大量に結合する場合：push + joinパターンが最速
• モダンなJSエンジンでは + / += も内部で最適化されるため、数千回程度ならパフォーマンス差は小さい

const original = "World";

// + 演算子で先頭に追加
const result1 = "Hello, " + original;
console.log(result1);

// テンプレートリテラルで先頭に追加
const result2 = `Hello, ${original}`;
console.log(result2);

// プレフィックスを付与する例
const fileName = "report.pdf";
const withPrefix = "2024_" + fileName;
console.log(withPrefix);

実行結果

Hello, World
Hello, World
2024_report.pdf

// ゼロ埋め（番号を固定桁に）
console.log("5".padStart(3, "0"));
console.log("42".padStart(3, "0"));
console.log("123".padStart(3, "0"));

// 実用例: 日時のフォーマット
const now = new Date();
const month = String(now.getMonth() + 1).padStart(2, "0");
const day = String(now.getDate()).padStart(2, "0");
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");

console.log(`${now.getFullYear()}-${month}-${day} ${hours}:${minutes}`);

// 実用例: 16進数カラーコード
const r = 255, g = 128, b = 0;
const hex = "#" +
  r.toString(16).padStart(2, "0") +
  g.toString(16).padStart(2, "0") +
  b.toString(16).padStart(2, "0");
console.log(hex);

実行結果

005
042
123
2026-03-05 14:30
#ff8000

// シンプルなパス結合
const dir = "/images";
const file = "photo.jpg";
const path = dir + "/" + file;
console.log(path);

// 安全なパス結合関数
function joinPath(...segments) {
  return segments
    .map(s => s.replace(/^\/+|\/+$/g, ""))
    .filter(s => s.length > 0)
    .join("/");
}

console.log(joinPath("/api/", "/v2/", "users"));
console.log(joinPath("public", "assets", "css", "style.css"));

実行結果

/images/photo.jpg
api/v2/users
public/assets/css/style.css

// クエリパラメータの構築
const baseUrl = "https://api.example.com/search";
const params = {
  q: "JavaScript 文字列",
  page: 1,
  limit: 20
};

// 方法1: 手動で結合
const queryParts = [];
for (const [key, value] of Object.entries(params)) {
  queryParts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
}
const url1 = baseUrl + "?" + queryParts.join("&");
console.log(url1);

// 方法2: URLSearchParams を使用（推奨）
const searchParams = new URLSearchParams(params);
const url2 = `${baseUrl}?${searchParams}`;
console.log(url2);

実行結果

https://api.example.com/search?q=JavaScript%20%E6%96%87%E5%AD%97%E5%88%97&page=1&limit=20

api.example.com

https://api.example.com/search?q=JavaScript+%E6%96%87%E5%AD%97%E5%88%97&page=1&limit=20

api.example.com

const employees = [
  { name: "田中太郎", dept: "開発部", salary: 450000 },
  { name: "佐藤花子", dept: "営業部", salary: 380000 },
  { name: "鈴木一郎", dept: "総務部", salary: 420000 },
];

// ヘッダー行
const header = ["名前", "部署", "給与"].join(",");

// データ行
const rows = employees.map(emp =>
  [emp.name, emp.dept, emp.salary].join(",")
);

// ヘッダー + データ行を改行で結合
const csv = [header, ...rows].join("\n");
console.log(csv);

実行結果

名前,部署,給与
田中太郎,開発部,450000
佐藤花子,営業部,380000
鈴木一郎,総務部,420000

function createLogMessage(level, module, message) {
  const now = new Date();
  const timestamp = now.toISOString();
  const paddedLevel = level.padEnd(7);
  return `[${timestamp}] ${paddedLevel} [${module}] ${message}`;
}

console.log(createLogMessage("INFO", "AUTH", "ユーザーがログインしました"));
console.log(createLogMessage("ERROR", "DB", "接続がタイムアウトしました"));
console.log(createLogMessage("WARNING", "API", "レート制限に近づいています"));

実行結果

[2026-03-05T05:30:00.000Z] INFO    [AUTH] ユーザーがログインしました
[2026-03-05T05:30:00.000Z] ERROR   [DB] 接続がタイムアウトしました
[2026-03-05T05:30:00.000Z] WARNING [API] レート制限に近づいています

注意：IE（Internet Explorer）はテンプレートリテラル、padEnd()、padStart() に対応していません。IE対応が必要な場合は、+ 演算子と concat() を使用するか、Babelなどのトランスパイラを導入してください。

この記事のまとめ

• + 演算子が最もシンプルで広く使われる基本の結合方法
• += で変数に蓄積しながら末尾追加できる
• concat() はメソッドだが、+ の方が推奨される
• テンプレートリテラルは変数埋め込みに最適で最も読みやすい
• padEnd() / padStart() で固定長に揃えられる
• Array.join() は区切り文字付きの結合に便利
• 大量結合には push + join パターンが最速
• パス構築・URL構築・CSV生成など実務パターンで文字列結合は必須
• IE非対応のメソッドがあるため、対象ブラウザに応じた選択が必要