JavaScript slice: 文字列や配列を切り取る方法と使い方を徹底解説！

JavaScript

2023.04.14

本記事では、JavaScriptの slice()メソッドについて詳しく解説します。slice()メソッドは、文字列や配列を切り取るためのメソッドで、JavaScriptの開発において非常に便利な機能です。

slice()メソッドの使い方や、substring()メソッドとの違い、そして実践的な使用例を紹介します。slice()メソッドを学ぶことでJavaScriptの開発においてより効率的なコーディングができるようになるでしょう。

sliceメソッドとは
sliceメソッドの注意点
substring()メソッドとの違い
まとめ

sliceメソッドとは

slice()メソッドは、文字列や配列から一部分を切り取るために使用されるメソッドです。切り取りたい文字列や配列の開始位置と終了位置を指定して、その範囲の要素を取り出すことができます。

以下は文字列をslice()で切り取るサンプルです。

const str = "JavaScript slice() メソッドの使い方";
const slicedStr = str.slice(0, 10);

console.log(slicedStr); // "JavaScript"

この例では、strという文字列の最初の10文字を取得するために、slice()メソッドを使用しています。slice(0, 10)の場合、開始位置が0で、終了位置が10（開始位置を含まない）であるため、slicedStr変数には「JavaScript」という文字列が代入されます。
※先頭は「0」で表現し、1番目は「0」になります。2番目は「1」です。

配列を切り取る場合は以下のようになります。

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(0, 3);

console.log(slicedArr); // [1, 2, 3]

arrという配列の最初から3番目までの要素を取得するために、slice()メソッドを使用しています。slice(0, 3)の場合、開始位置が0で、終了位置が3（開始位置を含まない）であるため、slicedArr変数には [1, 2, 3] という配列が代入されます。

sliceメソッドの注意点

終了位置が開始位置より小さい場合は空の配列や文字列を返す

終了位置が開始位置より小さい場合、空の配列や文字列を返します。例えば、以下のように、開始位置が2で終了位置が1の場合、空の配列が返されます。文字列も同様です。

const arr = [1, 2, 3];
const slicedArr = arr.slice(2, 1);

console.log(slicedArr); // []

負のインデックスを使用する場合の挙動

slice()メソッドでは、負のインデックスを使用することもできます。負のインデックスを使用する場合、インデックスは末尾から数えられます。例えば、配列 [1, 2, 3, 4, 5] に対して、以下のように負のインデックスを使用して要素を切り取ることができます。

const arr = [1, 2, 3, 4, 5];

// 「末尾から2番目」～末尾までの要素を切り取る
const slicedArr = arr.slice(-2);

console.log(slicedArr); // [4, 5]

const str = "JavaScript";

// 「先頭から3番目」～「末尾から5番目」までの文字列を切り取る
const slicedStr = str.slice(2, -5);

console.log(slicedStr); // "vaS"

slice() メソッドで切り取った部分は元の配列や文字列とは異なるオブジェクトとして扱われる

slice()メソッドで切り取った部分は、元の配列や文字列とは異なる新しい配列や文字列として扱われます。つまり、slice()メソッドで切り取った部分を変更しても、元の配列や文字列に影響はありません。

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(0, 3);

slicedArr[0] = 10; // 切り取った配列の先頭に「10」を入れる

console.log(arr); // [1, 2, 3, 4, 5] // 元の配列に影響はない
console.log(slicedArr); // [10, 2, 3] // 先頭に10が入った状態の切り取り後の配列

slice() メソッドは引数なしでも使用可能

slice()メソッドは、引数を指定せずに使用することもできます。この場合、元の配列や文字列の全体が切り取られた新しい配列や文字列が返されます。

例えば、以下のように、引数を指定せずに配列を切り取る場合、元の配列と同じ要素を持つ新しい配列が返されます。

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(); //　開始位置、終了位置を指定しない

console.log(slicedArr); // [1, 2, 3, 4, 5] // arrと同じ配列を持つ別のオブジェクト

substring()メソッドとの違い

slice()メソッドと同様に、文字列を切り取るために substring()メソッドも使用することができます。しかし、 slice()メソッドと substring()メソッドには以下のような違いがあります。

slice()メソッドは開始位置と終了位置の両方に負の数値を指定することができますが、substring()メソッドは負の数値を指定すると0として扱われます。
slice()メソッドでは開始位置が終了位置よりも大きい場合、要素や文字列が逆順に切り取られますが、 substring()メソッドでは開始位置と終了位置が逆転している場合、自動的に修正されます。

const str = "JavaScript";

// slice()メソッドによる文字列の切り取り
console.log(str.slice(2, 4)); // "va"
console.log(str.slice(-3, -1)); // "ip"

// substring()メソッドによる文字列の切り取り
console.log(str.substring(2, 4)); // "va"
console.log(str.substring(-3, -1)); // "" // マイナスは無条件で「0」として扱われる

// 終了位置が開始位置よりも小さい場合の挙動の違い
console.log(str.slice(4, 2)); // ""
console.log(str.substring(4, 2)); // "va" //　自動的に「4」と「2」が入れ替えられ(2, 4)になる