文字列の一部を取り出す方法の基本
プログラミングって「文字の並び」から必要な部分だけを取り出すことがよくあります。初心者がつまずきやすいのは「どこから」「どれくらい」取り出すかの指定。ここでは substr() を中心に、よく使われる substring() と slice() も合わせて、例題でしっかり身につけましょう。
substrの使い方
- 役割: 文字列の一部を「開始位置」と「長さ」で取り出す
- 書き方:
文字列.substr(開始位置, 文字数)
基本例
const str = "ABCDEFG";
// 2文字目から3文字取り出す（0始まり）
console.log(str.substr(2, 3)); // "CDE"
- 開始位置は0から数える: 0が最初の文字、1が次の文字
- 文字数を省略すると最後まで:
"JavaScript".substr(4); // "Script"
- 開始位置に負の数を使える（後ろから数える）:
"ABCDE".substr(-2, 2); // "DE"
- 文字数が0や負なら空文字:
"Hello".substr(2, 0); // ""
- 元の文字列は変わらない（新しい文字列を返す）
補足:
substr()は古いメソッドで、今はslice()やsubstring()の使用が推奨されることが多いです。ただし、既存コードを読むために動きを知っておくのは大事。
substringとsliceの違い
似ている3つのメソッドの「指定の仕方」と「負の値の扱い」が違います。ここを押さえると迷いません。
- substr(開始位置, 文字数): 長さで指定。負の開始位置OK（後ろから数える）。
- substring(開始位置, 終了位置): 終了位置は「含まない」。負の値は0として扱う。順番を入れ替えてもOK（小さい方が開始になる）。
- slice(開始位置, 終了位置): 終了位置は「含まない」。負の値は「後ろから数える」挙動をする。
同じ結果になる例
const s = "JavaScript";
// "Script" を取り出したい
console.log(s.substr(4)); // "Script"
console.log(s.substring(4)); // "Script"
console.log(s.slice(4)); // "Script"
違いが出る例（負の値）
const s = "ABCDE";
console.log(s.substr(-2, 2)); // "DE" （後ろから2文字目開始）
console.log(s.substring(-2, 2)); // "AB" （-2は0として扱われる → 0〜2）
console.log(s.slice(-2)); // "DE" （後ろから2文字目以降）
よくある場面別の実践例
- 最後のN文字を取りたい
const id = "USER-001234";
// 末尾4文字
console.log(id.slice(-4)); // "1234"（推奨）
console.log(id.substr(-4)); // "1234"
- 先頭から決まった長さだけ取りたい
const msg = "Hello, world!";
console.log(msg.substr(0, 5)); // "Hello"
console.log(msg.slice(0, 5)); // "Hello"
console.log(msg.substring(0, 5));// "Hello"
- 特定範囲（開始〜終了）の部分を取りたい
const code = "XYZ-123-ABC";
// "123" を取りたい（3〜6の範囲、6は含まない）
console.log(code.slice(4, 7)); // "123"（推奨）
console.log(code.substring(4, 7)); // "123"
- 後ろから数えた位置から取りたい
const s = "Ticket#000789";
// 後ろから3文字目から2文字取りたい
console.log(s.substr(-3, 2)); // "78"
console.log(s.slice(-3, -1)); // "78"
つまずきポイントとコツ
- インデックスは0始まり: 最初の文字は0。1ではない。
- 終了位置は含まれない（substring/slice）:
slice(2, 5)は 2,3,4 の文字。5は含まない。 - 負の値の扱いが違う:
substringは負を0扱い、slice/substrは「後ろから数える」。 - 何を基準に選ぶか
- 範囲で切りたい（開始〜終了）:
sliceが直感的でおすすめ - 長さで切りたい（開始＋文字数）:
substrの形が分かりやすいが、モダンさならslice - 負の値を使いたい:
sliceが安全
- 範囲で切りたい（開始〜終了）:
練習問題
練習1：メールのドメインだけ取り出す
- 入力:
"user@example.com" - 期待:
"example.com"
const email = "user@example.com";
// ここにあなたのコードを書いてみましょう
// ヒント: "@" の位置を探して、そこから後ろを取り出す（indexOf + slice）
練習2：商品コードの末尾4桁
- 入力:
"ITEM-0004567" - 期待:
"4567"
const code = "ITEM-0004567";
// ヒント: 後ろから数えるなら slice(-4)
練習3：先頭の5文字だけ
- 入力:
"Programming" - 期待:
"Progr"
const word = "Programming";
// ヒント: slice(0, 5) でも substr(0, 5) でもOK
練習4：中央の範囲切り出し
- 入力:
"ABCDEF" - 期待:
"BCD"（1〜4の間の3文字）
const s = "ABCDEF";
// ヒント: slice(1, 4) で 1,2,3 の文字