【2026年7月最新】JavaScriptの文字列分割・切り出し完全ガイド｜substr・substring・sliceの違いとバグを防ぐ書き方

この記事の内容

1. 01結論：まず何を使えばいいかの早見表
2. 02substrメソッドの使い方と非推奨の理由
3. 03substringメソッドと「自動反転」の罠
4. 04sliceメソッドの使い方と実務での使い分け
5. 053メソッドの挙動差を1つの入力で徹底比較
6. 06charAtで1文字ずつ処理する方法
7. 07splitで配列に分割する方法
8. 08【独自】実務でよくあるバグパターンと防ぎ方
9. 09【独自】GENAI社内でのコード生成とClaude Code活用実例
10. 10Claude Codeに文字列処理コードを書かせる方法
11. 11まとめ
12. FAQよくある質問

📚 用語解説

メソッド（method）：ある値（ここでは文字列）に対して「何らかの処理をしてください」と命令する機能のこと。文字列.メソッド名(引数)という形で呼び出します。Excelでいう関数（SUM関数など）に近いイメージで、対象データの後ろに「.」でつないで呼び出すのがJavaScriptの書き方の特徴です。

📚 用語解説

引数（ひきすう / パラメータ）：メソッドを呼び出すときに渡す「条件」や「材料」のこと。substr(開始位置, 文字数)であれば「開始位置」と「文字数」が引数にあたります。引数を変えることで同じメソッドでも異なる結果を得られます。

本記事の3メソッドの中で唯一「非推奨」の扱いを受けていないのはsliceとsubstringですが、挙動が直感的で予測しやすいのはsliceです。「とりあえず文字列の一部を切り出したい」場面では、まずsliceを使う判断で問題ありません。substringはあとから読む人が混乱しやすいため、使うとしても挙動をコメントに明記することをおすすめします。

// substrメソッドの基本構文
// str.substr(開始位置, 文字数)

const str = "JavaScriptプログラミング";

// 0番目から4文字取り出す
console.log(str.substr(0, 4));   // "Java"

// 4番目から6文字取り出す
console.log(str.substr(4, 6));   // "Script"

// 文字数を省略すると末尾まで取り出す
console.log(str.substr(4));      // "Scriptプログラミング"

// マイナス値を開始位置に指定すると「末尾から数える」
console.log(str.substr(-7, 7));  // "プログラミング"

MDN Web Docsなど公式のドキュメントでは、substrメソッドは「レガシー機能」として非推奨扱いになっています。廃止される予定はまだ明言されていませんが、ECMAScript仕様の「Annex B（付録B）」という、ブラウザの互換性維持のためだけに残されている扱いの機能です。新しくコードを書く場合は、後述するsliceの利用が推奨されています。

// substringメソッドの基本構文
// str.substring(開始位置, 終了位置)

const str = "JavaScriptプログラミング";

// 0番目から4番目の手前まで（インデックス0,1,2,3）
console.log(str.substring(0, 4));   // "Java"

// 終了位置を省略すると末尾まで
console.log(str.substring(4));      // "Scriptプログラミング"

// 【注意】開始位置に終了位置より大きい値を渡すと、自動で入れ替わる
console.log(str.substring(10, 4));  // "Script" ← (4, 10)として扱われる

// 【注意】マイナス値は自動的に0に変換される
console.log(str.substring(-5, 4));  // "Java" ← (0, 4)として扱われる

📚 用語解説

インデックス（添字）：文字列や配列の中で、それぞれの文字・要素に振られた「番号」のこと。JavaScriptでは0番目から数え始めるのが決まりです。"JavaScript"という文字列であれば、J=0番目、a=1番目、v=2番目…という並びになります。人間の感覚である「1文字目、2文字目」と1つズレる点が初学者がつまずきやすいポイントです。

開始位置と終了位置を計算で動的に求めるようなコードで、計算結果が想定と逆転してしまった場合、substringはエラーを出さずに「それらしい結果」を返してしまいます。これが原因で「なぜか意図しない文字列が返ってくる」というバグが発生し、原因調査に時間がかかるケースが実務では少なくありません。

// sliceメソッドの基本構文
// str.slice(開始位置, 終了位置)

const str = "JavaScriptプログラミング";

// 0番目から4番目の手前まで
console.log(str.slice(0, 4));    // "Java"

// マイナス値は「末尾から数えた位置」として扱われる
console.log(str.slice(-7));      // "プログラミング"
console.log(str.slice(-7, -3));  // "プログラ"

// 開始位置が終了位置より大きい場合は、自動反転せず空文字を返す
console.log(str.slice(10, 4));   // "" （空文字）

「ファイル名の拡張子を除いた末尾3文字」「電話番号の下4桁」など、末尾からの相対位置で切り出したい場面では、slice(-N)が最も簡潔に書けます。substrでも同様の書き方はできますが、substrは非推奨のためsliceを使う習慣をつけておくと安心です。

const str = "JavaScript";
//            0123456789  ← インデックス

// ケース1: 通常の範囲指定 str.〇〇(2, 6)
str.substr(2, 6);      // "vaScri"（2番目から6文字）
str.substring(2, 6);   // "vaSc"（2番目〜6番目手前）
str.slice(2, 6);       // "vaSc"（2番目〜6番目手前）

// ケース2: マイナス値 str.〇〇(-4)
str.substr(-4);        // "ript"（末尾から4文字）
str.substring(-4);     // "JavaScript"（0として扱われ全体になる）
str.slice(-4);         // "ript"（末尾から4文字）

// ケース3: 開始 > 終了 str.〇〇(6, 2)
str.substr(6, 2);      // "ri"（第2引数は「文字数」なので6番目から2文字）
str.substring(6, 2);   // "vaSc"（自動反転して(2,6)扱い）
str.slice(6, 2);       // ""（空文字。反転しない）

substrの第2引数は「終了位置」ではなく「文字数」です。substring・sliceの第2引数（終了位置）と混同してコードを書き換えると、切り出される文字数がずれるバグにつながります。3つを混在させたコードは特にレビュー時に見落としやすいポイントです。

// charAtメソッドの基本構文
// str.charAt(インデックス)

const str = "JavaScript";

console.log(str.charAt(0));   // "J"
console.log(str.charAt(4));   // "S"

// ブラケット記法でも同様に1文字取得できる（現在はこちらもよく使われる）
console.log(str[0]);          // "J"
console.log(str[4]);          // "S"

// 範囲外のインデックスを指定した場合の違い
console.log(str.charAt(100)); // ""（空文字が返る）
console.log(str[100]);        // undefined（値が存在しないことを示す特殊な値）

// 繰り返し処理と組み合わせて1文字ずつ処理する
for (let i = 0; i < str.length; i++) {
  console.log(`${i}番目: ${str.charAt(i)}`);
}

📚 用語解説

undefined（アンディファインド）：JavaScriptで「値が定義されていない」ことを示す特殊な値。エラーではありませんが、この値をそのまま文字列結合や計算に使うと"undefined"という文字列が混入したり、意図しない結果になったりします。charAtは範囲外アクセス時に空文字を返しますが、ブラケット記法[]はundefinedを返す点が実務上の分かれ目です。

絵文字や一部の特殊な漢字は「サロゲートペア」と呼ばれる2つの文字コードの組み合わせで表現されており、charAtや通常のインデックスアクセスでは1文字として正しく扱えないことがあります。絵文字を含む文字列を扱う場合は、後述するArray.from(str)やスプレッド構文[...str]を使う方法が安全です。

📚 用語解説

サロゲートペア：絵文字や一部の特殊文字を表現するために、JavaScript内部で2つの文字コード（16ビット単位）を組み合わせて1文字を表す仕組み。charAtやstr[i]でアクセスすると、この2つの文字コードのうち片方だけを取得してしまい、文字化けのような表示になることがあります。SNS投稿など絵文字を含むテキストを処理する際に見落とされがちな注意点です。

// splitメソッドの基本構文
// str.split(区切り文字, 制限数)

const csv = "菅澤,山崎,田中,佐藤";

// カンマで分割して配列にする
const names = csv.split(",");
console.log(names);       // ["菅澤", "山崎", "田中", "佐藤"]
console.log(names.length); // 4

// 引数を省略すると分割せず配列1件にまとめる
console.log(csv.split());  // ["菅澤,山崎,田中,佐藤"]

// 空文字を渡すと1文字ずつ配列にする
console.log("Hello".split(""));  // ["H", "e", "l", "l", "o"]

// 第2引数で分割数を制限
console.log(csv.split(",", 2));  // ["菅澤", "山崎"]

// 正規表現で複数の区切り文字に対応する
const mixed = "東京 大阪,名古屋　福岡";  // 半角スペース・カンマ・全角スペースが混在
console.log(mixed.split(/[,\s　]+/));   // ["東京", "大阪", "名古屋", "福岡"]

📚 用語解説

正規表現（regular expression）：文字列のパターンを一定のルールで表現する記法。「/[,\s　]+/」のように書くことで、「カンマ・半角スペース・全角スペースのいずれかが1回以上連続する箇所」をまとめて区切り文字として扱えます。1つの区切り文字しか指定できないsplitの弱点を、正規表現を使うことで解消できます。

// 見た目の幅と文字数がズレる例
const name = "ﾔﾏｻﾞｷ Taro";  // 半角カナ+半角英字

// 単純に10文字で切ると、見た目の幅は文字数と一致しない
console.log(name.slice(0, 10));  // 見た目の横幅は想定よりも狭い

// 対策: 見た目の幅で揃えたい場合は、文字ごとに全角/半角判定して
// 幅を積算しながら切り出す関数を別途用意する必要がある
function sliceByWidth(str, maxWidth) {
  let width = 0;
  let result = "";
  for (const ch of str) {
    const w = /[\uFF61-\uFF9F\x20-\x7E]/.test(ch) ? 1 : 2; // 半角なら1、それ以外は2とみなす簡易判定
    if (width + w > maxWidth) break;
    width += w;
    result += ch;
  }
  return result;
}

「20文字で切り詰める」という要件は、全角・半角が混在する日本語データでは見た目の幅を保証しません。帳票やCSVエクスポートなど桁数が厳密に決まっている業務では、見た目の幅を計算するロジックを別途用意するか、切り詰め前にバリデーションで警告する設計が安全です。

// 絵文字を含む文字列で起きる問題
const text = "こんにちは😀元気です";

// 通常のslice/substringは絵文字を正しく1文字として扱えないことがある
console.log(text.length);  // 見た目の文字数より多くカウントされる（絵文字はコード単位で2つ分）

// 対策1: スプレッド構文で1文字ずつ正しく分解する
const chars = [...text];
console.log(chars.length);  // 見た目通りの文字数になる

// 対策2: Array.fromでも同様に正しく分解できる
const chars2 = Array.from(text);
console.log(chars2.slice(0, 6).join(""));  // "こんにちは😀"（絵文字が壊れない）

ユーザー投稿やチャットなど絵文字が入力される可能性のあるテキストを切り出す場合は、通常のslice/substringではなく、スプレッド構文[...str]やArray.from(str)で配列化してからsliceする方法が安全です。多少コードは長くなりますが、文字化けを未然に防げます。

// マイナス値混入の典型例
function getSuffix(str, keyword) {
  const idx = str.indexOf(keyword); // 見つからない場合は -1 が返る
  return str.slice(idx + 1);        // idxが-1のとき: slice(0) となり全体が返ってしまう
}

console.log(getSuffix("data.csv", "."));   // "csv"（正常）
console.log(getSuffix("data_csv", "."));   // "data_csv"（"."が無いのに全体が返る=バグ）

本記事の削減時間・効果は弊社の肌感ベースの数値であり、業種・業態・担当者のスキルによって変動します。「Max 20xプランを全社で回すとどの程度まで使い倒せるか」の参考情報としてご覧ください。

// Claude Codeが生成するコード例のパターン
// （指示: 「電話番号の下4桁を取り出す。桁数が足りない場合は空文字を返す」）

function getLastFourDigits(phone) {
  const digitsOnly = phone.replace(/[^0-9]/g, ""); // ハイフン等を除去
  if (digitsOnly.length < 4) {
    return ""; // 桁数不足なら空文字（エラーを投げない安全設計）
  }
  return digitsOnly.slice(-4); // 末尾4桁をsliceで取得
}

console.log(getLastFourDigits("090-1234-5678")); // "5678"
console.log(getLastFourDigits("12"));             // ""（桁数不足）

Claude Codeが生成するコードは高い精度ですが、業務データに特有の境界値（全角混在、桁数不足、空文字、絵文字）は事前に伝えないと考慮漏れが起きることもあります。生成後は「通常データ」「空文字」「異常に短いデータ」「絵文字入りデータ」の4パターン程度で動作確認する習慣をつけると安心です。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？