JavaScriptのsliceとsubstringの違い！文字列の切り出し

文字列操作でよく使うメソッドに「slice」と「substring」があります。同じように見えて、引数の扱い・負の値・順序などに細かな違いがあり、意図しない動きを引き起こすことがあります。この違いをしっかり理解することで、コードのバグを減らし、可読性と安定性を高めることができます。ここではJavaScript slice substring 違いを軸に、それぞれの使い方・挙動の比較・おすすめの使い分け方法を解説します。

JavaScript slice substring 違い：基本的な挙動の比較

まずはsliceとsubstringが文字列から部分文字列を取り出すときに基本としてどのような動きをするかを理解します。通常の動作や共通点、引数が省略されたときの挙動など、基本動作を押さえることが違いを理解する土台になります。

共通する仕様：sliceとsubstringの類似点

両者は、文字列の部分を切り出して新しい文字列を返すという点で共通しています。元の文字列は変更されません。
引数が一つだけ（開始位置だけ）を渡した場合、その位置から末尾までを取り出します。
開始位置と終了位置が同じならば空文字列を返します。
終了位置が文字列の長さより大きい場合には、文字列の長さが終了位置として扱われます。

引数が省略された場合や順序の扱い

slice／substringともに、終了位置(end)を省略すると開始位置から文字列末尾まで切り出します。また、sliceは終了位置を省略しても、開始位置が負の値でも動作し、負の値は文字列の末尾からのオフセットとして解釈されます。
一方で、substringは負の値を与えると0とみなし、また開始位置が終了位置より大きい場合には自動的に両者を入れ替えて処理します。

開始・終了引数に負の値がある場合の違い

sliceでは開始または終了に負の値を使うと、文字列の末尾から数える位置として解釈されます。例としてslice(-3)は末尾から3文字を取得します。
substringでは負の引数またはNaNを渡すとそれらを0とみなします。つまり負値の扱いが異なるため、sliceでは便利な負値の表現が可能ですが、substringにはそれがありません。

実例で理解するsliceとsubstringの違い

ここでは具体的なコード例を使って、sliceとsubstringでどう違う結果になるかを示します。実際に試すと頭に入りやすいため、サンプルを確認しながら動作を比較してみましょう。

引数の順序が逆になったときの挙動

文字列「example」を使い、sliceとsubstringで開始位置と終了位置を入れ替えた例を比較します。

• substring(5,2)：開始が終了より大きいため内部で入れ替えられてsubstring(2,5)として文字が取得されます。
• slice(5,2)：開始が終了より大きいため空文字列を返します。

このように引数の順序が逆でもsubstringは動作しますが、sliceはより直感的な扱いであり、間違った順序では空文字列が返るためエラーを検出しやすいという利点があります。

負の引数を使った例

文字列「HelloWorld」に対してsliceとsubstringで負の引数を渡した例です。

• slice(-5)：末尾から5文字「World」が取得されます。
• slice(2,-2)：開始位置2から末尾から2文字手前まで「lloWor」が返ります。
• substring(-3,4)：負の開始位置が0とみなされ、substring(0,4)と同じで「Hell」になります。
• substring(3,-2)：終了位置も負なので0とみなされ、引数の順序が入れ替えられてsubstring(0,3)で「Hel」になります。

このように負の値を伝えるとsliceは末尾から数える使い方ができ、substringはほぼ負の値を無視する形になります。

省略引数や境界値の取り扱い

引数が省略された場合や範囲が文字列長を超える場合の扱いも異なります。

• slice(2)：2文字目から末尾まで。
• substring(2)：同様に2文字目から末尾まで。
• slice(0,100)：文字列長が100未満なら末尾まで。
• substring(0,100)：同じく末尾まで。
• slice(5,5)：空文字列。
• substring(5,5)：空文字列。

共通する部分も多いですが、負の値の扱いや入れ替えの有無で結果が予想と変わることがあります。

substrとの関係も含めた比較：sliceとsubstringとsubstrの使い分け

substrメソッドはslice／substringとは少し異なり、第二引数が「長さ」を表す点が特徴です。最新のJavaScriptではsubstrは廃止予定あるいは非推奨扱いされており、新たに書くコードではsliceやsubstringを使うことが推奨されます。substrがどのように異なるかを含めて比較しておきましょう。

substrの概要と非推奨の理由

substrは第一引数に開始位置、第二引数に取り出す**長さ**を指定します。例えばsubstr(2,3)は位置2から3文字取り出します。
ただし、仕様書の付録（Annex）に位置づけられており、将来的に廃止される可能性があります。コードの保守性や互換性を考えると、新しいプロジェクトではsubstrの利用は避けるべきです。

substrとslice／substringの動作の違い

substrを使った場合、sliceやsubstringを使ったときと比べて引数の意味が変わります。

• substr(start, length)：開始位置と長さ。負の開始位置を使うと文字列末尾から数える。
• slice(start, end)：開始位置と終了位置。負の値で末尾から数える。
• substring(start, end)：開始位置と終了位置。負の値は0扱い、引数が逆でも入れ替え処理される。

たとえば取り出したい文字数が固定の場合substrが直感的ですが、負の値や引数順序の自由度を考えるとsliceがより柔軟性があります。

どのような場面でどれを選ぶかの判断基準

現場での選択基準としては以下のようなものがあげられます。

• 負のインデックスを使いたいとき→sliceを使う。
• 引数の順序が誤っても機能させたいとき→substringが役立つ。
• 固定長を切り出したい古いコードの場合→substrが使われていることがあるが、新コードではsliceやsubstringに置き換える。
• 可読性・直感性を重視するならsliceが比較的理解しやすい。

このように用途によって使い分けることで、意図しないバグを減らし、コードが安定して動くようになります。

パフォーマンスと最新のベストプラクティス

違いを理解した上で、実際にどちらを使うべきか、パフォーマンス・保守性の観点から見てみましょう。最近のブラウザ環境やエンジンの最適化状況を踏まえた最新情報を紹介します。

ブラウザエンジンとパフォーマンスの傾向

sliceとsubstringはどちらも非常に軽量な操作ですが、負の値の処理などでsliceが若干のコストを伴う場合があります。とはいえ、一般的な文字列長の範囲では差は微小です。
また、substrは非推奨扱いであるため、エンジン側で最適化が不十分だったり、将来削除対象になる可能性があるため信頼性に欠けることがあります。

可読性・保守性を重視したコードの書き方

他の開発者や将来の自分が見たときに直感的であることが重要です。
sliceを使うと負の値で末尾から切る意図が明確です。substringは「引数逆転」機能を知っていない人からは動作が意外に感じられることがあります。
したがって、意図が明確であればsliceを基本とし、substringは引数自体を入れ替えて使いたいような場面で限定的に用いるのが良いです。

最新仕様と非推奨機能の扱い

現在のECMAScript仕様ではsubstrは非標準的な付録規定の中にあり、将来的なサポート削除の可能性があります。
ブラウザの互換性を大切にするなら、substrではなくsliceまたはsubstringへの置き換えが推奨されます。
また、新しい方法やライブラリの文字列操作関数を使う際にも、内部処理でsubstrを呼び出していないか確認することが望ましいです。

よくある誤解とトラブル対応

sliceとsubstringを使うときに混乱しやすいポイントやバグになりやすい例を取り上げ、その対処方法を整理します。

開始位置が終了位置より大きいケースの誤用

substringを使うと開始位置が終了位置より大きいと自動で入れ替えられますが、sliceでは空文字列が返ります。
この違いを理解せずにsliceを使ってしまうと、意図しない空文字列を返してしまい表示やロジックがおかしくなることがあります。
対策としては、常に引数の順序をチェックするか、自分で条件を書いて開始位置と終了位置を整える処理を入れておくことです。

負の値を誤って渡してしまう問題

substringに負の値を渡すと0とみなされるため、結果がsliceで期待するものとは大きく異なることがあります。
たとえばsubstring(-5,2)だとsubstring(0,2)となり、slice(-5,2)では末尾から5文字目から位置2の手前までという意味になるため大きな違いがあります。
意図が末尾から数えたい場合はsliceを使うか、手動で文字列の長さを計算してsubstringに正しい引数を渡すようにします。

古いコード・ライブラリのsubstr使用の処理

多くの古いコードやライブラリではsubstrが使われています。substrは現状では動作しますが、仕様上非推奨なので将来的には削除される可能性があります。
そのため、既存コードを保守する場合はテストをしっかり行い、可能ならsliceまたはsubstringに置き換えるマイグレーションを検討することが望ましいです。
置き換える際はsubstr(start,length)をslice(start,start+length)またはsubstring(start,start+length)に変えることで同等の結果が得られます。

おすすめの使い分けパターンと実践的なコード例

違いが分かったところで、実際の日常開発におけるおすすめの使い分けパターンをコード例とともに紹介します。これにより、どちらを選ぶべきか迷わなくなるでしょう。

末尾部分を取得したいとき

文字列の末尾から一定文字数を取得したい場合、sliceが適しています。
例としてファイル名の拡張子を取得したいときに、文字列の最後のドット以降を切り出したいというケースがあります。
sliceを使うと

• str.slice(-extensionLength)
• str.slice(str.lastIndexOf(‘.’)+1)

と負の値またはlastIndexOfを活用した直感的な方法が使えます。

引数の順序が不確実なケースでの安全策

受け取った引数がstart,endともに可変で、どちらが大きいか分からないときにはsubstringの入れ替え機能があると便利です。
たとえばユーザー入力でstartとendを指定できるUIがあり、start > endという誤入力があり得る場合、substringを使えばその順序を気にせずに処理できます。
ただし負の値を使いたい場合や意図の明確さを求める場合は、引数の検証を入れるかsliceを使って自前で制御をするのが良いです。

固定長の部分文字列を確実に切り出したいとき

例えばログの冒頭何文字を表示する、パスワードのプレースホルダーなど、取り出す長さが決まっているケースではsubstrが直感的ですが、非推奨であるためslice(start, start＋length)を使うのが将来に対する安心です。
substringでも同様にできますが、負の値や引数順序が入れ替わる機能があるため、start<endを保証できるならsubstringでも問題ありません。

まとめ

JavaScript slice substring 違いを理解することは、文字列操作での予期せぬバグを防ぎ、可読性と保守性を高めるために非常に重要です。
基本的な共通点としてはどちらも部分文字列を返し、元の文字列を変更しないという点があります。
主な違いは引数の扱いで、sliceは負の引数による末尾からの切り出しが可能であるのに対し、substringは負の値を0とみなします。引数の順序が逆の場合も、substringは入れ替えて処理するのに対し、sliceでは空文字列が返るという違いがあります。
substrは第二引数が長さである点で異なりますが、仕様上非推奨であり新規コードでは使わないことが推奨されます。
実践的には、負の値や末尾からの切り出しが必要な場面や可読性を重視するならsliceを基本とし、substringは引数順序が安全で、負の値を使わない場面で選ぶのが適切です。
この違いを意識してコードを書くことで、文字列処理がより予測可能で安心できるものになります。