JavaScriptのsplitとは？基本的な書き方や正規表現などについて解説

JavaScriptは、知名度が高いプログラミング言語の一つです。

知名度が高い分、多くのメソッドが存在します。

この記事では、あらゆる場面で役立つ利便性が高いメソッドである "split" について取り上げます。

splitは、JavaScriptを使用しているプログラマーの方は習得しておいた方が良い便利なメソッドです。

JavaScriptのsplitとは？

JavaScriptのsplitとは、ある文字列を、部分文字列で分けることによって、文字列の配列に分割できるメソッドです。

JavaScriptの文字列オブジェクトの標準メソッドの一つです。

例えば、"山田 太郎"という文字列を半角スペースによって分けると、"山田"と"太郎"の二つになります。

この時、"山田"という苗字と"太郎"という下の名前を分けて保存したいとしましょう。

その場合、"山田"と"太郎"の間に半角スペースがあれば、splitメソッドを使い、容易に取り出すことが可能です。

基本的な書き方

splitの書き方についてですが、セパレータをsplitメソッドの最初の引数に指定します。

セパレータとは、区切りに使用する文字のことを指します。

セパレータは、文字列や正規表現を指定し、セパレータの文字列を複数にしましょう。

そうすると、複数の文字列が、指定した通りに連続して、現れる部分だけで分割されます。

分割した数の文字列を格納した配列がsplitの返り値です。

セパレータを指定しない場合、文字列が一つだけ配列になって返るようになっています。

分割する文字列の最初の文字をセパレータにすると、返り値の配列の最初には、何も含まれません。

同様に、分割する文字列の最後の文字をセパレータにすると、配列の最後の要素が空文字になるということを覚えておきましょう。

実例

splitメソッドの構文は下記の通りです。

   str.split([separator[, limit]])
 
   splitの実例は、次の通りです。

   var str = "朝、昼、夜";
   var ret = str.split("、");

結果として、retには　[“朝”, “昼”, “夜”]　といったように、カンマで区切った文字列が配列として返ります。

正規表現について

正規表現とは

正規表現とは、文字や記号を使い、文字列の中の特定部分を指定する表現方法のことを指します。

正規表現を使用すると、行頭や行末、数値だけを指定したり、特定の文字コードを指定したり、あらゆる方法で文字列を表現することが可能です。

文字列のことをパターンと呼ぶこともあるため、覚えておきましょう。

正規表現のパターン例

正規表現のパターン例には、下記のようなものがあります。

   /t{2}/

これは正規表現のパターン例の一つで、二つ以上の”t”の組み合わせにマッチするものです。

例えば、settleという単語は、tとtが二つ続く組み合わせがあるため、/t{2}/という正規表現のパターンを表した文字列です。

仮にこれがsetという単語の場合、tは一つしかないため、/t{2}/には当てはまりません。

上記ように、パターンにマッチした特定の文字列を取り出すことが可能になることを"正規表現"と呼んでいます。

splitメソッドでの正規表現

splitのセパレータには、正規表現を使用できます。

splitのセパレータに正規表現を使用するということは、任意の文字列パターンに合わせ、文字列を分割するということです。

splitメソッドでの正規表現は、下記の通りです。

下記のように指定すると、文章を任意の数値で分割することが可能です。

   var str = "Aを買う。Bを買う。Cを買う。";
   var ret = str.split (/[0-9]/);

結果として、retには[“”, “Aを買う。”, “Bを買う。”, “Cを買う。”] といったように、数値で区切った文字列が配列として返ってきます。

strの先頭に数値が入っているため、ret配列の先頭は空文字列になっている点に注意しましょう。

splitメソッドでテキストを改行で分割し、配列に格納するやり方

文字列もしくは文字列が格納された変数に対して、splitを使用しましょう。

第一引数に分割する文字を指定することも可能です。

しかし、文字列に含まれる改行コードを区切り文字の対象にし、文字列を行で分割する場合については、正規表現を利用しましょう。

実際に書く場合、下記の手順で進めます。

まずは、改行が入力されたテキストエリアを用意しましょう。

次に、テキストエリアに入力された文章を、改行コードで分割し、1行ずつの配列にします。

   <textarea id="message">  
   メロン
   イチゴ
   グレープ
   </textarea>

   このように入力すると、
 
   メロン
   イチゴ
   グレープ

上記のように3行の入力があるテキストエリアが作成されます。

改行は、ブラウザの内部においては、￥nで保持しています。

この￥nをsplitの第一引数に正規表現として指定すると、改行で分割できるため、覚えておきましょう。

splitメソッドにおけるエラーについて

splitメソッドにおけるエラーの例

splitメソッドにおいて、エラーが生じることがあります。

下記の例を見てみましょう。

    var string = document.location;
    var split = string.split('/');

初期状態でstringの値が一つしかない場合、カンマ区切りではない値が入っているため、Number型と判定されます。

その結果、"string.split is not a function"といった表示のエラーが生じます。

エラーの対処法

上記のようなエラーを対処する方法について説明します。

   var string = document.location;
   var split = string.split('/');

上記の

   var string = document.location;

の部分を

   var string = document.location + '';

に変更すれば問題はありません。

これは、"document.location"がLocationオブジェクトであるためです。

デフォルトの.toString()については、文字列形式で場所を返します。

したがって、連結によってそれがトリガーされるという流れになります。

また、"document.URL"を使い、文字列を取得することも可能です。

ぜひ、覚えておきましょう。

joinメソッドの活用とfor文

joinメソッドとは

joinメソッドとは、配列の全要素を連結した文字列を返すメソッドのことを指します。

各要素は全てが文字列に変換されて、引数として要素を連結する区切り文字を指定することが可能です。

区切り文字を省略した場合、カンマとして見なされます。

区切り文字に空文字を指定した場合は、各要素は区切り文字なしで連結されるようになっています。

使い方について

joinメソッドの使い方ですが、次のような書き方で使います。

   join()
   join(str)

join()を使用する場合は、引数を指定していない状態です。

引数とは、メソッドを使う際に、メソッドにわたす値のことを指します。

引数を指定しない方法で行うと、次の "りんご, ばなな" のように、引数にカンマが指定されたものとして処理されます。

   var array = ["りんご", "ばなな"];
   var result = array.join();
   console.log ( result );

このような形でプログラムを組むと、「りんご, ばなな」といった表示になります。

join(str)を使用する場合は、strに文字列を指定してください。

strとはstringの略称で、文字列を指します。

strに:を指定しましょう。

"りんごばなな"と表示されていたプログラムは、join(str)にjoin(“:”)と指定することによって、"りんご:ばなな"と表示されます。

   var array = ["りんご", "ばなな"];
   var result = array.join(":");
   console.log ( result );

このような形でプログラムを組むと、「りんご：ばなな」といった表示になります。

for文について

for文とは、繰り返し処理を実行するためのJavaScriptの構文のことを指します。

JJavaScript以外のプログラミング言語でも使用される構文です。

for文の正式な構文は、下記の通りです。

   for ([初期化式]; [条件式]; [加算式])

まとめ

今回は、JavaScriptのsplitと、関連する用語について解説しました。

大事な点をもう一度振り返っていきます。

• JavaScriptのsplitとは、ある文字列を、部分文字列で分けることによって、文字列の配列に分割できるメソッド
• 正規表現とは、文字や記号を使い、文字列の中の特定部分を指定する表現方法
• joinメソッドとは、配列の全要素を連結した文字列を返すメソッド
• for文とは、繰り返し処理を実行するためのJavaScriptの構文

今回紹介したJavaScriptのsplitを活用することで、エンジニアとしてさらなる活躍を目指せるでしょう。

JavaScriptを使用する案件では、フリーランスエンジニアを求める案件も数多くあります。

フリーランスエンジニアとして、案件を探すのであればおすすめなのが、フリーランスITエンジニア専門エージェント「HiPro Tech」 です。

当サービスではJavaScriptを使用する案件を多数扱っています。

フロントエンド専門の案件やフロントエンド・バックエンド双方を担当する案件、モダンな環境で開発ができる案件など扱う案件の幅は広いです。

また、案件の紹介だけでなく、面談前後のフォローや契約内容・契約延長の代理交渉なども行っており、効率良く案件を獲得する可能性を高めることができます。

フリーランスエンジニアとして独立を目指す人やフリーランスエンジニアとして活躍の幅を広げたいとお考えであれば、ぜひ登録し、案件探しにお役立てください。