文字列を扱っているときに「一部を切り出したい！」と思うのはよくあることです。

JavaScriptに用意されているの三つの文字列の抽出メソッド、substr、slice、substringについて、違いを簡潔にまとめておきます。

substr

このメソッドは非推奨になりました。
新たな使用は避け、既存のコードは更新する必要があります。

substrメソッドは、指定された位置から始まる特定の文字数の文字列を返します。このメソッドの第一引数は開始位置を示しますが、第二引数は他2つのメソッドと違い「取得する文字数」です。

例えば、text.substr(0, 5)は文字列textの最初の5文字を返します。

slice

sliceメソッドは、指定された開始位置から終了位置までの部分文字列を抽出して返します。

負の数を引数として受け取った場合、文字列の末尾からの位置として扱います。
例えば、text.slice(-5, -1)は文字列textの「末尾から5文字目」から「末尾から2文字目」までの文字列を返します。

もし開始位置より終了位置が手前の場合、空文字列を返します。
例えば、text.slice(5, 3)は終了位置が開始位置より小さい（＝手前）なので空文字列になります。

substringメソッドもsliceと同じく、指定された開始位置から終了位置までの部分文字列を抽出して返します。

負の数を引数として受け取った場合、それを0として扱います。そのため、text.substring(-5, -1)は実質text.substring(0, 0)と同じになり、空文字列を返します。

もし開始位置より終了位置が手前の場合、開始位置と終了位置を入れ替えて処理します。
つまり、text.substring(5, 3)はtext.substring(3, 5)として扱われ、2文字の文字列が返されます。

個人的にはずっとsliceしか使ってなかったので勉強になりました。

この記事が文字列の切り出しについて理解を深める一助となれば幸いです。