【JavaScript】文字列、配列をsliceで分割する

 

文字列、配列操作で便利なslice()メソッドの使い方です。

引数に、startと任意でendを指定するだけで、文字列や配列が返ってきます。

substring()と動作がよく似ていますが、全く同じではありません。
使い方や違い、注意点など紹介していきます。

slice()メソッドの構文

構文は次のとおりです。

str_arrayは元の文字列または配列です。
startは抜き出す開始位置、endは終了位置。

文字列の場合、最初の文字を０文字目として、１，２，３・・・と、バイト数ではなく文字の位置を数えます。
配列の場合、先頭の要素を０番目として、１、２、３・・・と数えます。

startから、end-1の範囲で抜き出した文字列または配列が、戻り値として返ってきます。

slice()メソッドで文字列の一部を取得する

sliceメソッドの使い方です。

引数１つ（startだけ）の場合

2つ目の引数endは省略可なので、まずはstartだけ指定してみます。

今回の例では、割と有名な次の言葉から、一部を抜き出します。

「あきらめたらそこで試合終了ですよ…？」

startを6、endを省略すると次のようになります。

文字列の最後まで抜き出したいなら、endを指定する必要はありません。

あえて指定するなら、次のようになります。

endも指定する場合

次は２つ目の引数endも指定します。
例の言葉から「そこで試合終了」を抜き出すなら、次のようになります。

startは先頭の０文字目から数えて「そ」が６文字目。
「了」のところまで抜き出したいので、endは13です。
12文字目と13文字目の境界を指定するイメージです。

substring()メソッドとの違い

slice()メソッドととても良く似た使い方の、substring()メソッドがあります。

違いは次の2点。
１つ目は、sliceの場合startよりendが後ろでないと空文字が返ってくること。
2つ目は、sliceは文字列だけでなく配列にも使えることです。

sliceはstart ＞ end は空文字が返ってくる

substring()の場合、startが６でendが13でも、逆に13と6でも同じ結果になります。

ところがslice()の場合、1文字も抜き出せません。
空文字が返ってきます。

sliceは配列にも使える

substring()は配列に対して使えません。
ですが、slice()は配列に対しても使えます。

文字列に対して使ったときは文字列が返ってきますが、配列に対して使えば、抜き出した要素分の配列が返ってきます。

slice()メソッドで配列の一部を取得する

配列に対して使っていきます。

A0からA4までの文字列が格納された、5つの要素の配列を用意しました。
この中からA1, A2, A3を抜き出します。

startが１でendが4なら、1から４-１番目の範囲の配列が返ってきます。

まとめ：slice()メソッドなら、文字列も配列も操作できる

文字列操作、配列操作ならslice()メソッド。

とてもよく似た動作のsubstring()がありますが、start > endで空文字が返ってくる点と配列に対しても使える点が違いです。

先頭の文字や要素を0番目とし、endも指定した場合、end-1番目までが返ってきます。
endの文字までではない点に気を付けてくださいね。