slice・substring・splitメソッド

2024 2/05

2022.07.31 2024.02.05

記事の内容

sliceとは

sliceは、名前の如く文字列をスライスするメソッドです。

指定したスタート位置〜エンド位置までの文字列を取得しますが・・・少し癖と特徴があります。
ざっくりしたイメージは下のイラストで問題ないのですが、細かい特徴もあるので順番に①〜⑤まで説明して行きます。

slice 特徴① [スタート位置のみ記載]

これはスタート位置のみの記載になっており、指定したスタート位置から文字列の最後まで取得する形になります。

例

var str = "あいうえお";

console.log(str.slice(1));

出力結果

// str.slice(1)
いうえお

slice 特徴② [スタート位置のが大きい値]

これの特徴は、スタート位置の値がエンド位置の値以上になると空文字を返します。
不等式で言えば以下のような雰囲気ですね。

[スタート位置] ≧ [エンド位置]

例

var str = "あいうえお";

console.log(str.slice(1,1));
console.log(str.slice(2,1));

出力結果

// str.slice(1,1)

// str.slice(2,1)

slice 特徴③ [スタート位置がマイナス記載]

これはスタート位置がマイナスの場合、少し癖がありまして・・・
末尾から数え指定の位置から文字列の最後までを取得するのですが、末尾は-1スタートなので注意が必要！！

例

var str = "あいうえお";

console.log(str.slice(-3));

出力結果

// str.slice(-3)
うえお

末尾は0ではなく-1からスタートするので注意！！

slice 特徴④ [エンド位置がマイナス記載]

エンド位置がマイナスの場合は、スタート位置から末尾(エンドから数えた位置)までの文字列を取得します。

例

var str = "あいうえお かきくけこ";

console.log(str.slice(1,-1));

出力結果

// str.slice(1,-1)
いうえおかきくけ

slice 特徴⑤ [文字列よりも大きい数字]

スタート位置が文字列数を超えている場合は、空文字を返します。

例

var str = "あいうえお";

console.log(str.slice(100));

出力結果

// str.slice(100)

substringとは

substringは、指定したスタート位置〜エンド位置までの文字列を取得するのでsliceにとても似ています。

しかし、少し違いますのでsubstringの説明の後で
違いについても見ていきましょう。

sliceとsubstringの違いとは?

sliceとsubstringは、
エンド位置の値がマイナス値や
スタート値がエンド値より大きい値の時に
互いに違う動きを示します。

例

var str = "あいうえお";

// エンドがマイナスの値
console.log('slice(1,-1) : ' + str.slice(1,-1));
console.log('substring(1,-1) : ' + str.substring(1,-1));

// スタートのが大きい値
console.log('slice(2,1) : ' + str.slice(2,1));
console.log('substring(2,1) : ' + str.substring(2,1));

// マイナスの値
console.log('slice(-3) : ' + str.slice(-3));
console.log('substring(-3) : ' + str.substring(-3));

出力結果

// エンドがマイナスの値
slice(1,-1) : いうえ
substring(1,-1) : あ

// スタートのが大きい値
slice(2,1) :
substring(2,1) : い

// マイナスの値
slice(-3) : うえお
substring(-3) : あいうえお

splitとは

splitも、名前の如く文字列を分裂させるメソッドになります。

第1引数で指定した文字で分割をして配列化し、第2引数では分割数を指定できます。
こちらの特徴の2種類を説明して行きます。

split 特徴① [第1引数のみ]

splitの第1引数は、分割をする際に指定する文字になります。

例

var str = "10.20.30.40.50";
var array = str.split('.');

// 第1引数のみ
console.log("array[0] : " + array[0]);
console.log("array[1] : " + array[1]);
console.log("array[2] : " + array[2]);
console.log("array[3] : " + array[3]);
console.log("array[4] : " + array[4]);

出力結果

// 第1引数のみ
array[0] : 10
array[1] : 20
array[2] : 30
array[3] : 40
array[4] : 50

split 特徴② [第2引数(分割数)]

第2引数の分割数とは、指定の文字で分割された個数分を取得します。

下記の図のように第2引数を3と指定すると、A(1個目)・B(2個目)・C(3個目)のC以上は取得ぜず、
例]で示したようにそれ以上はundefinedになってしまいます。

例

var str = "10.20.30.40.50";
var array = str.split('.',3);

// 第2引数(分割数)
console.log("array[0] : " + array[0]);
console.log("array[1] : " + array[1]);
console.log("array[2] : " + array[2]);
console.log("array[3] : " + array[3]);
console.log("array[4] : " + array[4]);

出力結果

// 第2引数(分割数)
array[0] : 10
array[1] : 20
array[2] : 30
array[3] : undefined
array[4] : undefined