【2026年7月最新】JavaScriptの文字列操作を完全解説！置換・連結・検索・比較など全メソッドを実例付きで紹介

「replace()で文字列を置換したいのにうまくいかない」「スペースを取り除くメソッドはどれ？」——JavaScriptの文字列操作は種類が多く、どのメソッドをいつ使えばいいかで迷いやすいポイントです。

この記事ではJavaScriptの文字列操作で頻出の20以上のメソッドを実例付きで完全解説します。連結・検索・置換・抽出・比較から、よくあるバグの対処法まで網羅します。後半ではClaude CodeでJavaScript文字列処理を自動生成・自動化する方法も解説します。

01 STRING BASICS JavaScriptの文字列型の基礎——Stringオブジェクトを理解する 文字列リテラルとStringオブジェクトの違い・immutable（不変）の性質

// 文字列を定義する3つの方法
const str1 = 'シングルクォート';    // ← 最もよく使う
const str2 = "ダブルクォート";       // ← OK
const str3 = `テンプレートリテラル`; // ← 変数埋め込み・複数行に使う

// 文字列はimmutable（変更不能）
let name = 'tanaka';
name.toUpperCase();  // ← 元のnameは変わらない！
console.log(name);   // tanaka（変わっていない）

name = name.toUpperCase();  // ← 再代入で初めて反映
console.log(name);           // TANAKA

文字列の長さはlength プロパティで取得できます。これはメソッドではなくプロパティなので()（括弧）は不要です：

const text = 'Hello, World!';
console.log(text.length);      // 13
console.log(text[0]);          // 'H'  ← インデックスアクセス
console.log(text.at(-1));      // '!'  ← at()で後ろからアクセス可（ES2022）
console.log(text.charAt(7));   // 'W'  ← charAt()で指定位置の文字

文字列を1文字ずつ分解して処理したい場合は、Array.from()やスプレッド構文を使います。text.split("")は絵文字や日本語の扱いで問題が起きることがあるため、Array.from(text)の方が安全です。また、for...ofループでも文字列を1文字ずつ反復処理できます。

02 CONCATENATION 連結・テンプレートリテラル——文字列を組み合わせる4パターン concat・+演算子・テンプレートリテラル・Arrayのjoin

方法	コード例	特徴
+演算子	"Hello" + " " + name	最もシンプル。数値との混在に注意
テンプレートリテラル	`Hello ${name}`	変数・式・改行をそのまま書けて最も便利
concat()	"Hello".concat(" ", name)	複数の文字列を引数で渡せる
Array.join()	["Hello", name].join(" ")	配列の要素を区切り文字で結合

const first = '田中';
const last = '太郎';

// 1. +演算子（シンプルな連結）
const name1 = last + ' ' + first;

// 2. テンプレートリテラル（推奨）
const name2 = `${last} ${first}`;
const message = `こんにちは、${last} ${first}さん！今は${new Date().getHours()}時です。`;

// 3. 複数行文字列（テンプレートリテラルの強み）
const html = `
  <div class="user">
    <h2>${last} ${first}</h2>
    <p>ようこそ！</p>
  </div>
`;

// 4. Array.joinで区切り文字連結
const words = ['Apple', 'Banana', 'Cherry'];
console.log(words.join(', '));  // Apple, Banana, Cherry
console.log(words.join('・')); // Apple・Banana・Cherry

03 SEARCH & CHECK 検索・判定——indexOf・includes・startsWith・endsWith 文字列の中に何かがあるかを確認するメソッドを整理

メソッド	戻り値	用途
indexOf(str)	位置（数値）/ -1	文字列が最初に現れる位置を調べる。存在しなければ-1
lastIndexOf(str)	位置（数値）/ -1	文字列が最後に現れる位置を調べる
includes(str)	true / false	文字列が含まれているかを確認（位置は不要な場合）
startsWith(str)	true / false	文字列が指定した文字で始まるかを確認
endsWith(str)	true / false	文字列が指定した文字で終わるかを確認
search(regex)	位置（数値）/ -1	正規表現パターンで検索

const text = 'JavaScript文字列操作ガイド';

// indexOf: 位置を返す（見つからなければ-1）
console.log(text.indexOf('文字列'));      // 10
console.log(text.indexOf('Python'));      // -1（見つからない）

// includes: 含まれているか（true/false）
console.log(text.includes('文字列'));     // true
console.log(text.includes('Python'));     // false

// startsWith / endsWith
console.log(text.startsWith('Java'));     // true
console.log(text.endsWith('ガイド'));     // true

// 実践的な使い方：URLの判定
const url = 'https://example.com/about';
if (url.startsWith('https://')) {
  console.log('安全なHTTPS接続');
}
if (url.endsWith('/about')) {
  console.log('Aboutページへのリンク');
}

04 EXTRACT & SPLIT 抽出・分割——slice・substring・split 文字列の一部を取り出す・区切り文字で分割するメソッド

const str = 'Hello, World!';

// slice(start, end)  ← マイナスインデックス対応
console.log(str.slice(0, 5));    // 'Hello'
console.log(str.slice(7));       // 'World!'（末尾まで）
console.log(str.slice(-6));      // 'orld!'（末尾から6文字）
console.log(str.slice(-6, -1));  // 'orld'

// substring(start, end)  ← マイナスは0として扱う
console.log(str.substring(0, 5));  // 'Hello'
console.log(str.substring(7));     // 'World!'

// split: 区切り文字で配列に分割
const csv = '田中,山田,鈴木,佐藤';
const names = csv.split(',');
console.log(names);  // ['田中', '山田', '鈴木', '佐藤']

// 文字を1文字ずつの配列に
const letters = 'abc'.split('');
console.log(letters);  // ['a', 'b', 'c']

// 最大分割数の指定
const text = 'a:b:c:d:e';
console.log(text.split(':', 3));  // ['a', 'b', 'c']（3つまで）

05 REPLACE 置換——replace・replaceAll・正規表現との組み合わせ 最初の1箇所だけ・全部置換・パターン置換の3パターン

const text = 'Hello World, Hello JavaScript!';

// replace: 最初に見つかった1箇所だけ置換
console.log(text.replace('Hello', 'Hi'));
// 'Hi World, Hello JavaScript!' ← 最初のHelloだけ変わる

// replaceAll: 全て置換（ES2021）
console.log(text.replaceAll('Hello', 'Hi'));
// 'Hi World, Hi JavaScript!' ← 全てのHelloが変わる

// 正規表現で全て置換（replaceAll以前の方法）
console.log(text.replace(/Hello/g, 'Hi'));  // /g フラグで全置換
// 'Hi World, Hi JavaScript!'

// 大文字小文字を無視して置換（iフラグ）
const str = 'apple APPLE Apple';
console.log(str.replace(/apple/gi, 'banana'));
// 'banana banana banana'

// コールバック関数で動的な置換
const prices = '500円, 1000円, 2500円';
const doubled = prices.replace(/(\d+)/g, (match) => parseInt(match) * 2 + '');
console.log(doubled);  // '1000円, 2000円, 5000円'

06 TRANSFORM 変換・整形——大文字小文字・trim・pad・repeat 文字列を整えるメソッド群——入力値のバリデーション・表示形式の統一に使う

メソッド	例	用途
toUpperCase()	"hello".toUpperCase() → "HELLO"	全て大文字に変換
toLowerCase()	"HELLO".toLowerCase() → "hello"	全て小文字に変換
trim()	" hello ".trim() → "hello"	前後の空白・改行を除去
trimStart()	" hello ".trimStart() → "hello "	先頭の空白だけ除去
trimEnd()	" hello ".trimEnd() → " hello"	末尾の空白だけ除去
padStart(n, str)	"5".padStart(3,"0") → "005"	文字数を左から埋める
padEnd(n, str)	"5".padEnd(3,"0") → "500"	文字数を右から埋める
repeat(n)	"ab".repeat(3) → "ababab"	文字列をn回繰り返す

// 大文字・小文字変換（メールアドレスの正規化など）
const email = '  Tanaka@Example.COM  ';
const normalized = email.trim().toLowerCase();
console.log(normalized);  // 'tanaka@example.com'

// padStart: 数字の0埋め（日付・コード生成）
const num = 5;
console.log(String(num).padStart(3, '0'));  // '005'
console.log(String(num).padStart(5, '0'));  // '00005'

// 実践例：日付のフォーマット
const d = new Date();
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
console.log(`${year}-${month}-${day}`);  // '2026-07-14'

// repeat: ローディングドットや区切り線の生成
const separator = '-'.repeat(40);
console.log(separator);  // '----------------------------------------'

07 COMMON PITFALLS よくある落とし穴とエラー——比較の罠・型変換の注意点 初心者が必ずはまるJavaScript文字列の罠を先取りして回避

// 落とし穴1: ==と===の違い（文字列と数値の混在）
console.log('5' == 5);    // true（型を変換して比較）
console.log('5' === 5);   // false（型も含めて厳密に比較）

// フォームの入力値は文字列として来るので注意
const input = '42';  // フォームから来た値
if (input === 42) {  // これは false！
  console.log('42です');
}
if (Number(input) === 42) {  // 数値に変換してから比較
  console.log('42です');  // こちらが正しい
}

// 落とし穴2: NullやUndefinedへのメソッド呼び出し
let str = null;
str.toUpperCase();  // ← TypeError: Cannot read properties of null

// 安全な書き方
const result = str?.toUpperCase() ?? '（未設定）';
console.log(result);  // （未設定）

// 落とし穴3: 数値と文字列の+演算子
console.log(1 + 2 + '円');    // '3円'（左から評価）
console.log('合計:' + 1 + 2); // '合計:12'（12ではなく！）
console.log('合計:' + (1 + 2)); // '合計:3'（括弧で先に計算）

08 CLAUDE CODE 【比較】手書き vs Claude Code——JS文字列処理の自動化 JavaScript文字列操作の悩みをClaude Codeに丸投げする実践法

ここまでJavaScriptの文字列操作を詳しく解説しました。後半では「Claude Codeにこれらを書かせる・自動生成する」という実践的なアプローチを解説します。

比較軸	手書き	Claude Code
学習コスト	20以上のメソッドを覚える必要がある	要件を日本語で伝えるだけでOK
正規表現の作成	複雑な正規表現は作成に時間がかかる	パターンを説明すると即生成
エラーの対処	原因を自分で特定・修正する	エラーをペーストすれば解決策を提示
バリデーション実装	メールアドレス正規表現などを自分で書く	「メールアドレスを検証する関数を書いて」で完成

8-1. Claude CodeへのJavaScript文字列処理依頼の実践例

cc-js-string-methods

よくある質問

Q. JavaScriptで文字列を全て置換するには？

A. str.replaceAll("検索文字","置換文字")が最も簡単です。ES2021で追加されました。古い環境や正規表現パターンで置換する場合はstr.replace(/検索パターン/g,"置換文字")のようにgフラグをつけた正規表現を使います。replace()だけだと最初の1つしか置換されないので注意してください。

Q. 文字列に含まれているかを確認する方法は？

A. str.includes("検索文字")が最もシンプルです。含まれていればtrue、含まれていなければfalseを返します。位置（何文字目か）も知りたい場合はindexOf()を使います（見つからなければ-1を返します）。文字列の先頭・末尾だけを確認したい場合はstartsWith()・endsWith()が便利です。

Q. 文字列の前後のスペースを除去するには？

A. str.trim()で前後両方のスペースと改行を除去できます。先頭だけ除去したい場合はtrimStart()、末尾だけはtrimEnd()を使います。フォームの入力値処理では必ずtrim()を先に実行してからバリデーションすることを推奨します。

Q. 文字列を区切り文字で分割・結合する方法は？

A. 分割はsplit()、結合はArray.join()を使います。"田中,山田,鈴木".split(",")で["田中","山田","鈴木"]の配列に、逆に["田中","山田","鈴木"].join("・")で"田中・山田・鈴木"に変換できます。CSVデータの処理やURL操作でよく使う組み合わせです。

Q. 数値を0埋めの文字列にするには？

A. String(数値).padStart(桁数,"0")を使います。例えばString(5).padStart(3,"0")→"005"です。月や日を2桁表示したい場合はString(月).padStart(2,"0")とします。JavaScriptの日付フォーマット（YYYY-MM-DD形式）でよく使うパターンです。

Q. Claude Codeでjavascript文字列処理はできますか？

A. はい、Claude CodeはJavaScriptの文字列操作が非常に得意です。「このJSON文字列を整形したい」「フォームの入力値を検証するコードを書きたい」「正規表現がうまく書けない」など、やりたいことを日本語で伝えるだけでコードを生成できます。エラーが出た場合もエラーメッセージをそのままペーストすると修正コードを提示してくれます。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。