• 1．JavaScriptのsplitメソッドとは？
• 2．splitメソッドの基本的な使い方
• 3．区切り文字を指定しない場合はどうなる？
• 4．正規表現を使って分割する方法
• 5．splitメソッドをさらに便利に使う方法
• 6．splitメソッドでよくあるエラー

今回は、文字列を分割するときによく利用されているsplitメソッドについて紹介していきます。

本記事では、

「splitメソッドの基本的な使い方」や「正規表現を使って分割する方法」

といった基本的な内容から、

「splitメソッドをさらに便利に使う方法は？」

といった応用的な内容まで、初級者エンジニア向けに詳しく解説していきます。

1.     JavaScriptのsplitメソッドとは？

JavaScriptのsplitメソッドとは、ある文字列を指定した区切り文字列で分けることにより、文字列の配列に分割するメソッドのこと。分割数の上限を決めて分割することも可能です。

splitメソッドは、データベース等から出力されるカンマ区切りのCSVファイルを操作するときによく利用され、シンプルなコーディングで簡単に文字列を配列データとして格納できるのが特徴です。

2．splitメソッドの基本的な使い方

まずはsplitメソッドの基本的な使い方について解説します。

①基本構文

splitメソッドの基本構文は以下の通りです。

let str = '文字列';
let array = str.split(区切り文字または正規表現, 分割数);

引数、戻り値について以下で詳しく説明します。

・引数

第1引数に文字列を分割する基準となる”区切り文字”か”正規表現”を指定することにより、”文字列”を分割し、それぞれ配列の要素に格納されます。

区切り文字には、 “,”(カンマ)、”:”(コロン)、”;”(セミコロン)、” “(空白)、” \r\n”(改行)などが利用できます。

正規表現の場合は、“/”（スラッシュ）で囲まれた正規表現リテラルが指定可能です。

第2引数に分割数を指定すると配列の要素数を制限しますが、0を指定すると分割は行われません。なお第2引数は省略できます。

・戻り値

splitメソッドの戻り値は、文字列型の配列になります。

第1引数で指定された区切り文字が出現するたびに分割された配列となります。

②カンマで区切って分割する

実際のコードでsplitメソッドの動作を確認してみましょう。

let str = "one,two,three";
let array = str.split(",");

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

one

two

three

第1引数に”,”を指定しているので、カンマ区切りで配列が作られています。

③空白で区切って分割する

サンプルコードのように” “を指定すると、空白で区切って分割できます。

let str = "Blue Yellow Red";
let array = str.split(" ");

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

Blue

Yellow

Red

④改行コードで区切って分割する

let str = "AB\r\nBC\nCD";
let array = str.split(/\r\n|\n/);

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

AB

BC

CD

正規表現で\r\nは行頭復帰改行（CRLF）を表し、\nは改行（LF）を表します。

｜（パイプ）は正規表現ではorという意味です。

正規表現については4章で詳しく説明しますね。

⑤分割数を指定する

let str = "月,火,水,木,金,土,日";
let array = str.split(",",5);

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

月

火

水

木

金

実行結果から、第2引数に5を指定しているので配列の要素数が5個になったのがわかります。

3．区切り文字を指定しない場合はどうなる？

ここで、区切り文字を指定しない場合、どうなるか確認してみましょう。

さきほどのサンプルコードから、splitメソッドの引数を外してみます。

let str = "月,火,水,木,金,土,日";
let array = str.split();

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

月,火,水,木,金,土,日

区切り文字を指定しないで実行すると、分割されず文字列全体が1つの要素となる配列が返ります。

splitメソッドを使うときは、引数に区切り文字を指定するようにしましょう。

4．正規表現を使って分割する方法

splitメソッドの第1引数には、正規表現を指定できます。

正規表現とは文字列のパターンを表現する汎用的な記法で、任意の文字列パターンに合わせ文字列を分割できます。

splitメソッドの引数に正規表現を指定するサンプルコードを見てみましょう。

let str = "1ロンドン2ニューヨーク3東京4パリ5シンガポール";
let array = str.split (/[0-9]/);

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

ロンドン

ニューヨーク

東京

パリ

シンガポール

このサンプルコードは、第1引数に正規表現である/[0-9]/ を指定しているので、1〜5の数値で分割しています。

変数strの先頭が1になっているのでarray配列の先頭は空文字列になるのがわかりますね。

①複数の区切り文字を指定することも可能

正規表現を使うと、複数の区切り文字を指定することも可能です。

サンプルコードで確認してみましょう。

let str = "ラーメン,炒飯;餃子@スープ";
let array = str.split(/,|;|@/);

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

ラーメン

炒飯

餃子

スープ

このように、正規表現内を”|”で区切ると、複数の区切り文字を指定して文字列を分割できます。

5．splitメソッドをさらに便利に使う方法

splitメソッドをさらに便利に使う方法を4つ紹介します。

①空白を削除する

splitメソッドとjoinメソッドを組み合わせると、空白を削除できます。

joinメソッドは配列の要素をつなげて文字列に変換するメソッドです。

let str = "太陽,　 地球,   月　　 ";
let array = str.split(/\s+/).join('');

console.log(array);

実行結果：

太陽,地球,月

splitメソッドの第1引数に正規表現の/\s+/を指定すると空白で分割します。

その後、joinメソッドで配列の要素をつなげ文字列を作成するので、元の文字列から空白が削除されます。

②forEachメソッドを組み合わせてループ処理

splitメソッドとforEachメソッドを組み合わせると、各要素に対して効率よく処理を行えます。

forEachメソッドは、配列の要素を順に取り出しコールバック関数へ渡して処理できます。

サンプルコードで確認してみましょう。

let str = 'Kindergarten,Elementary School,Middle School,High School,University';

str.split(',').forEach( function( value ) {
    console.log( value );
})

実行結果：

Kindergarten

Elementary School

Middle School

High School

University

このサンプルコードは文字列を”,”（カンマ）で分割して配列を作成し、forEachメソッドを使用しひとつずつ出力しています。

このように、ループ処理をするのにforEachメソッドを使う方が、for文を使用するよりスマートに記述できることがわかりますね。

③sortメソッドを組み合わせて並べ替え

splitメソッドとsortメソッドを組み合わせると、分割した後に並び替えられます。

let str = "soccer,basketball,volleyball";
let array = str.split(",").sort();

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

basketball

soccer

volleyball

実行結果から、配列がアルファベット順で並び替えられていることがわかりますね。

④分割した文字列の最後の要素を取得

Splitメソッドで分割した配列の最後の要素を取得するには、配列に最後の要素番号を指定します。

let str = "one,two,three,four,five";
let array = str.split(",");

console.log(array[array.length-1]);

実行結果：

five

配列の要素数は、array.lengthで取得できます。

JavaScriptの配列の要素番号は0から始まるため、最後の要素番号を取得するには、 要素数–1にする必要があります。

6．splitメソッドでよくあるエラー

ここでは、splitメソッドを使う上でよくあるエラーの対処方法について見ていきましょう。

①対象が文字列ではない場合

splitメソッドはString型のメソッドのため、文字列以外では使用できません。

まずはエラーになるコードを確認してみましょう。

let str = new Date(); //システム日付を取得
let array = str.split("/");

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

TypeError: str.split is not a function

このサンプルコードは、”2022/8/29”のような日付データを”/”で分割しようとしていますが、strが文字列ではなく日付型のため、”str.split is not a function”といったエラーが発生しています。

このエラーに対処する方法は次の通りです。

let str = new Date(); //システム日付を取得
let array = str.toLocaleDateString().split("/");　//日付型をローカル言語に沿った文字列型に変換

for (let i = 0; i < array.length; i++) {
  console.log(array[i]); 
}

実行結果：

2022

8

29

このように、日付型を文字列型に変換後、splitメソッドを実行するとエラーを回避できます。

②対象がnullやundefinedの場合

対象文字列がnullやundefinedの場合でもエラーになります。

et str1 = null;
let array1 = str1.split(",");

console.log(array1);

実行結果：

TypeError: Cannot read properties of null (reading ‘split’)

このように、対象文字列がnullやundefinedの場合、エラーとなってしまいます。

対象が文字列かどうか判断できない場合、条件分岐を設定しましょう。

let str1 = null;

if(!str1) {    
  console.log('');
} else {
  console.log(str1.split());
}

実行結果：

strがnullの場合、splitメソッドを実行しないので、エラーを回避できます。

※掲載された社名、製品名は、各社の商標及び登録商標です。