.NET開発者のためのブログメディア

SE: split関数について詳しく知りたいのですが、教えてもらえますか？

PM: わかりました。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"]

となります。

SE: 他の関数と合わせると様々な表現が可能になるんですね！

PM: 理解いただけたようですね。ここで紹介した以外にも関数はあります。実際コードを書いて覚えていきましょう。

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

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

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

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

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

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

2020/03/17 2020/03/19
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

2020/03/16 2020/03/19
【.NETが統合】.NET 5の概要と今後のリリース予定

2020/03/05 2020/10/08

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

.NET開発者のためのブログメディア

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で文字列を分割してみよう

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

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

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

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

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務