JavaScriptのコードを書いていると、文字列をいつくかに分解して使いたいなんて場面があったりしますよね。
そんな時、どのようにコードを書けばいいのかわからない…
という方もいるかもしれません。
そんな方必見！
今回は、文字列を分割する際によく利用される「split」メソッドについて解説していきます。
基本的な使い方や、分割のパターン、応用的な実装方法などまで幅広く解説していきます。
これで文字列分割は完璧。しっかり学んでいってくださいね。
「split」とは？
まずは、「split」メソッドの基本的な知識から学習を始めましょう。
splitはStringオブジェクトの組み込みメソッドとして用意されており、文字列を任意の箇所で区切って分割することが可能になります。
一般的な構文としては、次のようになります。
var str = '文字列'; str.split(区切り文字・正規表現, 分割数);
第1引数に、文字列を分割する際の基準になる「区切り文字」を指定するか、正規表現によって詳細に分割することができます。
分割された文字列は、それぞれ配列の要素として格納されますが、splitの第2引数に分割数を指定することで配列の要素数を制限することも可能です。
このような機能を持つ「split」は、活用次第ではCSVデータを配列データとして格納するようなことも簡単にできるので便利ですよ。
「split」の使い方
文字列を分割して配列化する
それでは、実際に「split」メソッドを使いながら詳しく見ていきましょう！
例えば、ユーザー情報が記載された文字列の中から、「ユーザー」ごとに分割するには次のようにします。
var str = 'user-1,user-2,user-3';
//「, (カンマ)」で区切って分割する
var result = str.split(',');
console.log( result );
実行結果
["user-1", "user-2", "user-3"]
この例では、「,（カンマ）」で区切られた文字列を対象にsplitメソッドを使っています。
文字列を「user-1」「user-2」のように分割したい場合には、区切り文字として「,（カンマ）」を使えば良いですね。すると、自動的に出力結果にあるような配列データとして格納されるわけです。
もう1つ、同じようなコード例をご紹介します！
var str = '2017-07-10';
//「-」で区切って分割する
var result = str.split('-');
console.log( result );
実行結果
["2017", "07", "10"]
この例では、「-」で区切られた日付の文字データを対象にしています。
こちらも同じようにsplitメソッドの引数に「-」を指定すれば、年月日をそれぞれ配列データとして格納できるわけです。
改行コードで分割する方法
今度は、文字列内に「改行コード」が挿入されている時に使える便利技をご紹介します。
例えば、フォームなどでよく使う以下のような「テキストエリア」内の文字列を取得して、改行ごとに配列へ格納する例を見てみましょう！
この場合、目には見えませんが各文字列の末尾に「改行コード」が挿入されています。
あとは、この改行コードを「区切り文字」として使えば、各文字列をぞれぞれ配列の要素として格納できるわけです。
次のコード例を見てください！
<body>
<h2>textareaの文字列（改行あり）</h2>
<textarea id="area">
あいうえお
かきくけこ
さしすせそ</textarea>
<p><button id="btn">ボタン</button></p>
<script>
var area = document.getElementById('area');
var btn = document.getElementById('btn');
//ボタンをクリックしたら、改行ごとに配列へ格納する
btn.addEventListener('click', function() {
console.log( area.value.split(/\n/) );
})
</script>
</body>
実行結果
["あいうえお", "かきくけこ", "さしすせそ"]
この例では、テキストエリアに記述された文字列を「value」メソッドで取得し、そのまま続けてsplitメソッドで繋げているのが分かります。
改行コードを取得するには、正規表現を使って「\n」をsplitメソッドの引数に当てはめればOKです。
「\n」は、正規表現だと「改行」を意味するコードなので、あとはsplitメソッドが自動的に各文字列を配列の要素に格納してくれるわけです。
分割個数を制限するには？
「split()」メソッドには、分割を行う個数を意図的に制限する機能もあるので見ていきましょう！
例えば、長文の文字列などで分割を行うと配列の要素数が膨大になることもあるので役に立ちます。
次のサンプル例を見てください！
var lists = 'リンゴ,バナナ,メロン,イチゴ,スイカ';
var result = lists.split(',');
console.log( result );
実行結果
["リンゴ", "バナナ", "メロン", "イチゴ", "スイカ"]
この例では、いくつかの果物名が記述された文字列があります。
「split()」を使ってカンマ区切りを「,」にすれば、果物名だけを分割して配列化できますよね？
この配列では要素数が5つしかないので良いですが、実際には数百〜数千の要素を格納している配列もあったりします。そんな時に、「split()」の第2引数へ必要な個数を記述することで制限することができます。
次のサンプル例を見てください！
var lists = 'リンゴ,バナナ,メロン,イチゴ,スイカ';
var result = lists.split(',', 3);
console.log( result );
実行結果
["リンゴ", "バナナ", "メロン"]
注目すべきは「split()」の引数です。
「split(‘,’, 3)」のように記述することで、取得する配列の要素数を3個に制限しているわけです。
実行結果を見ると、しっかりと要素数を制限された配列が取得できていますね！
区切り文字を指定しない場合
次に、「split()」メソッドの引数に何も指定しない場合はどのような現象が起きるのかを検証してみましょう！
これまでは「split()」の引数に区切り文字として指定したいものを設定していましたね。その引数に何も指定しないと、実はまったく分割をしないまま配列化されてしまうのです。
次のサンプル例をみてください！
var lists = 'リンゴ,バナナ,メロン'; var result = lists.split(); console.log( result );
実行結果
["リンゴ,バナナ,メロン"]
split()の引数に何も設定されていない点に注目してください！
区切り文字の指定がないので、対象となる文字列はそのままとなり結果的に1つの配列要素にすべて格納されるわけです。
このことから、split()を使う場合は必ず引数に区切り文字で使いたい値を指定するようにしましょう！
「split」の引数に正規表現を指定しよう！
「split」メソッドは、引数に文字列以外にも「正規表現」を指定することもできるので実際にやってみましょう！
次のサンプルを見てください。
var str = 'user-1,user-2 user-3'; //「,(カンマ)」「空白」を区切り文字に使う var result = str.split(/,|\s/); console.log( result );
実行結果
["user-1", "user-2", "user-3"]
この例では、対象となる文字列が「user-1,user-2」のように「,（カンマ）」で区切られていたり、「user-2 user-3」のように「空白」で区切られています。
このような場合は正規表現を使うと非常に簡単で、「/,|\s/」と記述すれば「,（カンマ）」「空白」の両方を区切り文字とし使え、出力結果のようにきれいな配列データになるわけです。
他にも、正規表現を活用すると非常に多彩な条件を指定することが出来るようになるので、どんな文字列データでも好きなように分割して配列に格納できるようになります。
次の記事では、たった12個の特殊文字を覚えるだけで自在に正規表現を扱えるように学習できるので、ぜひ参考にしてみてください！
「split」の活用
この章では、「split」をさらに活用するための手法について詳しく見ていきましょう。
主に、joinを組み合わせた置換方法、forEachによるループ処理、空白文字の削除について学んでいきます。
「split」と「join」で置換を実現！
Stringオブジェクトのメソッドである「split」と、Arrayオブジェクトのメソッドである「join」を組み合わせると「置換」を実現することができるのでご紹介致します。
例えば、「2017/07/10」という日付を「2017-07-10」に変更したいとしましょう。
手順としては、まず最初に「split(‘/’)」で年月日ごとに配列データとして格納し、「join(‘-‘)」で各配列要素を「-」でつなぎ合わせるという流れになります。
次のコード例を見てください！
var str = '2017/07/10';
var result = str.split('/').join('-');
console.log(result);
実行結果
2017-07-10
この例では、日付の文字列データに対して、splitとjoinを続けて実行しているのが分かります。出力結果は見事に置換されており、replaceメソッドや正規表現を使わない方法として覚えておくと良いでしょう。
replaceメソッドの使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。
「split」と「foreach」でループ処理！
「split」と「foreach」を組み合わせた繰り返し処理の方法をご紹介しておきます！
「split」メソッドは、文字列を分割したあとに配列データとして格納するわけですが、同じ配列のメソッドである「forEach」は効率よく各要素ごとに処理を行えるメソッドです。
そこで、分割された文字列をすべて出力するプログラムを作ってみましょう！
var str = 'user1,user2,user3,user4,user5';
str.split(',').forEach( function( value ) {
console.log( value );
})
実行結果
user1 user2 user3 user4 user5
この例では、「user1〜user5」までの文字列を「,（カンマ）」で分割して配列データにし、それをforEachを使って1つずつ出力するというプログラムになっています。
「forEach」は、配列の各要素に対して処理を行えるので、この例だとそれぞれの要素をconsole.logで出力するように指示しているわけですね。
forEachは、オブジェクト要素が格納された複雑な配列データや、コールバック関数の引数を活用することで応用範囲がどんどん広くなる便利なメソッドです。
次の記事で、さまざまな例題を扱いながら分かりやすく解説しているので、ぜひ参考にしてみてください！
「split」で空白を削除しよう！
それでは、これまで学んだ内容を踏まえて文字列内にある「空白」の削除に挑戦してみましょう！
以下のように、全角の空白が挿入された文字列があるとします。
var lists = 'リンゴ、 バナナ、 メロン';
//全角の空白を区切り文字に指定
var result = lists.split(' ');
この場合、単純に考えればsplit()の引数に全角の空白をそのまま指定すれば良い気がします。
結果的には、空白は削除されて[“リンゴ、”, “バナナ、”, “メロン”]のように配列化されます。
しかし、この方法にはいろいろ問題があります。例えば、半角の空白であったり複数の空白が連続で挿入されているようなケースでは上手く削除されません。
そこで、以下のように正規表現を使いましょう！
//全角・半角の空白が複数連続で挿入された文字列
var lists = 'リンゴ、 バナナ、 メロン';
var result1 = lists.split(' ');
var result2 = lists.split(/\s+/);
console.log( result1 );
console.log( result2 );
実行結果
["リンゴ、 ", "バナナ、 ", "", "メロン"] ["リンゴ、", "バナナ、", "メロン"]
この例では、文字列内に「全角・半角」の空白が連続で挿入されています。
そこで、「split(‘ ’)」のように記述した場合と、正規表現を使って「split(/\s+/)」と記述する場合で比較してみます。
実行結果を見ると一目瞭然ですが、正規表現を使った方がしっかりと空白の削除ができていますね。
あとは、置換の時に使った「join()」メソッドを活用すれば空白が削除された文字列の完成です！
var lists = 'リンゴ、 バナナ、 メロン';
var result = lists.split(/\s+/).join('');
console.log( result );
実行結果
リンゴ、バナナ、メロン
このように、「split()」に正規表現を使い「join()」を組み合わせることで空白の削除が実現しました。
実際のプログラミングでもよく使われる手法なので、忘れないようにしておきましょう！
「split」でよくあるエラーまとめ
この章では、「split」を使っていてよくある間違いやエラーの対処法について見ていきましょう！
主に、null / undefinedの扱い方について学んでいきます。
対象がnullやundefinedの場合
まずは、null / undefinedに対する扱い方について見ていきましょう！
splitは基本的にString型のメソッドであるため、文字列以外で実行しようとするとエラーになります。
例えば、次のようなケースを見てみましょう。
var a1 = undefined; var a2 = null; console.log(a1.split()); console.log(a2.split());
splitを実行しようとしている対象がいずれも「undefined」「null」の値が保持されていますよね？
この場合、当然ですがエラーになって実行できません。
もし、対象が必ず正常な文字列だと判断できないようなケースでは、条件分岐を次のように組み合わせると良いでしょう。
if(!str) {
console.log('');
} else {
console.log(str.split());
}
この例では、対象となる文字列が「null」や「undefined」の場合には空文字を出力し、通常の文字列ならsplitを実行します。
ポイントは条件式の「!str」であり、これによりnull / undefinedを区別しています。
ちなみに、三項演算子を使えばもっとスマートに記述できますね。
console.log(!str ? '' : str.split());
「split」の使い方まとめ
最後に「split」の基本的な使い方についてまとめておきます！
一般的な文字列を分割するための方法は次の通りです。
var str = 'user-1,user-2,user-3';
//「, (カンマ)」で区切って分割する
var result = str.split(',');
console.log( result );
実行結果
["user-1", "user-2", "user-3"]
splitの引数に区切りたい文字を設定することで、対象の文字列を任意の箇所で分割することができます。
また、戻り値は分割した文字列を要素に持つ配列であることに注意しましょう。
戻り値の配列は要素数を制御することも可能です。
var lists = 'リンゴ,バナナ,メロン,イチゴ,スイカ';
var result = lists.split(',', 3);
console.log( result );
実行結果
["リンゴ", "バナナ", "メロン"]
splitの第2引数に要素の数を設定すると、その要素数だけ持った配列になります。
区切り文字は正規表現を使うこともできます。
var str = 'user-1,user-2 user-3'; //「,(カンマ)」「空白」を区切り文字に使う var result = str.split(/,|s/); console.log( result );
実行結果
["user-1", "user-2", "user-3"]
/ /で囲んだ中に正規表現を指定するだけで、より細かい文字列の分割が行えるので便利です。
さらに、戻り値が配列データである点を利用して、forEachに繋げて効率よくループを回す手法はよく使われます。
var str = 'user1,user2,user3,user4,user5';
str.split(',').forEach( function( value ) {
console.log( value );
})
まとめ
今回は、文字列の分割を効率よく行える「split」メソッドを学習しました！
学習のポイントをもう一度おさらいしておきましょう！
- 「split」で分割された文字列は配列データに格納される
- 分割する文字列の個数は意図的に制限できる
- 「split」の引数には正規表現も利用することができる
- 改行コードを使って分割することも可能
- 「split」「join」を組み合わせることで置換を実現できる
- 「split」「forEach」を組み合わせることで配列操作が便利になる
上記内容を踏まえて、ぜひ自分のプログラムにも活かせるように学習を進めていきましょう！
