本記事では、JavaScriptで文字列のn文字目～n文字目までを取得する時に使うsliceメソッドとsubstringメソッドの違いについて詳しく解説しています。
先輩くんsliceメソッドとsubstringメソッドの使い方については、別記事にて紹介しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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」となります。
