本記事では、JavaScriptで文字列を分割し配列にする方法について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
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メソッドの第一引数に空文字(“”)を指定します。