substr をやさしく説明(超入門)
初心者向けに噛み砕いて、たっぷり例題付きで説明します。読みやすく段階を追って学べるようにしますね。では行きます!
substr は 「文字列の中から、ある位置から何文字分だけ切り出す」 メソッドです。元の文字列は変わりません(非破壊)。
基本の書き方:
文字列.substr(start, length)
JavaScriptstart(開始位置): 切り出しを始めるインデックス(番号)。0 が最初の文字。負の数も使えます(後述)。length(文字数): 何文字分切り出すか。省略すると「開始位置から最後まで」を返します。
直感的イメージ
長い紙(文字列)があって、start はハサミを入れる「始めの場所」、length は切り取る「長さ(何cm分)」だと思ってください。length を省くと「始めから端まで全部」切ります。
例を見てみよう(実行済みの出力付き)
let s = "JavaScript";
console.log( s.substr(0,4) ); // "Java" (インデックス0から4文字)
console.log( s.substr(4,6) ); // "Script" (インデックス4から6文字)
console.log( s.substr(4) ); // "Script" (length省略 → 4から最後まで)
console.log( s.substr(-6,3) ); // "Scr" (末尾から6文字手前を開始位置にして3文字)
console.log( s.substr(-3) ); // "ipt" (末尾から3文字分を最後まで)
console.log( s.substr(3,0) ); // "" (lengthが0 → 空文字)
JavaScript1つずつ説明:
s.substr(0,4)→ 最初(0番目)から4文字:「Java」s.substr(4,6)→ インデックス4(’S’)から6文字:「Script」s.substr(4)→ 文字数省略 → 4から最後まで。s.substr(-6,3)→ 負の開始位置は 末尾から数える。-6は末尾から6文字手前に当たる位置(ここだと ‘S’)。そこから3文字を取る → “Scr”。s.substr(3,0)→ lengthが0なら空文字。
注意/落とし穴(実務で困らないために)
- インデックスは 0 スタート(よくある初心者ミス)
- 開始位置が文字列の長さを超えると空文字が返る
"abc".substr(10, 2) // -> ""
JavaScript- length が 0 または負の数なら空文字を返す
- 負の start は末尾からの位置(便利だが直感とずれることも)
- ブラウザ互換・将来のこと
substrは一部のドキュメントで 非推奨(deprecated) とされることがあります。代わりにsliceやsubstringを使う場面も多いです(後述で違いを説明)。長期的にはsliceを覚えておくと安心です。
substr と slice / substring の違い(簡潔)
substr(start, length):開始位置 + 文字数で切る。startに負の数が使える(末尾から数える)。slice(start, end):開始位置 + 終点(end)位置で切る(endは切り取らない位置)。負の数は末尾から数える。- 例:
s.slice(2,5)はインデックス 2,3,4 の3文字を返す。
- 例:
substring(start, end):sliceに似るが、負の値は 0 として扱われ、引数の順序を入れ替えると自動で調整される(便利だが振る舞いが違う)。
短く言うと:substr は「どこから・何文字」、slice/substring は「どこから・どこまで」と考えてください。
使いどころの例(実践的)
- フィールドから最初の N 文字だけ取り出す(例:プレビュー表示)
function preview(text, n){
return text.substr(0, n);
}
console.log(preview("今日はいい天気ですね", 6)); // 先頭6文字(日本語でもOK)
JavaScript- 末尾から数えて拡張子を取り出す(ただし
lastIndexOf('.')を使う方が汎用的)
let file = "photo.jpeg";
let ext = file.substr(file.lastIndexOf('.') + 1); // "jpeg"
JavaScript練習問題
各問題に対して、該当コードを実行して結果を予想→確認してみてください。
初級
let a = "abcdef"; a.substr(2, 2);→ 何が返る?let b = "東京2020"; b.substr(2);→ 何が返る?
中級
let c = "HelloWorld"; c.substr(-5, 3);→ 結果は?let d = "abc"; d.substr(5, 2);→ 結果は? なぜ?
上級
let e = "123456789"; e.substr(2, -3);→ 結果は? なぜ?let f = "こんにちは"; f.substr(-2, 3);→ 結果は?(UTF-16の注意点を考えよう)
解答と解説
a.substr(2,2)→"cd"
説明:インデックス2(’c’)から2文字分を取る。b.substr(2)→"京2020"
説明:インデックス2から最後まで。日本語+数字も混在で問題なし。c.substr(-5,3)→"Wor"
説明:末尾から5文字目(’W’)を開始地点として3文字取る → “Wor”。d.substr(5,2)→""(空文字)
説明:開始位置が文字列長(3)を超えているため、空文字が返る。e.substr(2, -3)→""(空文字)
説明:length が負なので空文字が返る(仕様)。f.substr(-2,3)→ 多くの場合"にちは"(ただし絵文字やサロゲートペアが入ると期待通りにならない可能性あり)
説明:-2は末尾から2文字前(ここでは「に」)が開始、そこから3文字分取る → 「に」「ち」「は」。ただし JavaScript の文字列は UTF-16 単位で扱われるため、サロゲートペア(例:一部の絵文字)を含むと「思った文字数とズレる」ことがある点に注意。
デバッグのヒント(期待と結果が違ったら)
- まず
console.log(文字列.length)で長さを確かめる。 - 開始位置に負の数を渡しているか、渡すべきでないかを再確認。
- マルチバイト文字(絵文字など)を扱う場合、
Array.from(str)を使ってコードポイント単位で扱う方法もある(高度向け)。
視覚化アイデア(学習を助ける小ワザ)
アニメにしたいなら、文字列の各文字の下にインデックス数字を表示して、start と start+length-1 のインデックスをハイライトしてスライドさせると直感的です。たとえば slice と substr を並べて、開始点が動くアニメを作ると理解が早まります。
まとめ
substr(start, length)は「どこから(start)」「何文字(length)」を切り取るメソッド。startに負の数が使えるのが特徴。lengthが負だと空文字になる。- 将来的には
sliceを使うことが多いので、両方の違いは覚えておくと便利。
