こんにちは。フロントエンドの現場で長年コードを書き続けていると、ふとした瞬間に「あれ、これどっちだっけ？」と立ち止まることがよくあります。特に、JavaScriptの文字列操作メソッドである `slice()` と `substring()` は、その代表格です。
「似たようなことができるなら、どっちを使っても同じじゃない？」なんて思っていると、ある日突然、思いもよらないバグに足元をすくわれることになります。
今日は、この二つのメソッドの「性格の違い」を、ちょっとした日常の例え話を交えながら紐解いていきましょう。大丈夫、仕組みさえ分かれば怖くありませんよ。
—
1. 文字列は「果物の詰め合わせ」だと思ってください
例えば、`”JavaScript”` という文字列があるとします。これは、箱の中に `J`, `a`, `v`, `a`, `S`, `c`, `r`, `i`, `p`, `t` という10個の果物が一列に並んでいる状態をイメージしてください。
`slice()` と `substring()` は、この箱から「特定の範囲の果物を取り出す」ためのカッターナイフのような道具です。どちらも「ここからここまで切り取る」という命令を出しますが、「切り取り方」のこだわりが少しだけ違います。
—
2. 最大の違いは「マイナス（負の数）」の扱い
ここが一番のつまずきポイントです。
- `slice()` は「後ろから数える」のが得意
- `substring()` は「マイナスは0（先頭）として扱う」という独特のルールがある
slice() の場合
`slice(-3)` と書くと、「後ろから3番目から最後まで」と解釈してくれます。これは非常に直感的ですよね。
substring() の場合
`substring(-3)` と書くと、「あ、マイナスだね。じゃあ0（一番左）からだね」と、マイナスを無視して先頭から切り取りを開始します。
const fruit = “JavaScript”;
// sliceは後ろから数えて「ipt」を取り出す
console.log(fruit.slice(-3)); // 結果: “ipt”
// substringはマイナスを「0」とみなして「JavaScript」全部を取り出す
console.log(fruit.substring(-3)); // 結果: “JavaScript”
「マイナスを使うと消えるはずなのに、なぜか全部出てきた！」という事故は、だいたいこの `substring` のお節介な仕様が原因なんです。
—
3. 引数が「逆転」した時の挙動
次に、切り取る範囲を「開始位置」と「終了位置」で指定する場合を考えてみましょう。
- `slice()` は「引数が逆転してたら、空っぽを返す（素直）」
- `substring()` は「引数が逆転してたら、勝手に順番を入れ替えて計算する（おせっかい）」
例えば `slice(5, 2)` と書くと、「開始が5で終了が2？ 無理だよ！」と判断して、何も返しません。
しかし、`substring(5, 2)` と書くと、「あ、順番間違えてるね。じゃあ `substring(2, 5)` として扱ってあげるよ」と、勝手に補正してくれるのです。
const text = “JavaScript”;
// sliceは「5番目から2番目まで」なんて無理だから、空っぽを返す
console.log(text.slice(5, 2)); // 結果: “”
// substringは気を利かせて「2番目から5番目」に置き換えて処理する
console.log(text.substring(5, 2)); // 結果: “Scr”
—
4. 結局、どっちを使えばいいの？
結論から言うと、現代のJavaScript開発では `slice()` を使うのが圧倒的におすすめです。
理由はシンプルです。`slice()` のほうが挙動が素直で、配列（Array）でも同じ名前のメソッドが使えるからです。JavaScriptの歴史の中で生まれた `substring()` は、どうしても過去の互換性のために残っている「古き良き（でも少し扱いが難しい）機能」という側面が強いのです。
まとめ：今日から使える判断基準
1. 基本は `slice()` を使おう：後ろから数えたい時（`slice(-1)`など）に大活躍します。
2. `substring()` を見かけたら要注意：誰かが「あえて」使っているのか、単なる書き間違いなのか、文脈を疑ってみてください。
3. 迷ったら実験：ブラウザのデベロッパーツール（F12キー）で、すぐに試してみるのが一番の近道です。
プログラミングの世界には、こうした「似ているけれど微妙に違う」仕様がたくさんあります。でも、焦る必要はありません。こうやって一つずつ、そのメソッドの「性格」を知っていけば、いつの間にかあなたの武器になっていきます。
さあ、今日もエディタを開いて、少しだけコードを書いてみませんか？ その小さな試行錯誤が、あなたを最高のエンジニアに育ててくれるはずです。応援していますよ！
コメント