JavaScriptでsplitを使って文字列を分割する方法【初心者向け】
プログラミング初心者向けに、JavaScriptで【split】を使う方法を解説した記事です。本記事では、splitをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでsplitを使う方法について解説します。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
田島メンター！文字列を分割するってどういうことですか？
文字列を指定した区切り文字で、複数のデータに分けることだよ。分けたデータは配列として扱うことができるんだ。
どのような書き方があるのですか？
例を見ながら説明していくね！
splitとは
プログラムを作っていると、文字列をさらに分割して、配列として扱いたい場面があるのではないでしょうか。そんな時に便利なのが、split関数です。
split関数は、ある文字列を、指定した区切り文字で分割し、配列にすることができます。
配列とは、複数のデータをひとまとめに扱える型のことです。
また、splitでは、区切り文字として、正規表現というルールを使用することができ、いろんなパターンの分割を行うことができます。
実際の開発現場では、カンマ区切りやタブ区切りの文字列を分割してデータとして扱いたい時などによく使います。
splitの書き方
基本的なプログラムは以下のようになります。対象となる文字列の後ろに「.」ピリオドを付けて記載します。
文字列.split( 区切り文字 )
splitで文字列の分割をおこなう
この記事では、splitで文字列の分割をおこなう方法について解説します。
まずは、簡単な関数を用意します。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
// splitのサンプル１
var suuji = "10,20,30,40,50";
var kugiri = ",";
var array_suuji = suuji.split(kugiri);
console.log(array_suuji);
// splitのサンプル２
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+/」と記述することで、「１文字以上の連続した空白」という意味になります。この場合、空白は何文字連続していても１つの区切り文字として扱われます。
「Hello my name is Taro」という文字列が入った「words」という変数と、「１文字以上の連続した空白」という意味の区切り文字が入った「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でリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
