.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. JavaScriptで文字列を分割する方法は?splitの使い方を紹介

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

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
JavaScriptで文字列を分割する方法は?splitの使い方を紹介
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    システム
    エンジニア
    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(区切り文字 または 正規表現[, 分割数]);

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


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

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

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

    このように、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メソッドの使いかたの例

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


    実行結果は


    となります。

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

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

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

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

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

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

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

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

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

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

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

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

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

    • 充実した研修制度

      充実した研修制度

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

    • 資格取得を応援

      資格取得を応援

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

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

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

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

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

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

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

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

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    JavaScript新着案件New Job