JavaScriptで配列や文字列を分割する方法をまとめたよ

JavaScriptでコードを書くとき、次の２つのやり方によく悩みます。

文字列をある規則で配列に分割するやり方
配列をＮ等分の配列に分けるやり方

やり方さえ分かってれば、どうってことないんですが・・・

ということで、この２つのやり方をコード例付きでまとめてみました。

このページの目次

１．文字列を分解して配列にするやり方
- コード例 : コンマ区切りの文字列をsplitで分割する
２．配列をＮ等分に分割するには
- 配列をＮ個ずつに分割できる関数を作ってみた
ちなみに文字列・配列を結合するには・・・
配列や文字列の分割のまとめ

１．文字列を分解して配列にするやり方

これには String.split メソッドを使うのが手っ取り早いです。

まず String.split メソッドについての説明は次の通り（引用）

split() メソッドは、指定した separator 文字列を使って分割する箇所を決定し、文字列を複数の部分文字列に区切ることにより String オブジェクトを文字列の配列に分割します。

str.split([separator[, limit]])

戻り値

与えられた文字列で separator が発生するそれぞれの箇所で分割した文字列の配列です。

引用元　：　String.prototype.split() - JavaScript | MDN

第１引数の文字列を分割でき、最大個数も指定できるメソッド

もちろん地道に for とか使ってもできるが、これが一番簡単ですね。

ちなみにPHPにもこれと似た感じで、 implode という関数もあります。

コード例 : コンマ区切りの文字列をsplitで分割する

では String.split の分割のコード例について

一番身近なのはコンマ区切りのCSVとかを配列にしたい場合とかです。

例えば次みたいなCSSがあるとしましょう。

a,b,c,d,e,f

1	a,b,c,d,e,f

上のCSVをコンマごとに区ぎりたいとき、今紹介した String.split が役に立ちます。

▼ 例えばこんな感じのコード例

/// 分割対象のCSV
const CSV = 'a,b,c,d,e,f';

/// コンマで分割して表示
var strs = CSV.split(',');
console.log('strs : ', strs);

/// 分割対象のCSV

const CSV = 'a,b,c,d,e,f';

/// コンマで分割して表示

var strs = CSV.split(',');

console.log('strs : ', strs);

▼ このコードのコンソール表示結果

strs :  [ 'a', 'b', 'c', 'd', 'e', 'f' ]

1	strs : [ 'a', 'b', 'c', 'd', 'e', 'f' ]

ちゃんとコンマ区切りで配列に分割されてます。

２．配列をＮ等分に分割するには

お次は配列をさらに細かな配列に分ける方法について

これについては直接分割できるようなメソッドはありません。

でも Array.splice メソッドが分割するのに有能です。（以下がその説明）

arr.slice([begin[, end]])

begin Optional
取り出しの開始位置を示す 0 から始まるインデックスです。

end Optional
取り出しを終える直前の位置を示す 0 から始まるインデックスです。 slice は end 自体は含めず、その直前まで取り出します。

返値
取り出された要素を含む新しい配列です。

引用元　：　Array.prototype.slice() - JavaScript | MDN

これを使えば、Ｎ等分とか、Ｎ個ずつに分ける処理も楽にできそうです。

配列をＮ個ずつに分割できる関数を作ってみた

ということで Array.slice を使い、配列をＮ個ずつの配列に分ける関数を実装してみました。

▼ そのコード例がコチラ

/**
 * 配列 arr を n 個ずつに分けて返す
 **/
function divideArrIntoPieces(arr,n){
  var arrList = [];
  var idx = 0;
  while(idx < arr.length){
      arrList.push(arr.splice(idx,idx+n));
  }
  return arrList;
}

/**

* 配列 arr を n 個ずつに分けて返す

**/

function divideArrIntoPieces(arr,n){

var arrList = [];

var idx = 0;

while(idx < arr.length){

arrList.push(arr.splice(idx,idx+n));

}

return arrList;

}

第１引数 arr には分割対象の配列、第２引数 n には分割の個数を渡せばいいだけ

実際にこの関数を使い、ある配列を３等分してみます。

▼ こんなコードを書いてみた

/// 分割対象の配列
var arr = [
  'a1', 'a2', 'a3',
  'b1', 'b2', 'b3',
  'c1', 'c2', 'c3'
];

/// ３個ずつに分割＆表示
var arrList = divideArrIntoPieces(arr, 3);
console.log(arrList);

/// 分割対象の配列

var arr = [

'a1', 'a2', 'a3',

'b1', 'b2', 'b3',

'c1', 'c2', 'c3'

];

/// ３個ずつに分割＆表示

var arrList = divideArrIntoPieces(arr, 3);

console.log(arrList);

▼ このコードの出力例

[ 
  [ 'a1', 'a2', 'a3' ],
  [ 'b1', 'b2', 'b3' ],
  [ 'c1', 'c2', 'c3' ] 
]

[

[ 'a1', 'a2', 'a3' ],

[ 'b1', 'b2', 'b3' ],

[ 'c1', 'c2', 'c3' ]

]

しっかり３個ずつに分けられてる

ちなみに対象配列の個数が n で割り切れない場合でも問題なく使えます。
（例えば１０個なら要素３つの配列×３＋要素１つの配列のように分割される）

ちなみに文字列・配列を結合するには・・・

最後に少しだけ蛇足

分割とは逆で、文字列・配列を結合する方法もあります。

詳しくは次記事で紹介した通りです。（コード例付き）

PisukeCode - Web開発まとめ

JavaScriptで配列とか文字列を結合・連結させる方法アレコレ

https://pisuke-code.com/js-ways-to-concat-string-and-array

JavaScriptを使っていると、頻繁にする処理文字列同士を連結させたり、配列同士を結合させたり・・そういうときに便利なメソッドとか方法についてまとめてみました。知っていれば簡単だけど忘れがちなので、自分用メモも兼ねて紹介します。１．文字列同士を連結させる方法まずは２つ以上の文字列をくっつけたい場合のやり方これには Array.join メソッドを使うのが一番楽で簡単です。以下 Array,join メソッドについての説明引用arr.join()配列の全要素が連結された文字列です。 arr.length が 0 だった場合、空の文字列が返され...

分割ほど使用頻度は少ないけど、使う場面は多いかもしれません。

特に配列の分割のやり方、これを知ってると便利です。

配列や文字列の分割のまとめ

ということで、簡単に分割方法まとめ

文字列を配列に分割する
⇒　文字列分割は String.split メソッドを使うのが一番楽。これを使えばコンマ区切りのCSVとかもサクッと配列に分けることができる
配列をＮ等分に分割する
⇒　直接分割できるメソッドはない。でも Array.splice メソッドをうまく活用すれば配列をＮ等分する関数も作れる

以上、JavaScriptで文字列・配列を分割する方法でした。ではまたﾊﾞｲﾊﾞｲ($・・)/~~~