javascriptのsliceの使い方【現役SEが紹介】

javascriptのsliceって何だろう。分かりやすく教えてほしいな。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

■本記事の信頼性

ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

初心者向けにjavascripのsliceの書き方についてお伝えします。

sliceは配列もしくは文字列から指定した部分を取得したいときに使用します。

頻繁に使用するわけではないですが、仕様によっては利用することがあるので、こういうことができるんだなぐらいでもいいので覚えておくとよいでしょう。

javascripのsliceとは何か

sliceとは配列もしくは文字列から指定した部分を取得することができます。
どのように使用するかは後で記載しますが、まずはどういったことしているか分かりやすく説明します。

例えば、以下のように文字が並んでいたとします。

A　B　C　D　E

これから1番目の文字Aを取りたい！または2番目から4番目までの文字BCDを取りたい！といった感じに使用します。

配列の場合は要素が存在するので要素の何番目の値が欲しいか指定すれば取得できますし、文字列の場合は1文字が1要素といった感じになります。

指定の仕方として終了番号を省略することも可能です。
いわば、3文字目以降取得するみたいな感じです。

javascripのsliceの書き方

文字列と配列で使用することができますのでそれぞれ見ていきましょう。

文字列の場合

文字列の場合は1文字が1つの要素としてカウントされ、指定した数字で取得する要素を決める形になります。

const str = 'あいうえおかきくけこさしすせそ';

console.log(str.slice(5));
console.log(str.slice(5, 10));
console.log(str.slice(-5));
console.log(str.slice(-5, -3));

結果は以下の通りです。

> "かきくけこさしすせそ" 
> "かきくけこ" 
> "さしすせそ" 
> "さし"

順に見ていきましょう。

まず、数字を一つだけ指定した場合です。
str.slice(5)

これは指定した番号以降の文字を取得する動作をします。

０１２３４５６７８９10 11 12 13 14
あいうえおかきくけこさ し  す  せ  そ

注意点ははじめは０からになります。

次に数字を２つ指定した場合です。
str.slice(5, 10)

０１２３４５６７８９10 11 12 13 14
あいうえおかきくけこさ し  す  せ  そ

先ほどとの違いとしては終了位置を指定する点になります。
ここでの注意点は終了位置の10番目は含まれないという点です。

次にマイナスを指定した場合です。
str.slice(-5)

-15 -14 -13 -12 -11 -10  -9  -8  -7  -6  -5  -4  -3  -2  -1
あ  い   う   え   お   か   き  く  け  こ  さ  し  す  せ  そ

マイナスを指定した場合は、右側からカウントしていきます。
-5を指定した場合は、-5番目から右側の文字列を取得する動作になります。

次にマイナスの数字を２つ指定した場合です。
str.slice(-5, -3)

考え方としては正の数字を指定したときと同じ考えになります。

-15 -14 -13 -12 -11 -10  -9  -8  -7  -6  -5  -4 -3  -2  -1
あ  い   う   え   お   か   き  く  け  こ  さ  し  す  せ  そ

開始位置を-5で終了位置を-3として形です。
こちらも-3番目は含まれません。

配列の場合

続いて配列の場合を見てみましょう。

考え方的には文字列のときと同じです。

const fruits = ['りんご', 'みかん', 'ぶどう', 'いちご', 'もも'];

console.log(fruits.slice(3));
console.log(fruits.slice(1, 4));
console.log(fruits.slice(-2));
console.log(fruits.slice(-3, -1));

結果は以下の通りです。

＞Array ["いちご", "もも"]
> Array ["みかん", "ぶどう", "いちご"]
> Array ["いちご", "もも"]
> Array ["ぶどう", "いちご"]

文字列の場合は1文字単位で指定する形でしたが、配列の場合は要素ごとになります。

０　　　　１　　　　２　　　　３　　　　４
'りんご', 'みかん', 'ぶどう', 'いちご', 'もも'
-5             -4              -3               -2             -1

番号振ってみると上記のような形になります。
後は文字列と同様に開始位置と終了位置を指定すれば対象の要素を取得できるようになります。

どういった時に使用するのか

あまり頻繁に利用することはないですが、私の経験では以下のケースがあります。

配列の要素をある指定した閾値まで取得したいときとかです。

例えば要素数が可変の配列があった場合、はじめの5個まで有効でそれ以降は無視したい時などです。
他には文字列などで、後ろ3文字だけ取りたいとかですかね。
※ファイルの拡張子とか。あまりこの方法で取得することはないですが。

最後に

簡単にですが、javascriptのsliceについて説明してみました。
まとめると以下のようなイメージです。