こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptによる、文字列から指定した文字の切り取り方について説明します。プログラムにおいて文字列を格納したデータなどを扱う際に、〇文字目から△文字目までを切り取りたい場面や、決まったパターンが出てきたら切り取りたい時があります。しかし、文字列の操作には正規表現が絡んだり、他の言語とのやり方が異なり、使いこなすのは難しいですよね。
JavaScriptの文字の切り取り方について、メソッドの使い方や基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
文字の操作には正規表現が便利！
文字の切り取り方の説明に入る前に、正規表現についておさらいしましょう。
正規表現とは、文字列内において決まったパターンを調査したいときに、「この型があったら」と指定するために用いられるメソッドです。商品番号や郵便番号、個々に振られるデータなどを一括で取り出したいときに、とても有効的です。
正規表現には、2種類の書き方があり、” / “（スラッシュ）で囲む正規表現リテラルと、RegExpオブジェクトのコンストラクタ関数を使用する方法です。詳しくは、以下の記事で述べられています。
参考 JavaScriptの正規表現とは？一から分かりやすく説明しますウェブカツ ブログここからは、よく使われる正規表現の例について見てみましょう。
ここでは、使用頻度の高い4つについて取り上げます。
| 文字 | 意味 |
| [123] | 1,2,3のどれかが一致 |
| /^A/ | 行の先頭が ” A ” から始まる場合に一致 |
| /A*/ | ” A “や” AA “など直前の文字を0回以上繰り返す場合に一致 |
| {n} | 直前の文字がn回あった場合に一致 |
ここで示したのは正規表現の中でも一例で、他にもたくさん条件を分類できる書き方があります。また、これらを組み合わせることで、より詳細な検索を行うこともできます。例えば、上の例を組み合わせて、“[0-9]{3}”とすると、「0から9の数字が3回出現したら」という条件になり、「3桁の数字があったら」と同じ条件を作ることができます！
JavaScriptで文字の切り取りに有効的なメソッド3選
それでは、本テーマのJavaScriptによる文字の切り取り方について説明していきましょう。
matchメソッド
matchメソッドは、正規表現などを用いて、決まったパターンをした文字を切り取りたいときに適しています。文字列の中から、郵便番号や電話番号などのパターンが決まっている文字列を切り取るときには、matchメソッドを使いましょう！
基本構文
|
1 |
調査対象の文字列.match(切り取りたい文字の正規表現); |
matchメソッドは、このように使います。調査したい文字列が格納されている変数に対してmatchととり、その直後の小括弧内にて切り取りたい文字のパターンを正規表現によって指定します。では、実際に正規表現を用いて文字を抽出する例を見てみましょう。
実践プログラム例
|
1 2 3 4 5 6 7 8 |
// 文字列を定義 var str = '郵便番号123-4567東京都渋谷区'; // matchにて、郵便番号のみ切り取り var result = str.match(/^[0-9]{3}-[0-9]{4}$/); // 抽出結果を表示 console.log(result); // '123-4567'と表示される |
文字列が格納された変数strより、5行目でmatchメソッドを使用して郵便番号の形式「〇〇〇-〇〇〇〇」に沿ったデータのみを切り取るプログラムです。5行目のmatch内の正規表現にて、「正規表現」の章で説明した、「n桁の数字」を用いて、郵便番号を切り取っています。このように、正規表現を用いることで、簡単に指定した情報のみを取り出すことができます。
substrメソッド
substrメソッドは、指定した開始位置から決まった文字数だけ切り取りたいときに適したメソッドです。切り取りたい情報が何文字目から始まると分かっているときなどにとても有用性が高いです。それでは、基本構文から見てみましょう。
基本構文
|
1 |
調査対象の文字列.substr(開始位置, 切り取りたい文字数); |
substrメソッドは、このように使います。調査したい文字列が格納されている変数に対してsubstrととり、その直後の小括弧内にて切り取りたい文字の開始位置と文字数を指定します。
注意点として、JavaScriptを始めとしたいくつかのプログラミング言語では、最初の文字を0文字目とすることに注意してください。ただし、「切り取りたい文字数」に関しては、何文字切り取りたいかということなので、1からカウントします！では、実際のプログラム例を見てみましょう！
実践プログラム例
|
1 2 3 4 5 6 7 8 |
// 文字列を定義 var str = '商品Aが出荷された'; // substrメソッドを使用 var result = str.substr(4,2); // 結果を表示 console.log(result); // '出荷'と表示される |
ここでは、2行目で定義した文字列から、指定した範囲内の文字を切り取りました。5行目でsubstrメソッドを使用しており、ここでは変数strに格納されている文字列の4文字目（0から数えて）から2文字分を切り取るように指定しました。
8行目で結果を表示し、ここでは’出荷’と表示されます。このように、決まった定型文から、決まった文字数を切り取りたいときに使えるメソッドですね。
splitメソッド
splitメソッドは、あらかじめある文字によってデータが分けられている文字列などから、文字を切り取りたいときに適したメソッドです。実際に例を見てみましょう。
基本構文
|
1 |
調査対象の文字列.split(区切りに用いる文字); |
splitメソッドは、このように使います。調査したい文字列が格納されている変数に対してsplitととり、その直後の小括弧内にて区切りに使用したい文字を指定します。splitメソッドについても、正規表現を組み合わせることで汎用性が広がります。実際のプログラム例を見てみましょう。
実践プログラム例
|
1 2 3 4 5 6 7 8 9 |
// 文字列を定義 var str = '得意な科目：英語'; // splitにて、回答結果のみ切り取り var result = str.split(':'); // 結果を表示 console.log(result); // ["特異な科目", "英語"]と表示される console.log(result[1]); // "英語"と表示される |
ここでは、コロン「：」によって文字列を分割し、回答結果のみを切り取るプログラムを書きました。
5行目でsplitメソッドを用い、ここでは文字列 ” : ” を指定して文字を分割し、変数resultに格納しています。そのため、resultには分割しただけの結果が格納されているため、8行目ではその結果が表示されます。
9行目は、resultの配列内で表示したい要素のみを表示させているため、ここではsplitで分割された文字列の後半にある”英語”のみが切り取られて表示されます。
この他にも、substringメソッドやsliceメソッドなど、JavaScriptにおける文字列の操作に使えるメソッドがあるので、必要に応じて使い分けましょう！
まとめ
いかがでしたでしょうか？今回は、JavaScriptによる文字列から指定した文字の切り取り方について説明しました。
JavaScriptの文字列の操作には、上記で説明したメソッドの他にもたくさん用意されています。そのメソッドと正規表現を組み合わせることで、汎用性が広がります！ぜひ、今回学んだJavaScriptの文字の切り取り方について理解し、Webサービス作成やシステム構築に活かしてください。
![[初心者向け]PHPのCGIとは？](https://webukatu.com/wordpress/wp-content/uploads/2021/01/初心者向けPHPのCGIとは？-160x160.png)
