JavaScriptのsplitで文字列操作をマスターしよう!

プログラミング
JavaScriptのsplit関数の使い方を解説する記事です。文字列オブジェクトを操作して分割する役割があること、引数に何を持つか、返り値はどんなものかを解説します。また、split関数を使う具体的な例を取り上げて、実際のコードを紹介します。
JavaScriptのsplitで文字列操作をマスターしよう!

JavaScriptでは、文字列を使ってさまざまな操作ができます。文字列を意図した形式に修正することも多々必要となります。そんな場合に、split関数が大いに役立ちます。どのようにsplit関数を使えるか、実際のコードを紹介しながら解説します。

JavaScriptのsplitは文字分割の関数

splitは文字列オブジェクトの関数

splitは、文字列オブジェクトの標準のメソッドです。JavaScriptの文字列オブジェクトは、さまざまなメソッドを持っていて、文字列を切り出したり、置換をしたり、文字列内の検索をしたり、HTMLのタグを追加したり、と多岐にわたる機能を果たします。splitもその機能の一部で、文字列を複数に分割する役割を果たします。

splitは指定した文字で区切れる

splitを使うことによって、ひとつの文字列を、指定した文字列が現れるところで分けて、複数に分割することができます。たとえば、「平成 太郎」という文字列を「 」(半角スペース)で分けると、「平成」と「太郎」の2つになります。苗字と名前を別々に保存したい場合で、苗字と名前の間に確実に半角スペースがあるなら、splitで簡単に取りだすことができるのです。

この区切りに使いたい文字のことをセパレータと呼びます。「平成 太郎」のセパレータは、半角スペースだということになります。セパレータは、splitメソッドのひとつめの引数に指定します。セパレータは、文字列や正規表現を指定します。セパレータの文字列を複数にすると、その複数の文字列がその通りに連続して現れるところだけで分割されるようになります。たとえば、「abacadae」という文字列でセパレータに「ac」を指定したら、「ab」と「adae」の2つに分かれます。「a」や「c」が現れるすべてのところで分割されるわけではないことに注意しましょう。

メソッドの返り値は、配列になります。分割された数だけの文字列が格納された配列がsplitの返り値です。 セパレータを指定しなければ、文字列がひとつだけ配列になって返ります。また、分割する文字列の先頭の文字をセパレータにしたなら、返り値の配列の最初には、なんの文字も含まれないものが含まれます。同じように、分割する文字列の最後の文字をセパレータにするなら、配列の最後の要素が、空文字になります。

返り値の要素の数を制限したいなら、引数のふたつめに、制限したい最大値を数値として指定しておくことができます。もちろん、分割の数が指定した数値に満たなかった場合は、指定した要素数に満たない数の配列が返ってくることになります。

splitは正規表現で区切れる

splitのセパレータには、正規表現も使えます。正規表現とは、文字列のパターンのことです。splitのセパレータに正規表現を使うということは、任意の文字列パターンに合わせて文字列を分割するということになります。たとえば、「東京都新宿区」を正規表現のセパレータ「都道府県」で区切ると、「東京」と「新宿区」のふたつになるという具合です。

JavaScriptのsplitの使い方

日付情報を得る

表示されている日付情報や時間の情報などを取得して、JavaScriptで月だけを取り出したり、日にちだけを取り出したりしたいときがあります。そんなときにも、splitを使って簡単に取り出せます。

<div class="date">2019-05-01</div>というように、DIVタグのなかに日付情報がハイフン区切りで記載されているとします。

var d = "2019-05-01";
console.log(d.split("-"));

返り値は、[ '2019', '05', '01' ]となります。月を取り出したいのであれば、2番目の要素(インデックスは1)、日にちを取り出したいのであれば、3番目の要素(インデックスは2)を指定します。

最初の行だけを表示する

splitは簡単な定義ながら、長い文章をすべて表示するのではなく、最初の一行だけを表示できるようにするためにも使えます。改行をセパレータとして指定するなら、各行が配列の要素として格納されます。改行は、画面上では目に見えませんが、文字列データのなかでは、「\n」としてデータ化されています。
たとえば、

「おはようございます。
本日もどうぞ
よろしくお願いいたします。」

なら、文字列データとしては、「おはようございます。\n本日もどうぞ\nよろしくお願いいたします。」となっています。ですから、セパレータとして「\n」を使うなら、各行の文字列を区切って取り出せるようになるのです。

var d = "おはようございます。\n本日もどうぞ\nよろしくお願いいたします。";
console.log(d.split("\n")[0]);

文字量が多いコンテンツをテーブルに表示させたいときなど、表示させたい文字の量を調整したいことが多々あると思います。そんなときには、splitで区切ったひとつめの要素だけが表示されるようにするのもひとつの手法です。splitのふたつめの引数に取り出したい要素の数を指定できますから、必要な分だけを返り値で受け取れて便利です。

文章のボリュームをはかる

splitを使うことによって、英文の文章のボリュームを図りだすことも可能です。英文の分量は、文字数よりも単語数で測りますから、splitでできるのです。日本語の場合は、単語ごとにスペースを使うことがないので残念ながらこの方法は適用されません。しかし、英文などの文章では、単語ごとに、半角スペースが入ります。それを利用して、半角スペースをセパレータとして使うのです。

var d = "Is this a pen? Yes, this is a pen.";
console. log(d.split(" ").length);

電話番号を整える

HTMLのフォームなどで、電話番号を入力してもらうシーンも多くあります。ユーザーは、指示書きをつけたとしても、かなりの確率で文字入力のパターンから外れ思いのままに自分の電話番号を入力します。ですから、入力の結果はハイフンを入れている電話番号とハイフンが入っていない電話番号が混在してしまうことになってしまうのです。

こういった状況を回避するために、JavaScriptで入力された電話番号の文字列を調整してあげることができます。具体的には、セパレータをハイフンとして分割します。そうすると、ハイフンが省かれた電話番号が配列となって格納されます。配列の各要素に格納された文字列を、ひとつの文字列にするためのメソッドである、joinを使って、分割された電話番号を結合してみましょう。

ユーザーが入力したハイフン入りの電話番号の文字列から、きれいにハイフンがなくなった文字列に整えることができるという小技なのです。もし、ユーザーがハイフンを入力しなかったとしても、要素がひとつだけの配列として格納されるので、動作に矛盾はありません。

var d = "(090) 1234ー5678";
console.log(d.split(/[-\ \(\) ー()]/).join(""));

joinの引数には空文字を入れるようにします。結合する箇所に何も入れないで結合だけをするという意味で、返り値を得ることができます。

まとめ

JavaScriptで、文字列を操作したいというシーンはたくさんあります。いろんな文字列操作のためのメソッドを覚えておくとよいでしょう。このsplitも使い勝手のよいメソッドのひとつとして、これからもぜひ活用してみてください。


この記事のキーワードに関する勉強会・イベントを探す

TECH PLAYでは、ITエンジニア向けの勉強会・イベント情報を提供しています。
興味のある方はぜひご参加ください。


おすすめのコラム