JavaScriptでsplitを使って文字列を分割する方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【split】を使う方法を解説した記事です。本記事では、splitをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでsplitを使う方法について解説します。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

大石ゆかり

田島メンター!文字列を分割するってどういうことですか?

田島悠介

文字列を指定した区切り文字で、複数のデータに分けることだよ。分けたデータは配列として扱うことができるんだ。

大石ゆかり

どのような書き方があるのですか?

田島悠介

例を見ながら説明していくね!

 

splitとは

プログラムを作っていると、文字列をさらに分割して、配列として扱いたい場面があるのではないでしょうか。そんな時に便利なのが、split関数です。

split関数は、ある文字列を、指定した区切り文字で分割し、配列にすることができます。

配列とは、複数のデータをひとまとめに扱える型のことです。

また、splitでは、区切り文字として、正規表現というルールを使用することができ、いろんなパターンの分割を行うことができます。

実際の開発現場では、カンマ区切りやタブ区切りの文字列を分割してデータとして扱いたい時などによく使います。

 

splitの書き方

基本的なプログラムは以下のようになります。対象となる文字列の後ろに「.」ピリオドを付けて記載します。

文字列.split( 区切り文字 )

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

splitで文字列の分割をおこなう

この記事では、splitで文字列の分割をおこなう方法について解説します。

まずは、簡単な関数を用意します。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      // splitのサンプル1
      var suuji = "10,20,30,40,50";
      var kugiri = ",";
      var array_suuji = suuji.split(kugiri);
      console.log(array_suuji);

      // splitのサンプル2
      var words = "Hello my name is Taro";
      var kugiri = /\s+/;
      var array_words = words.split(kugiri);
      console.log(array_words);
    </script>
  </body>
</html>

 

実行すると次のようになります。

では、それぞれの内容を詳しく見ていきましょう。

 

基本的なsplitのサンプル例

コード

var suuji = "10,20,30,40,50";
var kugiri = ",";
var array_suuji = suuji.split(kugiri);
console.log(array_suuji); 

 

解説

こちらは、基本的な文字列分割の例です。

「10,20,30,40,50」という文字列が入った「suuji」という変数と、「,」という区切り文字が入った「kugiri」という変数を用意します。

splitで「10,20,30,40,50」という文字列を「,」で配列に分割し、「array_suuji」という変数に入れています。

その結果、配列の内容が次のように出力されます。

["10","20","30","40","50"]

 

splitする個数を指定するサンプル例

コード

var suuji = "10,20,30,40,50";
var kugiri = ",";
var array_suuji = suuji.split(kugiri, 2);
console.log(array_suuji);

 

解説

こちらは、splitする個数を指定する文字列分割の例です。

「10,20,30,40,50」という文字列が入った「suuji」という変数と、「,」という区切り文字が入った「kugiri」という変数を用意します。

splitで「10,20,30,40,50」という文字列を「,」で配列に分割しますが、「kugiri, 2」の部分の「2」という数字を指定することで、2個指定して分割した後、「array_suuji」という変数に入れています。

その結果、配列の内容が次のように出力されます。

["10","20"]

 

正規表現を利用したsplitのサンプル例

コード

var words = "Hello  my    name   is    Taro";
var kugiri = /\s+/;
var array_words = words.split(kugiri);
console.log(array_words);

解説

こちらは、正規表現というルールを使用した例です。「/\s+/」と記述することで、「1文字以上の連続した空白」という意味になります。この場合、空白は何文字連続していても1つの区切り文字として扱われます。

「Hello my name is Taro」という文字列が入った「words」という変数と、「1文字以上の連続した空白」という意味の区切り文字が入った「kugiri」という変数を用意します。

splitで「Hello my name is Taro」という文字列を空白で配列に分割し、「array_words」という変数に入れています。

その結果、配列の内容が次のように出力されます。

正規表現は、この他にも様々な指定が可能です。

["Hello", "my", "name", "is", "Taro"]

 

今回の記事は以上です。

 

大石ゆかり

splitは、区切り文字に文字列を指定する方法と正規表現を指定する方法があるんですね。

田島悠介

そうだね。分割したい文字列が整っていない場合、例えば、手入力によるものだったりする時に正規表現を使うと柔軟な分割ができるんだよ。

大石ゆかり

へぇ〜、勉強になります!

 

TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。

JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長

開発実績:PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。

その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ!を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。