【2026年7月最新】JavaScript substr・substring・slice 文字列切り出し完全ガイド｜非推奨から移行法・実務例・Claude Code活用まで

この記事の内容

1. 01substr・substring・sliceの違いを先に把握する
2. 02substr()の使い方（非推奨）とdeprecation理由
3. 03substring()の使い方と負のインデックスの落とし穴
4. 04slice()の使い方｜負のインデックスが最も直感的
5. 053メソッドの引数・挙動を完全比較
6. 06日本語・Unicode・絵文字を正しく扱う方法
7. 07実務ユースケース別テンプレートコード集
8. 08at()・split()・正規表現との組み合わせ
9. 09Claude Codeで文字列処理コードを自動生成する
10. FAQよくある質問

// 3つのメソッドの構文比較
const str = "Hello World";

// ① substring(開始インデックス, 終了インデックス) ← 推奨
str.substring(0, 5)  // → "Hello"   （0番目から5番目の直前まで）

// ② slice(開始インデックス, 終了インデックス) ← 推奨（負のインデックス可）
str.slice(0, 5)      // → "Hello"   （substrとほぼ同じ動作）
str.slice(-5)        // → "World"   （末尾から5文字）

// ③ substr(開始インデックス, 文字数) ← 非推奨！
str.substr(0, 5)     // → "Hello"   （0番目から5文字分）

📚 用語解説

インデックス（Index）：文字列の各文字の位置番号。JavaScriptでは0から始まる。"Hello"の場合、H=0、e=1、l=2、l=3、o=4。終了インデックスを指定する場合、その位置の文字は含まれない（"Hello".slice(0,3) → "Hel"、3番目のlは含まれない）。

3つのうちどれを使えばいいか迷う場面では、slice()を選べば間違いありません。substrと同じく開始位置からの指定が直感的で、かつ負のインデックスも自然に使え、非推奨でもない。substring()は引数の順序が逆転するエッジケースがあるため、シンプルに使うならsliceの方が安全です。

MDN Web Docsでは substr() は「Web標準から削除される予定（deprecated）」と明記されています。古いコードの読解には役立ちますが、新規コードでsubstr()を書くことは推奨しません。slice() または substring() を使いましょう。

const str = "Hello World";
//            01234567890  ← インデックス

// 基本: substr(開始インデックス, 文字数)
str.substr(0, 5)   // → "Hello"    （0番目から5文字）
str.substr(6, 5)   // → "World"    （6番目から5文字）
str.substr(6)      // → "World"    （第2引数省略=末尾まで）

// 負の開始インデックス（末尾からのオフセット）
str.substr(-5)     // → "World"    （末尾から5文字）
str.substr(-5, 3)  // → "Wor"      （末尾から5文字目を起点に3文字）

// 第2引数が0または負数の場合
str.substr(0, 0)   // → ""         （空文字列）
str.substr(0, -1)  // → ""         （負数の文字数は空文字列）

// substrからsliceへの移行パターン
// substr(start, length) → slice(start, start + length)

// Before (非推奨)
str.substr(3, 5)

// After (推奨)
str.slice(3, 3 + 5)  // = str.slice(3, 8)

// 第2引数なし（末尾まで）の場合
str.substr(3)       // Before
str.slice(3)        // After（同じ書き方でOK）

// 負の開始インデックスの場合
str.substr(-5)      // Before
str.slice(-5)       // After（同じ書き方でOK）

const str = "Hello World";
//            01234567890

// 基本: substring(開始インデックス, 終了インデックス)
str.substring(0, 5)    // → "Hello"    （0〜4番目まで、5番目を含まない）
str.substring(6, 11)   // → "World"    （6〜10番目まで）
str.substring(6)       // → "World"    （第2引数省略=末尾まで）

// ★ 特殊挙動①: 引数が逆転した場合は自動的にスワップ
str.substring(5, 0)    // → "Hello"    （substringは(0,5)として処理する）

// ★ 特殊挙動②: 負のインデックスは 0 として扱われる
str.substring(-3, 5)   // → "Hello"    （-3は0として扱われ、(0,5)と同じ）
str.substring(3, -1)   // → "Hel"      （-1は0扱い、(0,3)にスワップ）

substring()では、負のインデックスをそのまま「末尾からのオフセット」として使うことができません。-5を渡しても末尾から5文字前ではなく、0（先頭）として扱われます。末尾からの相対位置で切り出したい場合は slice() を使いましょう。

📚 用語解説

substring()の引数スワップ仕様：str.substring(start, end) で start > end の場合（例: substring(8, 3)）、JavaScriptは自動的に引数を入れ替えてsubstring(3, 8)として処理する。エラーは発生しないが、意図しない結果になることがある。sliceは同じ状況で空文字列を返す。

const str = "Hello World";
//            01234567890   (正のインデックス)
//          -11-10-9-8-7-6-5-4-3-2-1  (負のインデックス)

// 基本: slice(開始インデックス, 終了インデックス)
str.slice(0, 5)     // → "Hello"    （0〜4番目まで）
str.slice(6, 11)    // → "World"    （6〜10番目まで）
str.slice(6)        // → "World"    （第2引数省略=末尾まで）

// 負の開始インデックス（末尾からのオフセット）
str.slice(-5)       // → "World"    （末尾から5文字）
str.slice(-5, -2)   // → "Wor"      （末尾から5文字目〜末尾から2文字目の直前）
str.slice(-5, 9)    // → "Wo"       （負と正のインデックスを混在させることも可能）

// 開始 > 終了の場合（substrとは異なり空文字列を返す）
str.slice(5, 0)     // → ""         （スワップされない、空文字列）
str.slice(-1, -5)   // → ""         （終了が開始より前、空文字列）

JavaScriptのArray.prototype.slice()もString.prototype.slice()と全く同じシグネチャ（引数の構造）を持ちます。文字列のsliceを覚えれば配列のsliceも同じ感覚で使えるため、一度理解すれば応用範囲が広いです。

const str = "Hello World";  // length = 11

// ===== 基本ケース（ほぼ同じ結果）=====
str.substring(0, 5)   // "Hello"
str.slice(0, 5)        // "Hello"
str.substr(0, 5)       // "Hello"（非推奨）

// ===== 第2引数省略（末尾まで）=====
str.substring(6)       // "World"
str.slice(6)           // "World"
str.substr(6)          // "World"（非推奨）

// ===== 負の開始インデックス =====
str.slice(-5)          // "World"   ← 末尾から5文字
str.substring(-5)      // "Hello World" ← -5を0として扱う（全体）
str.substr(-5)         // "World"   ← substrは負のstart対応（非推奨）

// ===== 開始インデックス > 終了インデックス =====
str.slice(8, 3)        // ""        ← 空文字列
str.substring(8, 3)    // "lo Wo"  ← 自動スワップ（substring(3,8)と同じ）

// ===== 引数がundefined =====
str.slice(undefined, 5)    // "Hello"   ← undefinedは0として扱う
str.substring(undefined, 5)// "Hello"   ← undefinedは0として扱う

// ===== 文字列長を超えたインデックス =====
str.slice(0, 100)      // "Hello World"  ← 末尾まで（エラーにならない）
str.substring(0, 100)  // "Hello World"  ← 末尾まで（エラーにならない）
str.substr(0, 100)     // "Hello World"  ← 末尾まで（非推奨）

📚 用語解説

サロゲートペア（Surrogate Pair）：Unicode文字のうち、U+10000以上の文字（絵文字・特殊記号・一部漢字）をJavaScriptの内部表現UTF-16で格納する際に2つのコードユニットを組み合わせて1文字を表す方式。javascriptの.lengthや通常のslice/substring/substrはコードユニット単位で数えるため、サロゲートペア文字は「1文字」ではなく「2」と数えられてしまう。

// 通常の日本語は問題なし（ひらがな・漢字はBMP内）
const jp = "こんにちは";
jp.length          // 5（正しい）
jp.slice(0, 3)     // "こんに"（正しい）

// 絵文字はサロゲートペア（2コードユニット = 長さ2として扱われる）
const emoji = "Hello😀World";
emoji.length       // 13（"😀"が2としてカウントされるため12ではなく13）
emoji.slice(5, 6)  // ""（壊れた文字！絵文字の前半だけ）
emoji.slice(5, 7)  // "😀"（2つ取れば正しく取得できる）

// 𠮷（U+20BB7 / 吉の旧字）もサロゲートペア
const special = "𠮷野家";
special.length     // 4（"𠮷"が2文字分にカウント）
special.slice(0, 2) // "𠮷"（2コードユニット取ると正しい）
special.slice(0, 1) // ""（壊れる）

// 正しく1文字ずつ扱う方法
// ① スプレッド演算子で配列化（サロゲートペアを正しく1文字として扱う）
[...emoji].length  // 12（絵文字を1文字としてカウント）
[...emoji].slice(5, 6).join('')  // "😀"（正しく取得）

// ② Array.from()も同じ
Array.from(emoji).length  // 12
Array.from(emoji).slice(5, 6).join('')  // "😀"

// ③ String.prototype.at()は正のインデックスのみ（サロゲートペアは非対応）
emoji.at(5)   // ""（at()もコードユニット単位なので壊れる）

// ④ Intl.Segmenter（最新のAPIで書記素クラスタ単位に分割）
const segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });
const segments = [...segmenter.segment(emoji)].map(s => s.segment);
segments.length       // 12
segments.slice(5, 6)  // ["😀"]

日常的によく使う日本語（ひらがな・カタカナ・一般的な漢字）は Unicode BMP（U+0000〜U+FFFF）内に収まるため、1文字 = 1コードユニットです。通常のslice()・substring()で正しく動作します。サロゲートペアの問題が起きるのは、主に絵文字・特殊記号・一部の稀な漢字を含む文字列を処理するときです。

// ファイル名から拡張子を取得（例: "photo.jpg" → ".jpg"）
function getExtension(filename) {
    const dotIndex = filename.lastIndexOf('.');
    if (dotIndex === -1) return '';  // ドットがなければ拡張子なし
    return filename.slice(dotIndex);  // ドット含む拡張子
}

getExtension('photo.jpg')       // → ".jpg"
getExtension('archive.tar.gz')  // → ".gz"（最後のドット以降）
getExtension('README')          // → ""（拡張子なし）

// 拡張子なしのファイル名部分だけ取得
function getBaseName(filename) {
    const dotIndex = filename.lastIndexOf('.');
    if (dotIndex === -1) return filename;
    return filename.slice(0, dotIndex);
}

getBaseName('photo.jpg')  // → "photo"
getBaseName('archive.tar.gz')  // → "archive.tar"

// URLからホスト名以降のパスを取り出す
function getPathFromUrl(url) {
    // "https://example.com/path/to/page?q=test" → "/path/to/page?q=test"
    const protocolEnd = url.indexOf('://');
    if (protocolEnd === -1) return url;

    const hostStart = protocolEnd + 3;
    const pathStart = url.indexOf('/', hostStart);
    if (pathStart === -1) return '/';

    return url.slice(pathStart);
}

getPathFromUrl('https://example.com/blog/article-1')
// → "/blog/article-1"

// クエリパラメータ前のパスだけ取り出す
function getCleanPath(url) {
    const path = getPathFromUrl(url);
    const qIndex = path.indexOf('?');
    return qIndex === -1 ? path : path.slice(0, qIndex);
}

getCleanPath('https://example.com/blog/article-1?utm_source=google')
// → "/blog/article-1"

// テキストをmaxLen文字で切り捨てて末尾に"..."を付ける
function truncate(text, maxLen, suffix = '...') {
    if (text.length <= maxLen) return text;
    return text.slice(0, maxLen - suffix.length) + suffix;
}

truncate('JavaScriptで文字列を切り出す完全ガイド', 15)
// → "JavaScriptで文字列..."（15文字以内に収める）

truncate('短いテキスト', 20)
// → "短いテキスト"（maxLen以下ならそのまま）

// 単語の途中で切れないようにする版（英語テキスト向け）
function truncateAtWord(text, maxLen) {
    if (text.length <= maxLen) return text;
    const truncated = text.slice(0, maxLen);
    const lastSpace = truncated.lastIndexOf(' ');
    return (lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated) + '...';
}

// "0312345678"（10桁）→ "03-1234-5678" に変換
function formatPhoneNumber(phone) {
    const digits = phone.replace(/\D/g, '');  // 数字のみ抽出

    if (digits.length === 10) {
        // 市外局番2桁 + 4桁 + 4桁
        return digits.slice(0, 2) + '-' + digits.slice(2, 6) + '-' + digits.slice(6);
    }
    if (digits.length === 11) {
        // 携帯: 090/080/070 3桁 + 4桁 + 4桁
        return digits.slice(0, 3) + '-' + digits.slice(3, 7) + '-' + digits.slice(7);
    }
    return phone;  // 不明な形式はそのまま
}

formatPhoneNumber('0312345678')    // → "03-1234-5678"
formatPhoneNumber('09012345678')   // → "090-1234-5678"

// "1234567"（7桁）→ "123-4567" に変換
function formatPostalCode(zip) {
    const digits = zip.replace(/\D/g, '');
    if (digits.length === 7) {
        return digits.slice(0, 3) + '-' + digits.slice(3);
    }
    return zip;
}
formatPostalCode('1234567')  // → "123-4567"

const str = "Hello World";

// at(): インデックスで1文字取得（負のインデックスが使える）
str.at(0)    // → "H"
str.at(-1)   // → "d"（最後の文字）
str.at(-2)   // → "l"（後ろから2番目）

// 配列アクセス（負のインデックスは使えない）
str[0]       // → "H"
str[-1]      // → undefined（JavaScriptではNG）

// at() と slice(-1) の使い分け
str.at(-1)       // 最後の1文字だけ取りたいとき → at(-1)
str.slice(-3)    // 最後のN文字を取りたいとき → slice(-N)

📚 用語解説

String.prototype.at()メソッド：ES2022（ES13）で追加されたJavaScriptの文字列メソッド。str.at(n) でn番目の文字を返す。負のインデックス（at(-1)で最後の文字）が使える点がstr[n]との最大の違い。ただし内部的にはUTF-16コードユニット単位のため、サロゲートペア（絵文字等）は正しく扱えない。シンプルな1文字取得にはat()、複数文字の切り出しにはslice()を使う。

// CSVの最初のカラムだけ取得
const csv = "田中,28,東京,エンジニア";
const fields = csv.split(',');
fields[0]   // → "田中"

// URLのパス部分をスラッシュで分割して最後のセグメントを取得
const url = "https://example.com/blog/2026/article-title";
const path = url.slice(url.indexOf('/', 8));  // "/blog/2026/article-title"
const segments = path.split('/').filter(s => s !== '');  // ["blog","2026","article-title"]
segments[segments.length - 1]  // → "article-title"（最後のセグメント）

// メールアドレスのドメイン部分を取得
const email = "user@example.com";
const atIndex = email.indexOf('@');
const domain = email.slice(atIndex + 1);  // → "example.com"
const localPart = email.slice(0, atIndex); // → "user"

// HTMLタグを含む文字列からテキストだけ抽出（正規表現 + replace）
const html = "
Hello World
";
const textOnly = html.replace(/<[^>]+>/g, '');  // → "Hello World"

// 文字列から数字部分だけ抽出してslice
const mixed = "定価12,800円（税込）";
const numStr = mixed.match(/[\d,]+/)?.[0] || '';  // → "12,800"
const numOnly = numStr.replace(',', '');           // → "12800"

// 日付文字列から年・月・日を取り出す（slice vs 正規表現）
const dateStr = "2026-07-19";
// slice での分割
const year  = dateStr.slice(0, 4);   // "2026"
const month = dateStr.slice(5, 7);   // "07"
const day   = dateStr.slice(8, 10);  // "19"

// 正規表現での分割（可読性重視）
const [, y, m, d] = dateStr.match(/(\d{4})-(\d{2})-(\d{2})/) || [];

📚 用語解説

match()メソッド：文字列が正規表現に一致するかを調べ、一致した部分を配列で返すメソッド。グループキャプチャ（()で囲んだ部分）も別々の要素として返す。一致しない場合はnullを返すため、?.[0]のようなnull安全アクセスが必要。slice/substringと組み合わせると、動的なパターンマッチ後の切り出しが可能。

NEXT STEP

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