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

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

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

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(区切り文字 または 正規表現[, 分割数]);

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


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

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

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

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

2:正規表現を指定する

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

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


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


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

3:split + join

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

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


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


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

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

4:split + forEach

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

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


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


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

5:split + slice

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

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


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


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


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


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

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

6:replace + split

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

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


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


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

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

7:split + reverse

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

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


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


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

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

8:split + shift / pop

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

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


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


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

9:split + sort

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

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


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


「 」で分割し、アルファベットソートできていることが分かります。

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

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

以上ではJavaScriptでsplitを用いて文字列を分割する方法を紹介してきました。しかし、この方法での文字列分割は気を付けなければいけない点があります。

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

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


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

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


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

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

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

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

1:reduceメソッド

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


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

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

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


実行結果は


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

2:sliceメソッド

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

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

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


実行結果は


となります。

3:substrメソッド

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

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

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

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


実行結果は

4:substringメソッド

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

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

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

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

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


実行結果は


となります。

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

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

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

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

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

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

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


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

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

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags