こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptの文字列の分割の仕方について説明します。プログラムにおいて、ある文字列を複数に分割したい場面がありますよね。また、CSVファイルから表に変換したいときなどにも分割メソッドはとても便利です！
JavaScriptの文字列の分割方法について、基本構文だけでなく、文字列操作には欠かせない正規表現に関しても説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
JavaScriptの正規表現について
そもそも、正規表現とは何者でしょうか。
正規表現とは、特殊文字の組み合わせによって、文字列内の繰り返しパターンを指定し、そのパターンに適した文字列を照合するための表現です。
郵便番号や電話番号のような、決まった型を持っている文字列を、その都度プログラムを変更して読み取るのはめんどくさいですよね。正規表現を用いて、「このパターンの文字列が出現したら」と指定することで、わざわざプログラムを変更する必要なく簡単に認識することができます。
今回のテーマと少しずれるので、正規表現について詳しく知りたい方は、以下の記事をさんこうにしてください。正規表現の書き方や、使用頻度の高い記号などについて説明されています！
参考 JavaScriptの正規表現とは？一から分かりやすく説明しますウェブカツ ブログJavaScriptの文字列の分割方法
ここから、今回のテーマであるJavaScriptの文字列の分割方法について説明します。
JavaScriptの文字列の分割には、splitメソッドやsubstrメソッドなどが用いられます。それぞれ分割方法でも特徴が違います。ここからは、splitメソッドとsubstrメソッドについて、基本構文とメソッド使用例を紹介します。
splitメソッド
splidメソッドは、文字列に対して決まった文字で区切ったり、正規表現を用いて分割することができるメソッドです。分割化された文字列は配列となります。また、分割したい個数を指定することもできる制限機能がついています。
基本構文
|
1 2 |
// splitメソッド 分割対象の文字列.split('区切り文字',分割数); |
分割したい文字列が格納されている変数名に対して、splitメソッドはこのように使います。最初の引数に、分割するときの目印となる区切り文字を書きます。ここで、正規表現を使い分割することもできます。第二引数には、分割後に配列に格納される要素数を指定できます。第二引数は指定しなくても構いません。
実践プログラム例
それでは、実際にプログラムで用いる際は、どのようになるのか見てみましょう。splitメソッドを用いて、区切り文字による分割例と、正規表現を用いた分割例をご紹介します。
文字を用いた分割
|
1 2 3 4 5 6 7 8 |
// 分割される文字列を定義 var prefecture = '神奈川県埼玉県千葉県茨城県栃木県群馬県'; // '県'という文字で、文字列を分割する var results = prefecture.split('県'); // 分割して得られた配列をresultsに格納 // 配列resultsを表示 console.log(results); // ['神奈川','埼玉','千葉','茨城','栃木','群馬']と表示される |
2行目で定義されている文字列prefectureに対して、’県’という区切り文字で文字列を分割しているプログラムです。5行目で、変数prefectureに格納されている文字列に対して、split内の引数に指定した’県’という文字で分割し、resultsに格納しています。
resultsは要素数が6つの配列となり、8行目でその結果が表示されています。’神奈川’や’埼玉’と単独で取り出したい場合は、results[キー]の番号を指定すれば取り出せます。
正規表現を用いた分割
|
1 2 3 4 5 6 7 8 |
// 分割対象の文字列を定義 var animal = 'Dog1Cat5Mouse'; // 正規表現を用いた分割 var results = animal.split(/[0-9]/); // 0～9の数字が出現したら分割 // 分割後の文字列を表示 console.log(results); // '['Dog', 'Cat', 'Mouse']'と表示される |
続いて、正規表現を用いた分割です。先ほどと同様に、2行目で分割対象となる文字列を定義しています。5行目で、文字列が格納されている変数animalに対して、正規表現を用いて分割しました。
今回使用した正規表現は、「/0-9/」です。これは、「0～9の数値が出現したら」という意味で、ここでは数値が出てきたら分割するというメソッドになります。分割した結果がresultsに格納され、8行目で3つの要素を格納している配列が表示されます。
このように、「正規表現を使った文字列の分割」と聞くと少し難しそうに感じますが、splidメソッドの使い方と正規表現について簡単に理解しておくことで、誰でもプログラムが書けます！
substrメソッド
続いて、substrメソッドを用いた分割について説明します。substrメソッドは文字列の内容に関わらず、分割したい”文字数”と、どこから分割するかという”位置”を指定して分割する際に使います。では、構文と実際のコード例を見てみましょう。
基本構文
|
1 |
分割対象の文字列.substr(開始位置, 文字数); |
分割したい文字列が格納されている変数名に対して、substrメソッドはこのように使います。最初の引数に、先頭から何文字目に分割を始めるかという”開始位置”を指定します。なお、JavaScriptの数の数え方は「0」からなので、文字列の最初から分割したい場合は最初の引数が0となります。
第二引数には、分割したい文字数を指定します。「何文字分、分割するか」という値なので、こちらは指定する値は1からになります。また、第二引数は値を指定しなくてもよくて、その場合は分割の開始位置から最後まで分割するようになっています。
実践プログラム例
|
1 2 3 4 5 6 7 8 |
// 分割対象の文字列を定義 var animal = 'DogCatMouse'; // substrメソッドを用いて、文字列を分割 var result = animal.substr(3,3); // 分割後の文字列を表示 console.log(result); // 'Cat'と表示されます |
それでは、実際のプログラムを見てみましょう。ここでは、2行目に定義された変数animalに格納されている文字列に対して、substrメソッドを用いて分割を行います。
5行目で、変数animalに対してsubstr(3,3)としています。これは、「先頭から3番目（0から数えて）の文字」から「3文字分」抽出するようになっています。そのため、resultには’Cat’が格納されて、8行目で表示されます。
substrメソッドと似たような役割を果たすメソッドには、substringメソッドやsliceメソッドなどもあるので、興味がある方は以下の記事を参考にしてください！
参考 【JavaScript】文字の切り出し方について解説！ウェブカツ ブログまとめ
いかがでしたでしょうか？今回は、JavaScriptの文字列の分割の仕方について、splitメソッドとsubstrメソッドについての基本的な用途や正規表現を交えた分割などを紹介しました。
分割方法だけでなく、文字列の処理について幅広く理解しておくことで、プログラムエラーも減るだけでなく、プログラムの作成効率がぐんっと上がります！ぜひ、JavaScriptの分割を始めとした文字列処理方法ついて理解し、Webサービス作成やシステム構築に活かしてください。
