JavaScript: substring()とslice()の違い

substring()メソッドとslice()メソッドの違いを説明します。
どちらも指定した範囲の文字列を取得する時に使用します。

指定する範囲が特殊なケースにおいて両者の違いが出てきます。 この特殊なケースは実用上あまり使う機会はないと思いますが、記述しておきます。

以下の説明では、開始位置・終了位置をstart、end として次のように記述します。

str.substring(start, end)
str.slice(start, end)

まずは通常のケースを確認

var str = 'abcde';

// 通常のケース
console.log(str.substring(1, 3));  // bc
console.log(str.slice(1, 3));      // bc

通常の場合はどちらも取得できる文字はで同じです。この場合は'bc'。 start文字目からend-1文字目までを取得します。

start > end のケース

var str = 'abcde';

// start > end のケース
console.log(str.substring(3, 1));  // bc
console.log(str.slice(3, 1));      // 空文字

「start > end」 の場合、substring()はstartとendを入れ替えます。
ですからこの場合はstr.substring(1, 3)と同じです。

slice()は入れ替えを行いません。結果的に「空文字」を返します。

endが負数のケース

var str = 'abcde';

// end がマイナス
console.log(str.substring(3, -1)); // abc

console.log(str.slice(3, -1));     // d
console.log(str.slice(1, -1));     // bcd

「endが負数」の場合、substring()は負数を0に変換します。 そして「start > end」なのでstartとendを入れ替えます。 その結果str.substring(0, 3)となり'abc'を返します。

slice()は負数を末尾からの文字数と見なします。 '-1'に該当する文字は'd'なのでstartから'd'までの文字列を返します。

JavaScript入門