JavaScriptで文字列を分割する方法は?splitの使い方を紹介

エンジニア
マネージャー
JavaScriptで文字列を分割するには?
JavaScriptで文字列を分割するにはsplit関数を用います。
split関数では文字列を分割して配列に格納します。
split関数を扱う上では正規表現というものの知識が必要となります。この記事では主にsplit関数の使いかたと正規表現の関係性について述べていきます。
JavaScriptのsplit関数とは?
今回は、JavaScriptでのsplit関数の使用方法について説明します。
split関数は文字列を分割して配列に格納します。
split関数は、その他の様々な関数と組み合わせて使うことが多いです。
JavaScriptでのsplit関数の使用方法に興味のある方はぜひご覧ください。
JavaScriptでのsplitの使い方10パターン
1:splitの基本的な使い方
JavaScriptでのsplit関数の基本的な使い方を紹介します。
split関数は以下のように使用します。
str.split(区切り文字 または 正規表現[, 分割数]);
実際のソースコードを見てみましょう。
1 2 3 4 |
var str = "hoge piyo huga" var result = str.split(' '); console.log(result); |
実行結果は以下のようになります。
1 |
['hoge', 'piyo', 'huga'] |
分割数を指定するには以下のように記載します。
1 2 3 4 |
var str = "hoge piyo huga"; var result = str.split(' ', 2); console.log(result); |
実行結果は以下のようになります。
1 |
['hoge', 'piyo'] |
このように、JavaScriptでのsplit関数は文字列を分割できます。
2:正規表現を指定する
JavaScriptでのsplit関数には、正規表現を指定することもできます。
実際のソースコードを見てみましょう。
1 2 3 4 |
var str = "hoge piyo fuga"; var result = str.split(/, |\s/); console.log(result); |
実行結果は以下のようになります。
1 |
['hoge', 'piyo', 'fuga'] |
このようにJavaScriptでのsplit関数では正規表現を指定することができます。
3:split + join
JavaScriptではjoin関数と組み合わせると、分割した後に結合できます。
実際のソースコードを見てみましょう。
1 2 3 4 |
var str = "hoge piyo fuga"; var result = str.split(' ').join(','); console.log( result ); |
実行結果は以下のようになります。
1 |
hoge,piyo,fuga |
「 」で分割して「,」で連結しています。
「置換」と同じ挙動をすることが分かります。
このように、JavaScriptではjoin関数と組み合わせると、分割した後に結合できます。
4:split + forEach
JavaScriptではforEach関数と組み合わせると、分割した配列をループできます。
実際のソースコードを見てみましょう。
1 2 3 4 5 |
var str = "hoge piyo fuga"; str.split(' ').forEach( function( value ) { console.log( value ); }); |
実行結果は以下のようになります。
1 2 3 |
hoge piyo fuga |
このように、JavaScriptではforEach関数と組み合わせると、分割した配列をループできます。
5:split + slice
JavaScriptではlice関数と組み合わせると、分割した配列を成形できます。
実際のソースコードを見てみましょう。
1 2 3 4 5 |
var str = "hoge piyo fuga"; result = str.split(' ').slice(1, 3); console.log( result ); |
実行結果は以下のようになります。
1 |
[ 'piyo', 'fuga' ] |
また、splitで分割した最後の要素を取得することもできます。
1 2 3 4 5 |
var str = "hoge piyo fuga"; result = str.split(' ').slice(-1)[0]; console.log( result ); |
実行結果は以下のようになります。
1 |
fuga |
slice関数にマイナスを指定することで後ろから取得できます。
このように、slice関数と組み合わせると、分割した配列を成形できます。
6:replace + split
JavaScriptではreplace関数と組み合わせると、置換した後に分割できます。
実際のソースコードを見てみましょう。
1 2 3 4 5 |
var str = "hoge , piyo , fuga"; result = str.replace(/ /g, '').split(','); console.log( result ); |
実行結果は以下のようになります。
1 2 |
[ 'hoge', 'piyo', 'fuga' ] |
replaceで空白を除去し、「,」で分割しています。
このように、replace関数と組み合わせると、置換した後に分割できます。
7:split + reverse
JavaScriptではreverse関数と組み合わせると、分割した後に逆順にできます。
実際のソースコードを見てみましょう。
1 2 3 4 5 6 7 |
var str = "hoge piyo fuga"; result1 = str.split(' ').reverse(); result2 = str.split(' ').reverse().join(' '); console.log( result1 ); console.log( result2 ); |
実行結果は以下のようになります。
1 2 |
[ 'fuga', 'piyo', 'hoge' ] fuga piyo hoge |
split(‘ ‘).reverse().join(‘ ‘)とすることで、逆順にした文字列にできます。
このように、reverse関数と組み合わせると、分割した後に逆順にできます。
8:split + shift / pop
JavaScriptではshift関数やpop関数と組み合わせると、分割した配列の先頭や末尾を取り出せます。
実際のソースコードを見てみましょう。
1 2 3 4 5 6 7 |
var str = "hoge piyo fuga"; result1 = str.split(' ').shift(); result2 = str.split(' ').pop(); console.log( result1 ); console.log( result2 ); |
実行結果は以下のようになります。
1 2 |
hoge fuga |
このように、shift関数やpop関数と組み合わせると、分割した配列の先頭や末尾を取り出せます。
9:split + sort
JavaScriptではsort関数と組み合わせると、分割した後にソートにできます。
実際のソースコードを見てみましょう。
1 2 3 4 |
var str = "banana apple orange"; result = str.split(' ').sort(); console.log( result ); |
実行結果は以下のようになります。
1 |
[ 'apple', 'banana', 'orange' ] |
「 」で分割し、アルファベットソートできていることが分かります。
このように、sort関数と組み合わせると、分割した後にソートにできます。
JavaScriptのsplitで起こりやすいエラー
以上ではJavaScriptでsplitを用いて文字列を分割する方法を紹介してきました。しかし、この方法での文字列分割は気を付けなければいけない点があります。
splitは基本的にString型のメソッドです。そのため、文字列以外でsplitを実行しようとするとエラーが生じてしまいます。
次のソースコードを見てみましょう。
1 2 3 4 5 |
var a1 = undefined; var a2 = null; console.log(a1.split()); consele.log(a2.split()); |
splitの対象が「undefined」「null」であり、この場合は当然エラーになります。
対処法としては、条件分岐をうまく組み合わせる方法があります。次の例を見てください。
1 2 3 4 5 |
if(!str){ console.log(''); }else{ console.log(str.split()); } |
この例では、対象の文字列strが「null」や「undefined」の場合には空文字を出力し、普通の文字列の場合にはその文字列に対してsplitを実行します。
お気づきの方もいらっしゃるかもしれませんが、三項演算子を用いればもっと簡潔なコードを書くことが可能です。
1 |
console.log(!str ? ' ' : str.split()); |
JavaScriptでsplit以外に文字列を分割するメソッド4つ
いままでは、JavaScriptでsplitを用いて文字列を分割する方法を説明してきました。ここからは、JavaScriptでsplit以外に文字列を分割するメソッドを4つ具体的に紹介します。
1:reduceメソッド
この章では、reduceメソッドの基本的な使いかたについて説明します。まずは基本的な構文から見ていきます。reduceメソッドは対象となる配列に対して任意の関数を実行することができます。
1 |
配列.reduce(function{(累積値、要素){ }); |
第1引数の「累積値」には、配列要素を順番に処理していった値が格納されます。第2引数の「要素」は現在処理されている配列要素を意味します。この関数内で「return」を使い、関数の処理に従って累積値に結果が入れられていき、最終的に1つの値となって返されます。
reduceメソッドの使いかたの例
ここではreduceメソッドを用いた文字分割の例として、簡単なソースコードを見てみます。
1 2 3 4 |
const rna = [..."UGGUGUUAUUAAUGGUUU"]; let cdn5 = rna.reduce( (acc, c, i ) => i % 3 ? acc : [...acc, rna.slice( i, i+3 ).join('') ], [] ); console.log(cdn5); |
実行結果は
1 |
["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"] |
となり文字列を分割できていることが分かります。
2:sliceメソッド
sliceメソッドは先ほども出てきました。これの基本的な使い方は「開始位置」と「終了位置」を指定してその範囲の文字を分割してくれるメソッドです。形式的に示すと以下のようになります。
1 2 3 |
var str = 文字列; str.slice(開始位置、終了位置); |
sliceメソッドの使いかたの例
簡単なソースコードを見てみます。
1 2 3 4 5 6 |
const rna = "UGGUGUUAUUAAUGGUUU"; let cdn4 = []; for (let i = 0; i < rna.length; i+=3) { cdn4.push(rna.slice(i, i+3)); } console.log(cdn4); |
実行結果は
1 |
["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"] |
となります。
3:substrメソッド
substrメソッドは文字数を指定できるメソッドとなります。
基本的な形式は以下のようになります。
1 2 3 |
var str = 文字列; str.substr(開始位置、文字数); |
substrメソッドの使いかたの例
簡単なソースコードを見てみます。
1 2 3 4 5 6 |
const rna = "UGGUGUUAUUAAUGGUUU"; let cdn2 = []; for (let i = 0; i < rna.length / 3; i++) { cdn2.push(rna.substr(i * 3, 3)); } console.log(cdn2); |
実行結果は
1 |
["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"] |
4:substringメソッド
最後にsubstringメソッドを用いた文字列の分解を紹介します。
先ほどの「substr」と名称が少し似ていますが、「substring」は文字数を指定するのではなく、「開始位置」と「終了位置」を指定することで「分割」処理を行います。
基本的な形式は以下のようになります。
1 2 3 |
var str = 文字列; str.substring( 開始位置, 終了位置 ); |
substringメソッドの使いかたの例
簡単なソースコードを見てみます。
1 2 3 4 5 6 |
const rna = "UGGUGUUAUUAAUGGUUU"; let cdn3 = []; for (let i = 0; i < rna.length; i += 3) { cdn3.push(rna.substring(i, i + 3)); } console.log(cdn3); |
実行結果は
1 |
["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"] |
となります。
エンジニア
マネージャー
JavaScriptで文字列を分割してみよう
以上でJavaScriptでの文字列分割は網羅したといっても問題ありません。
しかし、この記事を見ただけでは身についたとはいえません。実際に自分でコードを書いてみて、文字列を分割してみて初めて身についたといえるでしょう。
文字列を分割するときには、分割するケースに応じて、最も効率がいいメソッドを選択できるように学習を進めましょう。
最後になりますが、JavaScriptは似たメソッドが数多くあります。今後JavaScriptを勉強していくならばどんどんコードを書いて経験を積むように意識すればいいでしょう。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


JavaScript新着案件New Job
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万~26万円東京都千代田区(秋葉原駅)官公庁向けシステム運用保守/C#/東京都府中市/【WEB面談可】
月給50万~60万円東京都府中市(中河原駅)官公庁向けシステム開発のテスター/C#/東京都府中市/【WEB面談可】
月給25万~35万円東京都府中市(中河原駅)システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務
月給63万~63万円埼玉県川越市(南大塚駅)