本記事では、JavaScriptで文字列を分割し配列にする方法について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
splitメソッドの使い方
文字列を分割し配列にするには、splitメソッドを使用します。基本的な使い方は以下のとおりです。
String.split(separator, limit)構文解説
- String：分割対象の文字列
- separator：区切る文字
- limit：分割回数(省略可能)
文字列を分割し配列にする
splitメソッドを使用したサンプルコードを用意したので、確認してみましょう！
let fruits1 = "リンゴ,イチゴ,バナナ,スイカ";
let fruits2 = ",リンゴ,イチゴ,バナナ,スイカ,";
const fruitsArr1 = fruits1.split(",");
console.log(fruitsArr1); // => (4) ['リンゴ', 'イチゴ', 'バナナ', 'スイカ']
const fruitsArr2 = fruits2.split(",");
console.log(fruitsArr2); // => (6) ['', 'リンゴ', 'イチゴ', 'バナナ', 'スイカ', '']上記のコードは、変数fruitsに代入されている値を「,」で一区切りにし配列にしています。注意すべき点は、区切る文字が先頭や末尾に付いている場合もsplitメソッドは1つの区切りと判定し空文字の入った配列を返します。
分割回数を指定する
splitメソッドの分割回数を指定した使用したサンプルコードを用意したので、確認してみましょう！
let fruits1 = "リンゴ,イチゴ,バナナ,スイカ";
const fruitsArr1 = fruits1.split(",", 3);
console.log(fruitsArr1); // => (3) ['リンゴ', 'イチゴ', 'バナナ']
const fruitsArr2 = fruits1.split(",", 5);
console.log(fruitsArr2); // => (4) ['リンゴ', 'イチゴ', 'バナナ', 'スイカ']上記のコードは、最高4つに分割することが可能です。
一つ目のsplitメソッドでは分割回数を3回にセットしているため、4つ目のスイカは分割対象にならず除外されています。
二つ目のsplitメソッドでは分割回数を5回にセットしているため、全ての文字列を区切っています。余った分に空文字が代入されることはありません。
1文字ずつ配列に代入する
1文字ずつ配列に代入するサンプルコードを用意したので、確認してみましょう！
let fruits1 = "リンゴ,イチゴ,バナナ,スイカ";
const fruitsArr1 = fruits1.split("");
console.log(fruitsArr1); // => (15) ['リ', 'ン', 'ゴ', ',', 'イ', 'チ', 'ゴ', ',', 'バ', 'ナ', 'ナ', ',', 'ス', 'イ', 'カ']1文字ずつ配列に代入したい場合は、splitメソッドの第一引数に空文字(“”)を指定します。
DMM WEBCAMP 
CodeCamp 
TechAcademy 
