JavaScriptの文字列を部分的に取り出す方法
はじめに。わからなくて当然のところから一緒に進めます。ここでは、文字列から「欲しいところだけ切り出す」2つの方法、slice と substring を、違いがハッキリわかるように例題で説明します。
文字の位置（インデックス）を理解する
- インデックス: 文字列の先頭は 0、次は 1…と番号がついている。
- 範囲の考え方: 開始位置は「含む」、終了位置は「直前まで」。
例:
const text = "JavaScript";
// J a v a S c r i p t
// 0 1 2 3 4 5 6 7 8 9
slice(start, end) の基本
- 役割: 開始から終了「直前」までを取り出す。
- 終了は省略できる: start から最後まで。
- 負の数が使える: 後ろから数える（-1 は最後の文字）。
例:
const text = "JavaScript";
// 基本
console.log(text.slice(4, 7)); // "Scr"（4: S 〜 7の直前: r）
// 終了省略
console.log(text.slice(4)); // "Script"
// 負の数（後ろから数える）
console.log(text.slice(-6, -3)); // "Scr"（-6: S 〜 -3の直前: r）
// start > end の場合（範囲が逆）
console.log(text.slice(7, 4)); // ""（空文字）
- ポイント: 柔軟で便利。後ろから取りたいときは slice 一択。
substring(start, end) の基本
- 役割: 開始から終了「直前」までを取り出す（基本動作は同じ）。
- 終了は省略できる: start から最後まで。
- 負の数は不可: 負の値は 0 として扱われる。
- start と end が逆でもOK: 自動で小さい方を開始にしてくれる。
例:
const text = "JavaScript";
// 基本
console.log(text.substring(4, 7)); // "Scr"
// 終了省略
console.log(text.substring(4)); // "Script"
// 負の数は 0 になる
console.log(text.substring(-2, 4)); // 実質 substring(0, 4) → "Java"
// 逆順指定でも入れ替え
console.log(text.substring(7, 4)); // "Scr"
- ポイント: 挙動が「安全寄り」。インデックスの順番ミスに優しい。
2つの違いが一目でわかる例
- 負のインデックス
const s = "abcdef";
console.log(s.slice(-3)); // "def"
console.log(s.substring(-3)); // "abcdef"（-3→0扱いで全体）
- start > end のとき
const s = "abcdef";
console.log(s.slice(4, 2)); // ""（空）
console.log(s.substring(4, 2)); // "cd"（2〜4に入れ替え）
使い分けの指針
- 負の数や後ろから取りたい: slice
- インデックスの順序が不安・雑に範囲指定したい: substring
- 迷ったら: 基本は slice を使うと柔軟で困りにくい
初心者向けの例題で練習
例題1: 名前から苗字を取り出す
- 課題: “山田太郎” から “山田” を取り出す（最初の2文字）
const name = "山田太郎";
console.log(name.slice(0, 2)); // "山田"
console.log(name.substring(0, 2)); // "山田"
- 解説: 0から2の直前まで。どちらも同じ結果。
例題2: 郵便番号「123-4567」の後半だけ取りたい
const zip = "123-4567";
const hyphenIndex = zip.indexOf("-"); // 3
console.log(zip.slice(hyphenIndex + 1)); // "4567"
- 解説: ハイフンの次から最後まで。終了省略が便利。
例題3: ファイル名から拡張子を取りたい
const file = "photo.banner.large.png";
const dot = file.lastIndexOf(".");
console.log(file.slice(dot + 1)); // "png"
- 解説: 最後の「.」の位置を見つけて、そこから末尾まで。
例題4: 末尾3文字を抜き出す（負の数のメリット）
const code = "ABCDEFG";
console.log(code.slice(-3)); // "EFG"
- 解説: 負のインデックスなら長さを数えなくてOK。substring ではできない。
例題5: インデックス順をうっかり逆にしても取りたい
const text = "Tokyo";
console.log(text.substring(4, 1)); // "oky"
console.log(text.slice(4, 1)); // ""（失敗）
- 解説: 逆順が起きやすい処理なら substring が安心。
よくあるつまずきと対策
- 終了位置は含まない: 7までと書いても7番は入らない。直前まで。
- 日本語とインデックス: 絵文字や結合文字は1文字に見えても複数コードポイントのことがある。単純な分割で文字化けしやすいときは、正規化や専用ライブラリの利用を検討。
- 開始や終了が範囲外: slice は超えても安全に空文字や末尾で止まる。substring は負の数が 0 扱いになる。
練習課題（自分でやってみる）
- メールからユーザー名: “user@example.com” から “user” を取り出す。
- URLからドメイン: “https://example.co.jp/path” から “example.co.jp” を取り出す。
- 商品コード末尾の数字: “ITEM-2025-000123” の末尾6桁を取り出す（負のインデックスで）。