substringとsliceの違い【JavaScript】

文字列の一部分を抽出するときに使われる関数である、substringとsliceの細かな違いについてまとめます。

この記事では、基本的に、substringslice の順で記述していきます。

  1. substringとsliceの概要
    1. 構文
    2. 概要
    3. 例文
    4. なにが違うのか
  2. 引数の大小について
    1. substringの場合
      1. 例文
      2. 解説
    2. sliceの場合
      1. 例文
      2. 解説
  3. 0未満の値が指定された場合について
    1. substringの場合
      1. 例文
      2. 解説
    2. sliceの場合
      1. 例文
      2. 解説
  4. まとめ

substringとsliceの概要

構文

// substring
str.substring(start[, end])
// slice
str.slice(start[, end])

概要

どちらも引数は2つで、2つ目の引数endは省略可能。(構文中の[]はあってもなくてもいいという意味)

文字列の最初の文字を0文字目として、
start文字目から、end文字目の手前までの文字列を返します。
(endを省略した際は、start文字目から最後の文字までを返します。)

startendが等しい場合は、どちらの関数も空の文字列を返します。

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));    //んにちは、世界!

なにが違うのか

一見同じに見えますが、以下の場合の処理が違います。

  1. 引数(startend)の大小が逆の場合
  2. 0未満の数字が指定された場合

上記2つの違いについて以下で解説していきます。

引数の大小について

start<=endとなる場合はほとんど同じですが、
start>endとなった場合は、動作が違います。

substringの場合

startendが交換されたものとして実行されます。

例文

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未満の値が指定された場合について

startendに引数として、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文はすべて同じ意味になります。
ひとつひとつを比較しながら考えると理解しやすいかと思います。

まとめ

状況に応じて使い分けれると良いですね。

使うときにさっと調べて、さっと使える程度に違いを理解しておきましょう。

この記事書いてたら覚えちゃいましたけど笑

最近の記事