• 1．JavaScriptのsliceメソッドとは？
• 2．JavaScriptのsliceメソッドの基本構文
• 3．文字列型のsliceメソッドの使い方
• 4．配列型のsliceメソッドの使い方
• 5．さまざまな引数のパターン
• 6．sliceと似たメソッド
  

今回は、文字列・配列を切り抜くsliceメソッドについて学習します。

本記事では、

「sliceメソッドの基本構文は？」「sliceメソッドの使い方は？」

といった内容から

「文字列や配列から要素を切り抜く方法は？」「sliceメソッドと他メソッドとの違いは？」

といった内容まで、初級者エンジニア向けに詳しく解説していきます。

1.     JavaScriptのsliceメソッドとは？

JavaScriptのsliceメソッドとは、文字列や配列からデータの一部分を切り抜くメソッドです。

開始位置と終了位置を指定すると、その間の文字列を切り抜きます。

sliceメソッドは文字列型と配列型の両方に用意されています。

2．JavaScriptのsliceメソッドの基本構文

では、sliceメソッドの基本構文について解説していきます。

sliceメソッドの基本構文は次の通りです。

let str = "文字列";
str.slice( start[省略可能], end[省略可能] );

sliceメソッドは、対象文字列のstart位置からend位置までの範囲を切り抜いた文字列を返します。　

①引数

ここで、sliceメソッドの引数について説明します。

・start

切り抜きの開始位置を示す値です。

0から始まる数値で表し、対象文字列の長さより大きい数値を指定すると、空の文字列が返されます。

マイナス値を設定すると、対象文字列の末尾から指定され、引数を省略すると、対象文字列をそのまま切り抜きます。

サンプルコードで確認してみましょう。

let str = "slice()の引数についての説明";

//startのみ指定
console.log(str.slice(2));

//対象文字列の長さより大きい数値を指定すると空の文字が返される
console.log(str.slice(50));

//startにマイナスを指定すると末尾から数えられる
console.log(str.slice(-3));

//引数なしにすると、そのまま返される
console.log(str.slice());

実行結果：

ice()の引数についての説明

の説明

slice()の引数についての説明

切り抜きの開始位置の数値は0からスタートするため、slice(2)と指定すると、0番目の”s”から数えて2番目の”i”から切り抜かれているのがわかりますね。

・end

2番目の引数endには、切り抜き終了位置を指定します。

ただしend自体は含みません。

例えばslice(2,5)と指定すると、切り抜き開始位置が2文字目になりますが、切り抜き終了位置はend自体を含まないので4文字目になるので注意が必要です。

またマイナス値を使って、末尾からのオフセットとして指定することもできます。

例えばslice(2,-2)とすると、2文字目から、末尾から2番目までを切り抜きます。

サンプルコードで確認してみましょう。

let str = "slice()の引数についての説明";

//startとendを指定（2文字目から4文字目まで）
console.log(str.slice(2,5));

//endにマイナスを指定
console.log(str.slice(2,-2));

実行結果：

ice

ice()の引数についての

②返り値

sliceメソッドは、切り抜かれた文字列または新しい配列を返します。

配列に対するsliceメソッドのサンプルをみてみましょう。

let array = ['ロンドン','ニューヨーク','東京','パリ','シンガポール'];

//startとendを指定し、新しい配列を作成
let newarray = array.slice(2,4);

console.log(newarray);
console.log(array);

実行結果：

[ ‘東京’, ‘パリ’ ]

[ ‘ロンドン’, ‘ニューヨーク’, ‘東京’, ‘パリ’, ‘シンガポール’ ]

このように、sliceメソッドは元の配列は変更せず、元の配列から要素をコピーし新しい配列を返します。

3．文字列型のsliceメソッドの使い方

ここで、文字列型のsliceメソッドの使い方を解説していきます。

①文字列を切り抜く

最初に文字列を切り抜いてみましょう。

let str = "slice()の使い方";

//切り取り開始位置を8番目に指定
console.log(str.slice(8));

実行結果：

使い方

サンプルコードでは、第1引数に8を指定しているので、0文字目の”s”から数えて8文字目の”使”から末尾までを切り抜いています。

②任意の範囲を切り抜く

終了位置を指定すると、任意の範囲を切り抜きます。

let str = "slice()の使い方";

//開始位置と終了位置を指定
console.log(str.slice(0,5));

実行結果：

slice

第2引数のend自体は含まないので、0文字目の”s”から4文字目の”e”までの範囲を切り抜きます。

③文字列の後ろから文字を取得

第1引数にマイナス値を指定すると、文字列の後ろから文字を取得できます。

サンプルコードで確認しましょう。

let str = "slice()の使い方";

//第1引数にマイナスを指定
console.log(str.slice(-1));
console.log(str.slice(-2));
console.log(str.slice(-3));

実行結果：

方

い方

使い方

4．配列型のsliceメソッドの使い方

ここでは、配列型のsliceメソッドの使い方について解説していきます。

①配列の要素を切り抜く

配列型のsliceメソッドは、文字列でのsliceとは異なり配列のインデックス番号で位置を指定します。

let array = ['ロンドン','ニューヨーク','東京','パリ','シンガポール'];

//開始位置を指定
console.log(array.slice(3));
//開始位置と終了位置を指定
console.log(array.slice(1,3));
//末尾を取得
console.log(array.slice(-1));

実行結果：

[ ‘パリ’, ‘シンガポール’ ]

[ ‘ニューヨーク’, ‘東京’ ]

[ ‘シンガポール’ ]

配列での開始位置も、文字列と同じように0番目から数えます。

サンプルコードのようにslice(3)と指定すると、0番目の”ロンドン”から数えて3要素目の”パリ”以降を抜き出します。

5．さまざまな引数のパターン

sliceメソッドのさまざまな引数のパターンについて解説します。

①引数なしの場合

startを指定しなかった場合、0番目から切り抜きます。

endも省略されるので、対象の文字列や配列をそのまま切り抜きます。

let str = "引数なしのパターン";

//引数なし
console.log(str.slice());

実行結果：

引数なしのパターン

②マイナス値を指定した場合

次に、引数にマイナス値を指定した場合を紹介します。

引数にマイナスを指定すると、対象の文字列や配列の末尾から数えます。

サンプルコードで確認してみましょう。

let array = ['ロンドン','ニューヨーク','東京','パリ','シンガポール'];

//startとendを指定し、新しい配列を作成
console.log(array.slice(1,-2))

実行結果：

[ ‘ニューヨーク’, ‘東京’ ]

サンプルコードの引数は(1,-2)を指定しているので、1番目の”ニューヨーク”から、末尾から2番目の”パリ”より前までの要素を切り抜くので、返り値は[ ‘ニューヨーク’, ‘東京’ ]になります。

6．sliceと似たメソッド

ここからは、sliceと似た機能を持つメソッドを紹介します。

それぞれの特徴を把握し、用途に合った使い方をしましょう。

以下で、これら3つのメソッドを詳しく紹介していきます。

①substringメソッド

substringは、sliceと同様に文字列を分割したり任意の箇所を切り抜いたりするメソッドです。

サンプルコードで確認してみましょう。

let str = "sliceとsubstringの違い";

//sliceの場合
console.log(str.slice(2,5));
//substringの場合
console.log(str.substring(2,5));

実行結果：

ice

ice

同じ結果になることがわかりますね。

では、このふたつの違いはどこにあるのでしょうか？

let str = "sliceとsubstringの違い";

//sliceの場合（マイナス値を指定）
console.log(str.slice(-3));
//substringの場合（マイナス値を指定）
console.log(str.substring(-3));

//sliceの場合（start >= end）
console.log(str.slice(5,2));
//substringの場合（start >= end）
console.log(str.substring(5,2));

実行結果：

の違い

sliceとsubstringの違い

ice

このように、substringの引数にマイナス値を指定すると0に変換され、先頭から抽出されます。

また、”start位置 >= end位置”の場合、sliceメソッドは空文字を抽出しますが、substringは引数の(5,2)を(2,5)に自動で変換し、結果を抽出します。

②substrメソッド

次にsubstrメソッドについて解説します。

substrも文字列を抽出するメソッドです。

substrの第1引数はslice同様に開始位置を指定しますが、第2引数には開始位置から抽出する文字数を指定します。

let str = "sliceとsubstrの違い";

//sliceの場合
console.log(str.slice(3,6));
//substrの場合
console.log(str.substr(3,6));

実行結果：

ceと

ceとsub

実行結果から、substr(3,6)は、3文字目から6文字分を抽出していることがわかりますね。

③spliceメソッド

最後にspliceメソッドを見ていきましょう。

spliceメソッドはArray（配列）オブジェクトの組み込みメソッドで、配列の要素を置換したり、任意の要素を削除したりできます。

let array = ['slice','substring','substr','splice'];

//sliceの場合
let result1 = array.slice(1,3);
console.log(result1);
console.log(array);

//spliceの場合
let result2 = array.splice(1,3);
console.log(result2);
console.log(array);

実行結果：

[ ‘substring’, ‘substr’ ]

[ ‘slice’, ‘substring’, ‘substr’, ‘splice’ ]

[ ‘substring’, ‘substr’, ‘splice’ ]

[ ‘slice’ ]

sliceとspliceの大きな違いは、元の配列に影響を及ぼす点です。

sliceは元の配列を変更しませんが、spliceは元の配列から要素を削除し、その削除した要素が返り値となります。　

※掲載された社名、製品名は、各社の商標及び登録商標です。