こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptの指定した文字列を含むかどうかのチェック方法について説明します。プログラムにおいて、条件文などを作成する場合、ある文字列を含むかどうかで実行処理内容を変更したい時がありますよね。しかし、他のプログラミング言語とのやり方が違ったり、正規表現が絡んだりすると、一見難しそうに感じてしまうでしょう。
JavaScriptの文字列のチェック方法について、メソッドの使い方や基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
そもそも、文字列のチェックとは？
文字列のチェックはどのような時に必要なのでしょうか。文字列のチェックがプログラムで書けると、含まれている文字によって異なる処理を一括で行うことができます。
例えば、顧客データ処理の際に、住所データの中から決まった文字列や番号の羅列があった場合に、対処法が異なるとします。その際に、1つや2つのデータでしたら、目視でやってしまうこともできますが、数百数千となってくると、膨大な時間と労力を使うことになりますよね。
しかし、JavaScriptを始めとした多くのプログラミング言語では、決まった文字を指定したり、正規表現を用いることで、特定の文字列を含んでいるかどうか調べることができます。次からは、JavaScriptの文字列を含むかどうかチェックできるメソッドの使い方や、実際のプログラムに組み込んだ例を説明します。
なお、JavaScriptの正規表現について理解が曖昧な方は、以下の記事などを参考にしてください。
参考 JavaScriptの正規表現とは？一から分かりやすく説明しますウェブカツ ブログJavaScriptの文字列を含むかどうかのチェック方法
ここからは、JavaScriptにおける特定の文字列を含むかどうかのチェックに使用されるメソッドについて、使用頻度が高いindexOfメソッド・includesメソッド・matchメソッドを紹介します。それぞれのメソッドの特徴や使い方を、分かりやすく解説します。
indexOfメソッド
1つ目は、indexOfメソッドです。このメソッドは、調査したい文字列の中で、指定した文字が何文字目にあるかという値を調べてくれるメソッドです。大文字と小文字も区別しているため、注意が必要です。
基本構文
|
1 |
調査対象の文字列名.indexOf('チェックしたい文字'); |
indexOfメソッドはこのように使います。調査したい文字列が格納されている変数に対して、indexOfと書きます。indexOfの直後の小括弧（）内に、文字列に含まれているかどうか調べたい文字を指定します。
このメソッドを用いて、もし文字列に指定した文字が含まれていたら、その文字が始まる順番が戻り値となり、含んでいなかったら-1となります。そのため、文字列を含むかどうかのチェックでは、戻り値が-1かどうかで判断できます！なお、JavaScriptは文字列内の順番等は0から数え始めるので、注意してください。
実践プログラム例
|
1 2 3 4 5 6 |
// 文字列を定義 var str = 'DogCatMouse'; if (str.indexOf('Cat') != -1){ console.log('Catが含まれています'); } |
では、実際にプログラムに組み込むことを想定した場面を見てみましょう。2行目で文字列を定義しています。変数strには、’DogCatMouse’と格納されていますね。4行目のif文の条件に、今回登場したindexOfメソッドが使用されています。
ここでは、strに格納された文字列内に、’Cat’という文字が入っているかを調査しています。「!=」は「等しくない」という演算子なので、indexOfメソッドの戻り値が-1でなかったらとし、文字列内に指定した文字が含まれているかチェックしています。
大文字小文字の区別も含めて、条件を満たしているため、’Catが含まれています’と表示されます。
includesメソッド
2つ目は、includesメソッドです。このメソッドは単に、調査したい文字列の中に指定した文字が含まれているかを判断します。こちらも、大文字小文字の区別が必要になります。
基本構文
|
1 |
調査対象の文字列名.includes('チェックしたい文字'); |
includesメソッドはこのように使います。調査したい文字列が格納されている変数に対して、includesと記述し、直後の小括弧（）内に、文字列に含まれているかどうか調べたい文字を引数として指定します。
もし、調査する文字列内に指定した文字が含まれていたら真(true)、なかったら偽(false)が結果として返ってきます。
実践プログラム例
|
1 2 3 4 5 6 |
// 文字列を定義 var str = 'DogCatMouse'; if (str.includes('Horse') == true){ console.log('Horseが含まれています'); } |
では、実際にプログラムに組み込むことを想定した場面を見てみましょう。先ほどと似た処理を行うプログラムになっていて、2行目で文字列を定義し、4行目以降で文字列内の調査結果に応じた分岐文が記述されています。
4行目のif文内にて、「includesメソッドの戻り値がtrueだったら」という条件により、調査したい文字列内に、指定した文字が含まれているかのチェックを行っています。今回は、指定した文字の’Horse’が文字列に含まれていないため、if文内の処理は実行されません。
matchメソッド
3つ目は、matchメソッドです。このメソッドは正規表現を用いて、調査したい文字列の中に、決まったパターンが含まれているかを判断します。
基本構文
|
1 |
調査対象の文字列名.match('正規表現を用いた文字列パターン'); |
matchメソッドはこのように使います。調査したい文字列が格納されている変数に対して、matchと記述し、直後の小括弧（）内に、正規表現を用いて調べたい文字列パターンを指定します。
指定した文字列パターンが含まれていたら、戻り値としてその文字列が返ってきます。一方、含まれていなかったらnullが返ってきます。
実践プログラム例
|
1 2 3 4 5 6 7 8 |
// 文字列を定義 var str = 'dogcatmouse'; // matchメソッドを使用して、a~eの文字列が含まれているか調査 var results = str.match(/[a-e]/g); // resultsを表示 console.log(results); // ['d', 'c', 'a', 'e']と表示される |
ここでは、変数strに指定した文字列’dogcatmouse’内に、「a～e」が含まれているかどうか正規表現でチェックしています。また、正規表現にて、gオプションを今回は含んでいるため、一致した文字をすべて返します。
今回は、strに格納された文字列にaからeが含まれているので、その結果が8行目に表示されてます。もし、一致しなかったら、resultsにはnullが格納されていることになります。
まとめ
いかがでしたでしょうか？今回は、JavaScriptの文字列を含むかどうかの確認方法について、使用頻度が高いものを紹介しました。
JavaScriptには上記で紹介したメソッド以外にも、文字列をチェックするメソッドが複数用意されています。ぜひ、JavaScriptの文字列チェック法ついて理解し、Webサービス作成やシステム構築に活かしてください。
