【JavaScript】substring()メソッドとは？slice()との違いは？

こんにちは！CodeClub965のKです！

今回は、JavaScriptで文字列に対するメソッドであるsubstring()について解説したいと思います。

「substring()」メソッドは、「slice()」メソッドと同じように文字列の中から任意の文字列だけを取得することができます。
また、引数の指定方法や出力結果もほとんど同じなんです。

slice()メソッドについて詳しく知りたい方は以下の記事をどうぞ！

また、似たようなメソッドにsubstr()メソッドもあるので、そちらの記事も気になる方はぜひ読んでみてください。

substring()

最初にも説明しましたが、substring()メソッドは、文字列の中から任意の文字列だけを取得するメソッドです。

基本構文は以下の通りです。

str.substring(indexStart[, indexEnd])

引数の意味は以下の通りです。

str.substring( 開始位置, 終了位置(省略可) )

文頭にも言いましたが、substring()とslice()は、引数の指定方法も出力結果もほとんど同じです。
まずはそこをサンプルコードで確認してみましょう。

コード例

var str = "コードクラブ965";

var result1 = str.slice(0, 6);
var result2 = str.substring(0, 6);

console.log("slice：" + result1);
console.log("substring：" + result2);

■実行結果

slice：コードクラブ
substring：コードクラブ

上記の例をみても分かるように、引数の指定方法も、出力の結果も同じことが分かります。

slice()メソッドとの違い

では、slice()メソッドとの違いは何でしょうか？

相違点として以下の2点の場合の出力結果が変わってきます。

・引数がマイナス値の場合
・引数の「開始位置 > 終了位置」の場合

コード例で確認してみましょう。

コード例

var str = 'コードクラブ965';

//引数がマイナス値の場合
var result1 = str.slice(0, -3);
var result2 = str.substring(0, -3);

console.log('result1：' + result1);
console.log('result2：' + result2);

//開始位置が終了位置よりも大きい場合（開始位置 > 終了位置）
var result3 = str.slice(6, 0);
var result4 = str.substring(6, 0);

console.log('result3：' + result3);
console.log('result4：' + result4);

■実行結果

//引数がマイナス値の場合
result1：コードクラブ
result2：

//開始位置が終了位置よりも大きい場合（開始位置 > 終了位置）
result3：
result4：コードクラブ

一つずつ解説します。

引数がマイナス値の場合

まず、「slice()」は、文字列の末尾から数え始めるのに対し、「substring()」は条件に関係なく 0 に変換されます。

そのため、「str.substring(0, -3)」は、 「str.substring(0, 0) 」ということになります。
だから、出力結果が「空文字」で出力されています。

開始位置が終了位置よりも大きい場合（開始位置 > 終了位置）

次に、開始位置が終了位置よりも大きい値の場合、「slice()」は空文字を返しています。
それにに対して「substring()」は引数を逆転した時の出力結果と同じです。

上記の例でも、「str.substring(6, 0)」は、「str.substring(0, 6)」に変換されています。
そのため出力結果は、「コードクラブ」と出力されるんですね。

最後に

今回はsubstring()について解説しました。

slice()との違いにフォーカスして解説しましたが、substr()メソッドとも似ているようで違うのでしっかり確認しておきましょう！

確認する場合は、slice()もsubstr()も既に記事があるので、最初に紹介した記事から読んでみてください！

それでは、また！

Follow me!