本記事では、JavaScriptで文字列を分割し配列にする方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次
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メソッドの第一引数に空文字(“”)を指定します。