JavaScript

【JavaScript】sliceとsubstringの違い

本記事では、JavaScriptで文字列のn文字目~n文字目までを取得する時に使うsliceメソッドとsubstringメソッドの違いについて詳しく解説しています。

先輩くん

sliceメソッドとsubstringメソッドの使い方については、別記事にて紹介しています。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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); // => Web

sliceメソッドは、負の値がセットされた場合「後方から指定した値」だと認識します。今回の場合だと対象の文字列は「WebエンジニアWiki」なので最後尾が11番目なので、内部的には2番目の10がend値にセットされます。

str.slice(3, 10); // => エンジニアWi
補足:最後尾が11番目の理由

WebエンジニアWikiは、12文字のため最後尾は12番目じゃないの?と思われがちですが、文字の1文字目は0番目から始まっているため、最後尾は「文字数 – 1」となります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村