初心者向け：部分取得（slice / substring）の基本
文字列から「一部だけ取り出す」ための代表的なメソッドが slice と substring です。どちらも「開始位置と終了位置」を指定して新しい文字列を返しますが、挙動に違いがあります。配列でも slice は使えます。
文字列の slice と substring の違い
- 基本構文:
- slice(start, end)
- start から end「未満」までを取り出す
- マイナス（負数）OK。末尾から数えられる
- start > end のとき、空文字を返す
- substring(start, end)
- start から end「未満」までを取り出す
- 負数は 0 として扱われる（末尾からは数えられない）
- start と end が逆でも自動で入れ替わる
- slice(start, end)
const s = "abcdef";
// slice: 負数OK、範囲はそのまま
console.log(s.slice(2, 5)); // "cde"
console.log(s.slice(-2)); // "ef"（末尾から2文字）
console.log(s.slice(5, 2)); // ""（start > end は空）
// substring: 負数は0、start/endが逆なら入れ替え
console.log(s.substring(2, 5)); // "cde"
console.log(s.substring(-2, 3)); // "abc"（-2 → 0）
console.log(s.substring(5, 2)); // "cde"（2と5を入れ替え）
- 結論: 末尾から取りたい・負数を使いたいなら slice が便利。初心者は「基本は slice、特殊事情で substring」を覚えると安全です。
文字列の部分取得でよく使うパターン
- 先頭から n 文字
const t = "JavaScript";
console.log(t.slice(0, 4)); // "Java"
- 末尾から n 文字
console.log(t.slice(-6)); // "Script"
- 途中の範囲（start 以上、end 未満）
console.log(t.slice(4, 10)); // "Script"
- ドメインや拡張子の取り出し
const file = "app.min.js";
const ext = file.slice(file.lastIndexOf(".") + 1); // "js"
- 固定幅データの切り出し
const line = "20251210T090000";
const y = line.slice(0, 4); // "2025"
const m = line.slice(4, 6); // "12"
const d = line.slice(6, 8); // "10"
配列の slice（非破壊コピー）
- 配列でも slice は使える（substring は文字列専用）
- 部分配列を取得: 元の配列は変わらない（非破壊）
- 負数OK: 末尾からの相対指定ができる
const arr = ["a","b","c","d"];
console.log(arr.slice(1, 3)); // ["b","c"]
console.log(arr.slice(-2)); // ["c","d"]
console.log(arr); // 元はそのまま
- 配列の浅いコピーを作る
const src = [1,2,3];
const copy = src.slice(); // または [...src]
よくあるつまずきと注意点
- ラベル: slice は end を含まない（「未満」）。1文字分ずれやすいので意識する。
- ラベル: substring は負数を 0 にするため、末尾から指定できない。
- ラベル: substring は start と end を入れ替えるが、slice は空文字になる。コードの意図に合わせて選ぶ。
- ラベル: 配列で部分取得は slice、一方で編集（挿入/削除）は splice（別メソッド）と混同しない。
ミニ練習
- 問1: 「abcdef」から「bcd」を取り出せ。
const s = "abcdef";
console.log(s.slice(1, 4)); // "bcd"
- 問2: 文章の先頭 10 文字だけを表示せよ。
const text = "テンプレートリテラルは便利です";
console.log(text.slice(0, 10));
- 問3: ファイル名から拡張子を取り出せ（末尾からの指定を使う）。
const file = "image.photo.png";
const ext = file.slice(file.lastIndexOf(".") + 1);
console.log(ext); // "png"
- 問4: 配列の最後の2要素を取得せよ。
const items = [10, 20, 30, 40, 50];
console.log(items.slice(-2)); // [40, 50]
まとめ
- slice は負数対応で扱いやすく、end は未満。文字列と配列で使える。
- substring は負数不可で、start/end を入れ替える仕様。文字列専用。
- 部分取得は「start 以上、end 未満」を意識し、末尾からの指定なら slice を選ぶ。