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