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

JavaScriptのsplitは文字分割の関数

split()は文字列を分割するために使用する関数です。

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

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

split関数の基本的な使い方

JavaScriptのsplit関数は、文字列を特定の区切り文字で分割し、その結果を配列として返す関数です。
以下に基本的な使い方を示します：

let str = "Hello, World!";
let result = str.split(", ");

console.log(result);  // ["Hello", "World!"]

この例では、split関数を使用して文字列"Hello, World!"を, （カンマとスペース）で分割しています。その結果、["Hello", "World!"]という配列が得られます。

また、split関数には引数として正規表現も使用できます。例えば、以下のように複数の区切り文字で文字列を分割することも可能です：

let str = "apple-banana/orange";
let result = str.split(/[-/]/);

console.log(result);  // ["apple", "banana", "orange"]

この例では、split関数を使用して文字列"apple-banana/orange"を-または/で分割しています。その結果、["apple", "banana", "orange"]という配列が得られます。

以上がJavaScriptのsplit関数の基本的な使い方です。この関数を使うことで、文字列を簡単に分割できることがお分かりいただけるかと思います。
ただし、split関数は元の文字列を変更しないことに注意してください。分割結果は新しい配列として返され、元の文字列はそのまま保持されます。この特性を理解しておくと、元のデータを保持しながら、そのデータをさまざまな形で操作したい場合に非常に便利です。

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

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

const str = "平成 太郎";
const words = str.split(" ");
console.log(words); // Output: ["平成", "太郎"]

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

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

文字列の先頭または末尾がセパレータの場合の例：

const str = ",Hello,World,";
const words = str.split(",");
console.log(words); // Output: ["", "Hello", "World", ""]

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

最大要素数を制限する例：

const str = "Hello,World,JavaScript,Python,Ruby";
const words = str.split(",", 3);
console.log(words); // Output: ["Hello", "World", "JavaScript"]

splitは正規表現で区切れる

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

const address = "東京都新宿区";
const pattern = /都|道|府|県/;
const [city, area] = address.split(pattern);

console.log(city); // 出力: "東京"
console.log(area); // 出力: "新宿区"

正規表現は自由度が高い反面、誤った指定をするとバグが発生する原因となる場合があります。使用する場合には様々なケースでの検証を行なってください。

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エンジニア向けの勉強会・イベント情報を提供しています。

興味のある方はぜひご参加ください。

• 「JavaScript」に関する勉強会・イベントを探す
• 「プログラミング」に関する勉強会・イベントを探す
• 「初心者」に関する勉強会・イベントを探す