本記事では、JavaScriptで文字列のn文字目～n文字目までを取得する時に使うsliceメソッドとsubstringメソッドの違いについて詳しく解説しています。
sliceメソッドとsubstringメソッドの使い方については、別記事にて紹介しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
sliceとsubstringの2つの違い
sliceメソッドとsubstringメソッドの違いは、「end値よりもstart値の方が大きい場合」「start/end値に負の値をセットした時」に表れます。それぞれ確認してみましょう。
end値よりもstart値の方が大きい場合
1つ目の違いは、end値よりもstart値の方が大きい場合の時に表れます。
let str = "WebエンジニアWiki";
console.log(str.substring(8, 3)); // => エンジニア
console.log(str.slice(8, 3)); // => 上記のコードは、start値に8をセットしend値に3をセットしています。sliceメソッドでは空文字が返されているのに対し、substringメソッドでは「エンジニア」の文字列が取得出来ています。
何故、substringメソッドで文字列が取得出来ているのかというと、substringメソッドはend値よりもstart値の方が大きい場合は値を自動で入れ替える性質を持っているからです。つまり、内部的に以下のようなコードに書き換わっています。
str.substring(3, 8) // => エンジニアstart/end値に負の値をセットした時
2つ目の違いは、start/end値に負の値をセットした時に表れます。
let str = "WebエンジニアWiki";
console.log(str.substring(3, -2)); // => Web
console.log(str.slice(3, -2)); // => エンジニアWi上記のコードは、start値に3をセットしend値に-2をセットしています。substringメソッドでは「Web」の文字列が取得され、sliceメソッドでは「エンジニアWi」の文字列が取得出来ています。
substringメソッドは、負の値がセットされた場合「0」と認識します。更にend値よりもstart値の方が大きい場合は、自動で順番を入れ替える性質を持っているため、内部的に以下のようなコードに書き換わっています。
str.substring(0, 3); // => Websliceメソッドは、負の値がセットされた場合「後方から指定した値」だと認識します。今回の場合だと対象の文字列は「WebエンジニアWiki」なので最後尾が11番目なので、内部的には2番目の10がend値にセットされます。
str.slice(3, 10); // => エンジニアWiWebエンジニアWikiは、12文字のため最後尾は12番目じゃないの？と思われがちですが、文字の1文字目は0番目から始まっているため、最後尾は「文字数 – 1」となります。
DMM WEBCAMP 
CodeCamp 
TechAcademy 
