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

Javascript
プログラミング言語

公開日時: 2020-09-28 　更新日時: 2021-10-07

この記事でわかること

システム エンジニア: split関数について詳しく知りたいのですが、教えてもらえますか？

プロジェクト マネージャー: わかりました。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(区切り文字または正規表現[, 分割数]);

実際のソースコードを見てみましょう。

var str = "hoge piyo huga"
var result = str.split(' ');

console.log(result);

var str = "hoge piyo huga"

var result = str.split(' ');

console.log(result);

実行結果は以下のようになります。

['hoge', 'piyo', 'huga']

1	['hoge', 'piyo', 'huga']

分割数を指定するには以下のように記載します。

var str = "hoge piyo huga";
var result = str.split(' ', 2);

console.log(result);

var str = "hoge piyo huga";

var result = str.split(' ', 2);

console.log(result);

実行結果は以下のようになります。

['hoge', 'piyo']

1	['hoge', 'piyo']

このように、JavaScriptでのsplit関数は文字列を分割できます。

2：正規表現を指定する

JavaScriptでのsplit関数には、正規表現を指定することもできます。

実際のソースコードを見てみましょう。

var str = "hoge piyo fuga";
var result = str.split(/, |\s/);

console.log(result);

var str = "hoge piyo fuga";

var result = str.split(/, |\s/);

console.log(result);

実行結果は以下のようになります。

['hoge', 'piyo', 'fuga']

1	['hoge', 'piyo', 'fuga']

このようにJavaScriptでのsplit関数では正規表現を指定することができます。

3：split + join

JavaScriptではjoin関数と組み合わせると、分割した後に結合できます。

実際のソースコードを見てみましょう。

var str = "hoge piyo fuga";
var result = str.split(' ').join(',');

console.log( result );

var str = "hoge piyo fuga";

var result = str.split(' ').join(',');

console.log( result );

実行結果は以下のようになります。

hoge,piyo,fuga

1	hoge,piyo,fuga

「」で分割して「,」で連結しています。
「置換」と同じ挙動をすることが分かります。

このように、JavaScriptではjoin関数と組み合わせると、分割した後に結合できます。

4：split + forEach

JavaScriptではforEach関数と組み合わせると、分割した配列をループできます。

実際のソースコードを見てみましょう。

var str = "hoge piyo fuga";

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

var str = "hoge piyo fuga";

str.split(' ').forEach( function( value ) {

console.log( value );

});

実行結果は以下のようになります。

hoge
piyo
fuga

hoge

piyo

fuga

このように、JavaScriptではforEach関数と組み合わせると、分割した配列をループできます。

5：split + slice

JavaScriptではlice関数と組み合わせると、分割した配列を成形できます。

実際のソースコードを見てみましょう。

var str = "hoge piyo fuga";

result = str.split(' ').slice(1, 3);

console.log( result );

var str = "hoge piyo fuga";

result = str.split(' ').slice(1, 3);

console.log( result );

実行結果は以下のようになります。

[ 'piyo', 'fuga' ]

1	[ 'piyo', 'fuga' ]

また、splitで分割した最後の要素を取得することもできます。

var str = "hoge piyo fuga";

result = str.split(' ').slice(-1)[0];

console.log( result );

var str = "hoge piyo fuga";

result = str.split(' ').slice(-1)[0];

console.log( result );

実行結果は以下のようになります。

fuga

fuga

slice関数にマイナスを指定することで後ろから取得できます。

このように、slice関数と組み合わせると、分割した配列を成形できます。

6：replace + split

JavaScriptではreplace関数と組み合わせると、置換した後に分割できます。

実際のソースコードを見てみましょう。

var str = "hoge , piyo , fuga";

result = str.replace(/ /g, '').split(',');

console.log( result );

var str = "hoge , piyo , fuga";

result = str.replace(/ /g, '').split(',');

console.log( result );

実行結果は以下のようになります。


[ 'hoge', 'piyo', 'fuga' ]

1 2	[ 'hoge', 'piyo', 'fuga' ]

replaceで空白を除去し、「,」で分割しています。

このように、replace関数と組み合わせると、置換した後に分割できます。

7：split + reverse

JavaScriptではreverse関数と組み合わせると、分割した後に逆順にできます。

実際のソースコードを見てみましょう。

var str = "hoge piyo fuga";

result1 = str.split(' ').reverse();
result2 = str.split(' ').reverse().join(' ');

console.log( result1 );
console.log( result2 );

var str = "hoge piyo fuga";

result1 = str.split(' ').reverse();

result2 = str.split(' ').reverse().join(' ');

console.log( result1 );

console.log( result2 );

実行結果は以下のようになります。

[ 'fuga', 'piyo', 'hoge' ]
fuga piyo hoge

1 2	[ 'fuga', 'piyo', 'hoge' ] fuga piyo hoge

split(‘ ‘).reverse().join(‘ ‘)とすることで、逆順にした文字列にできます。

このように、reverse関数と組み合わせると、分割した後に逆順にできます。

8：split + shift / pop

JavaScriptではshift関数やpop関数と組み合わせると、分割した配列の先頭や末尾を取り出せます。

実際のソースコードを見てみましょう。

var str = "hoge piyo fuga";

result1 = str.split(' ').shift();
result2 = str.split(' ').pop();

console.log( result1 );
console.log( result2 );

var str = "hoge piyo fuga";

result1 = str.split(' ').shift();

result2 = str.split(' ').pop();

console.log( result1 );

console.log( result2 );

実行結果は以下のようになります。

hoge
fuga

hoge

fuga

このように、shift関数やpop関数と組み合わせると、分割した配列の先頭や末尾を取り出せます。

9：split + sort

JavaScriptではsort関数と組み合わせると、分割した後にソートにできます。

実際のソースコードを見てみましょう。

var str = "banana apple orange";
result = str.split(' ').sort();

console.log( result );

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は基本的にString型のメソッドです。そのため、文字列以外でsplitを実行しようとするとエラーが生じてしまいます。

次のソースコードを見てみましょう。

var a1 = undefined;
var a2 = null;

console.log(a1.split());
consele.log(a2.split());

var a1 = undefined;

var a2 = null;

console.log(a1.split());

consele.log(a2.split());

splitの対象が「undefined」「null」であり、この場合は当然エラーになります。

対処法としては、条件分岐をうまく組み合わせる方法があります。次の例を見てください。

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

if(!str){

console.log('');

}else{

console.log(str.split());

}

この例では、対象の文字列strが「null」や「undefined」の場合には空文字を出力し、普通の文字列の場合にはその文字列に対してsplitを実行します。

お気づきの方もいらっしゃるかもしれませんが、三項演算子を用いればもっと簡潔なコードを書くことが可能です。

console.log(!str ? ' ' : str.split());

1	console.log(!str ? ' ' : str.split());

JavaScriptでsplit以外に文字列を分割するメソッド4つ

いままでは、JavaScriptでsplitを用いて文字列を分割する方法を説明してきました。ここからは、JavaScriptでsplit以外に文字列を分割するメソッドを4つ具体的に紹介します。

1：reduceメソッド

この章では、reduceメソッドの基本的な使いかたについて説明します。まずは基本的な構文から見ていきます。reduceメソッドは対象となる配列に対して任意の関数を実行することができます。

配列.reduce(function{(累積値、要素){ });

1	配列.reduce(function{(累積値、要素){ });

第1引数の「累積値」には、配列要素を順番に処理していった値が格納されます。第2引数の「要素」は現在処理されている配列要素を意味します。この関数内で「return」を使い、関数の処理に従って累積値に結果が入れられていき、最終的に1つの値となって返されます。

reduceメソッドの使いかたの例

ここではreduceメソッドを用いた文字分割の例として、簡単なソースコードを見てみます。

const rna = [..."UGGUGUUAUUAAUGGUUU"];
let cdn5 = rna.reduce( (acc, c, i ) =>  
 i % 3 ? acc : [...acc, rna.slice( i, i+3 ).join('') ], [] );
console.log(cdn5);

const rna = [..."UGGUGUUAUUAAUGGUUU"];

let cdn5 = rna.reduce( (acc, c, i ) =>

i % 3 ? acc : [...acc, rna.slice( i, i+3 ).join('') ], [] );

console.log(cdn5);

実行結果は

["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"]

1	["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"]

となり文字列を分割できていることが分かります。

2：sliceメソッド

sliceメソッドは先ほども出てきました。これの基本的な使い方は「開始位置」と「終了位置」を指定してその範囲の文字を分割してくれるメソッドです。形式的に示すと以下のようになります。

var str = 文字列;

str.slice(開始位置、終了位置);

var str = 文字列;

str.slice(開始位置、終了位置);

sliceメソッドの使いかたの例

簡単なソースコードを見てみます。

const rna = "UGGUGUUAUUAAUGGUUU";
let cdn4 = [];
for (let i = 0; i < rna.length; i+=3) {
    cdn4.push(rna.slice(i, i+3));
}
console.log(cdn4);

const rna = "UGGUGUUAUUAAUGGUUU";

let cdn4 = [];

for (let i = 0; i < rna.length; i+=3) {

cdn4.push(rna.slice(i, i+3));

}

console.log(cdn4);

実行結果は

["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"]

1	["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"]

となります。

3：substrメソッド

substrメソッドは文字数を指定できるメソッドとなります。

基本的な形式は以下のようになります。

var str = 文字列;

str.substr(開始位置、文字数);

var str = 文字列;

str.substr(開始位置、文字数);

substrメソッドの使いかたの例

簡単なソースコードを見てみます。

const rna = "UGGUGUUAUUAAUGGUUU";
let cdn2 = [];
for (let i = 0; i < rna.length / 3; i++) {
    cdn2.push(rna.substr(i * 3, 3));
}
console.log(cdn2);

const rna = "UGGUGUUAUUAAUGGUUU";

let cdn2 = [];

for (let i = 0; i < rna.length / 3; i++) {

cdn2.push(rna.substr(i * 3, 3));

}

console.log(cdn2);

実行結果は

["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"]

1	["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"]

4：substringメソッド

最後にsubstringメソッドを用いた文字列の分解を紹介します。

先ほどの「substr」と名称が少し似ていますが、「substring」は文字数を指定するのではなく、「開始位置」と「終了位置」を指定することで「分割」処理を行います。

基本的な形式は以下のようになります。

var str = 文字列;
 
str.substring( 開始位置, 終了位置 );

var str = 文字列;

str.substring( 開始位置, 終了位置 );

substringメソッドの使いかたの例

簡単なソースコードを見てみます。

const rna = "UGGUGUUAUUAAUGGUUU";
let cdn3 = [];
for (let i = 0; i < rna.length; i += 3) {
    cdn3.push(rna.substring(i, i + 3));
}
console.log(cdn3);

const rna = "UGGUGUUAUUAAUGGUUU";

let cdn3 = [];

for (let i = 0; i < rna.length; i += 3) {

cdn3.push(rna.substring(i, i + 3));

}

console.log(cdn3);

実行結果は

["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"]

1	["UGG", "UGU", "UAU", "UAA", "UGG", "UUU"]

となります。

システム エンジニア: 他の関数と合わせると様々な表現が可能になるんですね！

プロジェクト マネージャー: 理解いただけたようですね。ここで紹介した以外にも関数はあります。実際コードを書いて覚えていきましょう。

JavaScriptで文字列を分割してみよう

以上でJavaScriptでの文字列分割は網羅したといっても問題ありません。

しかし、この記事を見ただけでは身についたとはいえません。実際に自分でコードを書いてみて、文字列を分割してみて初めて身についたといえるでしょう。

文字列を分割するときには、分割するケースに応じて、最も効率がいいメソッドを選択できるように学習を進めましょう。

最後になりますが、JavaScriptは似たメソッドが数多くあります。今後JavaScriptを勉強していくならばどんどんコードを書いて経験を積むように意識すればいいでしょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

JavaScriptで文字列を分割するには？

JavaScriptのsplit関数とは？

JavaScriptでのsplitの使い方10パターン

1：splitの基本的な使い方

2：正規表現を指定する

3：split + join

4：split + forEach

5：split + slice

6：replace + split

7：split + reverse

8：split + shift / pop

9：split + sort

JavaScriptのsplitで起こりやすいエラー

JavaScriptでsplit以外に文字列を分割するメソッド4つ

1：reduceメソッド

reduceメソッドの使いかたの例

2：sliceメソッド

sliceメソッドの使いかたの例

3：substrメソッド

substrメソッドの使いかたの例

4：substringメソッド

substringメソッドの使いかたの例

JavaScriptで文字列を分割してみよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

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

JavaScriptで文字列を分割するには？

JavaScriptのsplit関数とは？

JavaScriptでのsplitの使い方10パターン

1：splitの基本的な使い方

2：正規表現を指定する

3：split + join

4：split + forEach

5：split + slice

6：replace + split

7：split + reverse

8：split + shift / pop

9：split + sort

JavaScriptのsplitで起こりやすいエラー

JavaScriptでsplit以外に文字列を分割するメソッド4つ

1：reduceメソッド

reduceメソッドの使いかたの例

2：sliceメソッド

sliceメソッドの使いかたの例

3：substrメソッド

substrメソッドの使いかたの例

4：substringメソッド

substringメソッドの使いかたの例

JavaScriptで文字列を分割してみよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptでのDOM操作とは｜さらに活用する3つの方法

jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介

JavaScriptでtoStringメソッドとは？コードでわかりやすく紹介

JavaScriptでのwhileの使い方とは？繰り返し処理の基本的な使い方からソースコードを交えて解説！