【JavaScript】文字列の追加・結合方法まとめ｜先頭・末尾・padStart・join完全解説

この記事で学べること

• +演算子・テンプレートリテラル・concat()で先頭・末尾に文字列を追加する方法
• padStart() / padEnd()でゼロ埋め・スペース埋めする方法
• Array.join() / reduce()で複数の文字列を効率的に結合する方法
• 各メソッドの速度・可読性の比較表
• URL組み立て・CSSクラス生成・桁埋めなど実務パターン
• 数値+文字列の型変換、null/undefinedなどよくあるミス

const original = 'world';
const result = 'Hello, ' + original;

console.log(result); // "Hello, world"

// 変数にプレフィックスを追加する例
const fileName = 'report.pdf';
const path = '/downloads/' + fileName;

console.log(path); // "/downloads/report.pdf"

Hello, world
/downloads/report.pdf

ポイント: +演算子は直感的でわかりやすいため、単純な結合には最適です。ただし、変数が多くなると可読性が下がる場合があります。

const name = '太郎';
const greeting = `こんにちは、${name}さん！`;

console.log(greeting); // "こんにちは、太郎さん！"

// 先頭にプロトコルを追加
const domain = 'example.com';
const url = `https://${domain}/api/v1`;

console.log(url); // "https://example.com/api/v1"

こんにちは、太郎さん！
https://example.com/api/v1

ポイント: テンプレートリテラルは複数の変数を埋め込む場合に特に可読性が高く、モダンJavaScriptでは最も推奨される方法です。

const original = 'JavaScript';

// 先頭に文字列を追加
const result = 'Learn '.concat(original);
console.log(result); // "Learn JavaScript"

// 複数の引数を渡せる
const full = 'Hello'.concat(', ', 'world', '!');
console.log(full); // "Hello, world!"

Learn JavaScript
Hello, world!

注意: MDNではconcat()よりも+演算子やテンプレートリテラルの使用が推奨されています。concat()はパフォーマンスがやや劣る場合があるためです。

// +演算子で末尾に追加
const base = 'Hello';
const result = base + ', world!';
console.log(result); // "Hello, world!"

// +=演算子で追記（letが必要）
let message = 'エラーが発生しました';
message += '：ファイルが見つかりません';
console.log(message); // "エラーが発生しました：ファイルが見つかりません"

// +=で段階的に文字列を組み立てる
let html = '<ul>';
html += '<li>項目1</li>';
html += '<li>項目2</li>';
html += '</ul>';
console.log(html);

Hello, world!
エラーが発生しました：ファイルが見つかりません
<ul><li>項目1</li><li>項目2</li></ul>

const fileName = 'report';
const ext = '.pdf';

// 末尾に拡張子を追加
const fullName = `${fileName}${ext}`;
console.log(fullName); // "report.pdf"

// タイムスタンプを末尾に追加
const logEntry = '処理完了';
const timestamped = `${logEntry} [${new Date().toLocaleTimeString()}]`;
console.log(timestamped); // "処理完了 [14:30:00]"

const str = 'Hello';

const result1 = str.concat(', world');
console.log(result1); // "Hello, world"

// 複数の文字列を一度に追加
const result2 = str.concat(', ', 'world', '!');
console.log(result2); // "Hello, world!"

Hello, world
Hello, world!

// padStart(目標の長さ, 埋める文字)
str.padStart(targetLength, padString)

// padEnd(目標の長さ, 埋める文字)
str.padEnd(targetLength, padString)

引数の説明:

• targetLength: 結果の文字列の最小長さ。元の文字列がこの長さ以上なら何もしない
• padString: 埋めるために使う文字列（省略するとスペース）

// 2桁のゼロ埋め
console.log('5'.padStart(2, '0'));  // "05"
console.log('12'.padStart(2, '0')); // "12"（すでに2桁なのでそのまま）

// 4桁のゼロ埋め（連番など）
console.log('1'.padStart(4, '0'));   // "0001"
console.log('42'.padStart(4, '0'));  // "0042"
console.log('999'.padStart(4, '0')); // "0999"

// 数値から文字列に変換してゼロ埋め
const num = 7;
const padded = String(num).padStart(3, '0');
console.log(padded); // "007"

05
12
0001
0042
0999
007

function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

console.log(formatDate(new Date(2026, 2, 5))); // "2026-03-05"
console.log(formatDate(new Date(2026, 11, 25))); // "2026-12-25"

2026-03-05
2026-12-25

const items = [
  { name: 'りんご', price: 150 },
  { name: 'バナナ', price: 100 },
  { name: 'ぶどう', price: 500 },
];

items.forEach(item => {
  const line = item.name.padEnd(10, ' ') + String(item.price).padStart(6, ' ') + '円';
  console.log(line);
});

りんご          150円
バナナ          100円
ぶどう          500円

注意: padStart() / padEnd()は文字列に対して動作します。数値に直接使うとエラーになるため、必ずString()で文字列に変換してから使いましょう。

// 基本的な使い方
const words = ['Hello', 'World', 'JavaScript'];
console.log(words.join(', ')); // "Hello, World, JavaScript"
console.log(words.join(' - ')); // "Hello - World - JavaScript"
console.log(words.join('')); // "HelloWorldJavaScript"

// 区切り文字を省略するとカンマで結合
console.log(words.join()); // "Hello,World,JavaScript"

// パンくずリストの生成
const breadcrumb = ['ホーム', 'JavaScript', '文字列操作'];
console.log(breadcrumb.join(' > ')); // "ホーム > JavaScript > 文字列操作"

Hello, World, JavaScript
Hello - World - JavaScript
HelloWorldJavaScript
Hello,World,JavaScript
ホーム > JavaScript > 文字列操作

const firstName = '太郎';
const lastName = '山田';
const age = 25;
const city = '東京';

// +演算子だと可読性が低い
const bad = lastName + ' ' + firstName + '（' + age + '歳・' + city + '在住）';

// テンプレートリテラルなら明快
const good = `${lastName} ${firstName}（${age}歳・${city}在住）`;

console.log(good); // "山田 太郎（25歳・東京在住）"

山田 太郎（25歳・東京在住）

// 配列の要素を加工しながら結合
const tags = ['javascript', 'react', 'typescript'];

const hashTags = tags.reduce((acc, tag, i) => {
  return i === 0 ? `#${tag}` : `${acc} #${tag}`;
}, '');

console.log(hashTags); // "#javascript #react #typescript"

// よりシンプルに書くなら map + join
const hashTags2 = tags.map(tag => `#${tag}`).join(' ');
console.log(hashTags2); // "#javascript #react #typescript"

#javascript #react #typescript
#javascript #react #typescript

ポイント: reduce()は柔軟ですが、単純な結合ならmap() + join()の方がシンプルで読みやすいです。変換と結合を同時に行いたい場合はmap() + join()を優先しましょう。

選び方の目安: 少数の結合にはテンプレートリテラル、配列の結合にはjoin()、ゼロ埋めにはpadStart()が最適です。迷ったらテンプレートリテラルを選びましょう。

// APIエンドポイントの組み立て
const BASE_URL = 'https://api.example.com';
const API_VERSION = 'v2';

function buildUrl(resource, id) {
  return `${BASE_URL}/${API_VERSION}/${resource}/${id}`;
}

console.log(buildUrl('users', 123));
// "https://api.example.com/v2/users/123"

// クエリパラメータの追加
function addQueryParams(url, params) {
  const query = Object.entries(params)
    .map(([key, val]) => `${key}=${encodeURIComponent(val)}`)
    .join('&');
  return `${url}?${query}`;
}

console.log(addQueryParams('/search', { q: 'JavaScript', page: 1 }));
// "/search?q=JavaScript&page=1"

// 条件に応じてクラス名を組み立てる
function getClassName(isActive, isDisabled, size) {
  const classes = ['btn'];

  if (isActive)   classes.push('btn--active');
  if (isDisabled) classes.push('btn--disabled');
  if (size)       classes.push(`btn--${size}`);

  return classes.join(' ');
}

console.log(getClassName(true, false, 'large'));
// "btn btn--active btn--large"

console.log(getClassName(false, true, 'small'));
// "btn btn--disabled btn--small"

// パスの安全な結合
function joinPath(...segments) {
  return segments
    .map(seg => seg.replace(/^\/+|\/+$/g, ''))
    .filter(Boolean)
    .join('/');
}

console.log(joinPath('/home/', '/user/', 'documents/'));
// "home/user/documents"

// タイムスタンプ付きファイル名
function makeFileName(baseName, ext) {
  const timestamp = Date.now();
  return `${baseName}_${timestamp}.${ext}`;
}

console.log(makeFileName('backup', 'sql'));
// "backup_1710064800000.sql"

// 連番IDの生成（0001, 0002, ...）
function generateIds(prefix, count, digits = 4) {
  return Array.from({ length: count }, (_, i) => {
    return prefix + String(i + 1).padStart(digits, '0');
  });
}

const ids = generateIds('TASK-', 5);
console.log(ids);
// ["TASK-0001", "TASK-0002", "TASK-0003", "TASK-0004", "TASK-0005"]

["TASK-0001", "TASK-0002", "TASK-0003", "TASK-0004", "TASK-0005"]

// テーブルHTMLの生成
const users = [
  { name: '山田太郎', email: 'taro@example.com' },
  { name: '鈴木花子', email: 'hanako@example.com' },
];

const rows = users.map(user => 
  `<tr><td>${user.name}</td><td>${user.email}</td></tr>`
).join('\n');

const table = `<table>
  <thead><tr><th>名前</th><th>メール</th></tr></thead>
  <tbody>${rows}</tbody>
</table>`;

console.log(table);

// 意図しない文字列結合
console.log('5' + 3);     // "53"（文字列結合！）
console.log(5 + '3');     // "53"（文字列結合！）
console.log(5 + 3);       // 8（数値加算）

// フォーム入力値でよくあるミス
const price = '1000';    // inputから取得した値は文字列
const tax = 100;
console.log(price + tax); // "1000100"（文字列結合！）

// 正しい方法：Number()で変換してから計算
console.log(Number(price) + tax); // 1100（数値加算）

53
53
8
1000100
1100

注意: フォーム入力値やAPIレスポンスの値は文字列であることが多いです。数値計算を行う前に必ずNumber()やparseInt()で型変換しましょう。

// null / undefined の問題
let value = null;
console.log('値は: ' + value);     // "値は: null"

let name;
console.log('名前: ' + name);     // "名前: undefined"

// テンプレートリテラルでも同じ問題が起きる
console.log(`値は: ${value}`);    // "値は: null"

// 対策1: Null合体演算子（??）でデフォルト値
console.log(`値は: ${value ?? '未設定'}`); // "値は: 未設定"

// 対策2: 論理OR演算子（||）でデフォルト値
console.log(`名前: ${name || '匿名'}`); // "名前: 匿名"

// 対策3: 配列のfilterでnull/undefinedを除外して結合
const parts = ['東京都', null, '渋谷区', undefined, '1-1-1'];
const address = parts.filter(Boolean).join('');
console.log(address); // "東京都渋谷区1-1-1"

値は: null
名前: undefined
値は: null
値は: 未設定
名前: 匿名
東京都渋谷区1-1-1

// 非推奨: ループ内で += を使う
let result = '';
for (let i = 0; i < 10000; i++) {
  result += `item${i}, `;
}

// 推奨: 配列に集めてからjoin()で結合
const items = [];
for (let i = 0; i < 10000; i++) {
  items.push(`item${i}`);
}
const result2 = items.join(', ');

// さらに簡潔に: Array.from + join
const result3 = Array.from(
  { length: 10000 },
  (_, i) => `item${i}`
).join(', ');

ポイント: モダンなJSエンジンでは+=も最適化されていますが、数万件以上の結合ではjoin()の方が安定して高速です。コードの意図も明確になるため、配列がある場合はjoin()を優先しましょう。

まとめのポイント

• 迷ったらテンプレートリテラル: 可読性が高く、モダンJavaScriptの標準的な方法
• ゼロ埋めにはpadStart(): 日付フォーマットや連番生成に最適
• 配列の結合にはjoin(): 区切り文字を指定した効率的な結合
• 型変換に注意: +演算子は文字列と数値で挙動が変わる
• null/undefinedの対策: ??演算子やfilter(Boolean)でガード
• 大量結合はjoin(): パフォーマンスと可読性の両面で有利