substringとsliceの違い【JavaScript】
公開日:文字列の一部分を抽出するときに使われる関数である、substringとsliceの細かな違いについてまとめます。
この記事では、基本的に、substring
→ slice
の順で記述していきます。
substringとsliceの概要
構文
// substring str.substring(start[, end]) // slice str.slice(start[, end])
概要
どちらも引数は2つで、2つ目の引数end
は省略可能。(構文中の[]はあってもなくてもいいという意味)
文字列の最初の文字を0文字目として、start
文字目から、end
文字目の手前までの文字列を返します。
(end
を省略した際は、start
文字目から最後の文字までを返します。)
start
とend
が等しい場合は、どちらの関数も空の文字列を返します。
str.length
より大きい数字が指定された場合は、str.length
として処理されます。
例文
var msg = "こんにちは、世界!"; console.log(msg.substring(1,3)); //んに console.log(msg.slice(1,3)); //んに console.log(msg.substring(1)); //んにちは、世界! console.log(msg.slice(2)); //にちは、世界! console.log(msg.substring(1, msg.length + 1)); //んにちは、世界! console.log(msg.slice(1, msg.length + 100)); //んにちは、世界!
なにが違うのか
一見同じに見えますが、以下の場合の処理が違います。
- 引数(
start
とend
)の大小が逆の場合 - 0未満の数字が指定された場合
上記2つの違いについて以下で解説していきます。
引数の大小について
start<=end
となる場合はほとんど同じですが、start>end
となった場合は、動作が違います。
substringの場合
start
とend
が交換されたものとして実行されます。
例文
var msg = "こんにちは、世界!"; console.log(msg.substring(1,3)); //んに console.log(msg.substring(3,1)); //んに
解説
自動で入れ替えられます。
小さい方の文字数から、大きい方の文字数の手前までが対象です。substring
の場合は上記例文の上の2つの文は同じ意味ということです。
sliceの場合
空の文字列が返されます。
例文
var msg = "こんにちは、世界!"; console.log(msg.slice(1,3)); //んに console.log(msg.slice(3,1)); // (空の文字列)
解説
slice
の場合は交換されないので、空の文字列が返されます。
0未満の値が指定された場合について
start
やend
に引数として、0未満の数値が渡された場合の処理が違います。
substringの場合
0と見なします。
例文
var msg = "こんにちは、世界!";
console.log(msg.substring(-4, 3)); //こんに
console.log(msg.substring(1, -5)); //こ
解説
負の数は0として扱われます。
例文の下の文の場合は(1, -5) → (1, 0) → (0, 1)
というような感じです。
sliceの場合
str.length
を足した値として計算されます。
言い換えると、文字列の終端から数えた文字数、ということになります。
例文
var msg = "こんにちは、世界!"; console.log(msg.slice(1, -1)); //んにちは、世界 console.log(msg.slice(1, -6)); //んに console.log(msg.slice(1, msg.length - 6)); //んに console.log(msg.slice(-8, 3)); //んに console.log(msg.slice(msg.length - 8, 3)); //んに
解説
負の値はstr.length
が足された値として計算されるため、
下の4文はすべて同じ意味になります。
ひとつひとつを比較しながら考えると理解しやすいかと思います。
まとめ
状況に応じて使い分けれると良いですね。
使うときにさっと調べて、さっと使える程度に違いを理解しておきましょう。
この記事書いてたら覚えちゃいましたけど笑