.NET開発者のためのブログメディア
JavaScriptの文字列を配列に分割！splitについてご紹介
目次
JavaScriptでのsplit使用方法とは？
今回は、JavaScriptでのsplit関数の使用方法について説明します。
split関数は文字列を分割して配列に格納します。
split関数は、その他の様々な関数と組み合わせて使うことが多いです。
JavaScriptでのsplit関数の使用方法に興味のある方はぜひご覧ください。
基本的な使い方
JavaScriptでのsplit関数の基本的な使い方を紹介します。
split関数は以下のように使用します。
str.split(区切り文字 または 正規表現[, 分割数]);
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 |
var str = "hoge piyo fuga"; //「 」で区切って分割する var result = str.split(' '); console.log( result ); // [ 'hoge', 'piyo', 'fuga' ] |
実行結果は以下のようになります。
|
1 |
[ 'hoge', 'piyo', 'fuga' ] |
分割数を指定するには以下のように記載します。
|
1 2 3 4 5 6 7 8 |
var str = "hoge piyo fuga"; //「 」で区切って分割する。分割数は2 var result = str.split(' ', 2); console.log( result ); // [ 'hoge', 'piyo' ] |
実行結果は以下のようになります。
|
1 |
[ 'hoge', 'piyo' ] |
このように、JavaScriptでのsplit関数は文字列を分割できます。
正規表現
JavaScriptでのsplit関数には、正規表現を指定することもできます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 |
var str = "hoge piyo fuga"; //「,」または「 」で分割する var result = str.split(/,|\s/); console.log( result ); // [ 'hoge', 'piyo', 'fuga' ] |
実行結果は以下のようになります。
|
1 |
[ 'hoge', 'piyo', 'fuga' ] |
このように、JavaScriptでのsplit関数には正規表現を指定することもできます。
split + join
join関数と組み合わせると、分割した後に結合できます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 |
var str = "hoge piyo fuga"; //「 」で分割して「,」で連結する var result = str.split(' ').join(','); console.log( result ); // hoge,piyo,fuga |
実行結果は以下のようになります。
|
1 |
hoge,piyo,fuga |
「 」で分割して「,」で連結しています。
「置換」と同じ挙動をすることが分かります。
このように、JavaScriptではjoin関数と組み合わせると、分割した後に結合できます。
split + forEach
forEach関数と組み合わせると、分割した配列をループできます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 |
var str = "hoge piyo fuga"; //「 」で分割してforEachでループする str.split(' ').forEach( function( value ) { console.log( value ); }); |
実行結果は以下のようになります。
|
1 2 3 |
hoge piyo fuga |
このように、JavaScriptではforEach関数と組み合わせると、分割した配列をループできます。
split + slice
slice関数と組み合わせると、分割した配列を成形できます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 |
var str = "hoge piyo fuga"; //「 」で分割してsliceで2番目・3番目を取得する result = str.split(' ').slice(1, 3); console.log( result ); // [ 'piyo', 'fuga' ] |
実行結果は以下のようになります。
|
1 |
[ 'piyo', 'fuga' ] |
また、splitで分割した最後の要素を取得することもできます。
|
1 2 3 4 5 6 7 8 |
var str = "hoge piyo fuga"; //「 」で分割してsliceで最後の要素を取得する result = str.split(' ').slice(-1)[0]; console.log( result ); // fuga |
実行結果は以下のようになります。
|
1 |
fuga |
slice関数にマイナスを指定することで後ろから取得できます。
このように、slice関数と組み合わせると、分割した配列を成形できます。
replace + split
replace関数と組み合わせると、置換した後に分割できます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 |
var str = "hoge , piyo , fuga"; // replaceで空白を除去し、「,」で分割する result = str.replace(/ /g, '').split(','); console.log( result ); // [ 'hoge', 'piyo', 'fuga' ] |
実行結果は以下のようになります。
|
1 |
[ 'hoge', 'piyo', 'fuga' ] |
replaceで空白を除去し、「,」で分割しています。
このように、replace関数と組み合わせると、置換した後に分割できます。
split + reverse
reverse関数と組み合わせると、分割した後に逆順にできます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
var str = "hoge piyo fuga"; // 「 」で分割して逆順にする result1 = str.split(' ').reverse(); // 「 」で分割して逆順にし、「 」で連結する result2 = str.split(' ').reverse().join(' '); console.log( result1 ); // [ 'fuga', 'piyo', 'hoge' ] console.log( result2 ); // fuga piyo hoge |
実行結果は以下のようになります。
|
1 2 |
[ 'fuga', 'piyo', 'hoge' ] fuga piyo hoge |
split(‘ ‘).reverse().join(‘ ‘)とすることで、逆順にした文字列にできます。
このように、reverse関数と組み合わせると、分割した後に逆順にできます。
split + shift / pop
shift関数やpop関数と組み合わせると、分割した配列の先頭や末尾を取り出せます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
var str = "hoge piyo fuga"; // 「 」で分割し、先頭要素を取得 result1 = str.split(' ').shift(); // 「 」で分割し、末尾要素を取得 result2 = str.split(' ').pop(); console.log( result1 ); // hoge console.log( result2 ); // fuga |
実行結果は以下のようになります。
|
1 2 |
hoge fuga |
このように、shift関数やpop関数と組み合わせると、分割した配列の先頭や末尾を取り出せます。
split + sort
sort関数と組み合わせると、分割した後にソートにできます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 |
var str = "banana apple orange"; // 「 」で分割し、アルファベットソート result = str.split(' ').sort(); console.log( result ); // [ 'apple', 'banana', 'orange' ] |
実行結果は以下のようになります。
|
1 |
[ 'apple', 'banana', 'orange' ] |
「 」で分割し、アルファベットソートできていることが分かります。
このように、sort関数と組み合わせると、分割した後にソートにできます。
JavaScriptでのsplit関数の正しい使用方法を覚えよう
いかがでしたでしょうか。
JavaScriptでのsplit関数の使用方法について説明しました。
split関数は文字列を分割して配列に格納します。
split関数は、その他の様々な関数と組み合わせて使うことが多いです。
ここでは、join、forEach、slice、replace、reverse、shift、pop、sort関数との組み合わせについて説明しました。
ぜひご自身でJavaScriptのソースコードを書いて、理解を深めてください。
