【JavaScript】includes()で指定した文字列が含まれているかを調べる!

(この記事は2022年9月15日に投稿されました。)

JavaScriptで指定した文字列を含むかどうかを調べる方法の1つとして、includes()があります。

includes()とは対象のオブジェクトから指定した値を含むかどうかを判別するメソッドになります。

指定した文字列を含むかどうかを調べることから、含むか含まないかの真偽値を返り値として返すようになります。

そして、includes()は基本文頭から調べていきますが、パラメータによって開始位置を変更することができます。

そのため、検索範囲を設定してから指定した文字列を含むかどうかの調査が可能になります。

また、includes()は文字列だけでなく配列にも使用することができ、指定した要素が配列にあるかどうかを調べるようになります。

今回はJavaScriptのincludes()で指定した文字列が含まれているかを調べる方法について紹介していきます。

この記事はこんな方におすすめ
・指定した文字列が含まれているかどうかを調べたい人
・入力フォームで不適切な文字列が含まれていないか調べたい人
・指定した要素が配列に含まれているかどうか調べたい人




includes()とは

冒頭でも言いましたが、includes()とは指定した文字列が含まれるかどうかを調べるメソッドになります。

含まれるかどうかを調べるため、文字列の文頭や文末、途中でも含まれていると判断されます。

includes()の書き方

JavaScriptのincludes()の書き方は下記のようになります。

対象の文字列の後ろにincludes()を指定し、パラメータを指定することで、対象の文字列の中から検索文字列を検索することができます。

includes()のパラメータ

includes()のパラメータは下記のようになります。

  1. 調べる文字列(必須):
    含まれているかどうかを調べる文字列を指定する
  2. 開始位置(任意):
    スタートする文字列の位置をインデックスで指定する

indexOf()は必須パラメータとして「調べる文字列」を指定します。

そして、任意パラメータとして、「開始位置」を指定することができます。

includes()の返り値

includes()の返り値は、指定した文字列があるかないかの真偽値(true/false)を返すようになります。

includes()で指定した文字列の位置を検索するサンプルコード

includes()で指定した文字列の位置を検索するサンプルコードをご紹介します。

ここでは下記の3つの場合でincludes()を使用します。

  1. 調べる文字列が含まれている場合
  2. 調べる文字列が含まれていない場合
  3. 調べる文字列の大きさが異なる場合

調べる文字列が含まれている場合

調べる文字列が含まれている場合にincludes()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

調べる文字列が含まれている場合にincludes()を使用した結果

「諸行無常」という文字列が含まれているため、includes()によってtrueが返されています。

そのため、画面に「true」が表示されています。

調べる文字列が含まれていない場合

調べる文字列が含まれていない場合にincludes()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

調べる文字列が含まれていない場合にincludes()を使用した結果

「祇園精舎」という文字列が含まれていないため、includes()によって「false」を返すようになります。

そのため、「false」が画面に表示されています。

調べる文字列の大きさが異なる場合

調べる文字列の大きさが異なる場合ににincludes()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

調べる文字列の大きさが異なる場合にincludes()を使用した結果

includes()は同じ文字だとしても大文字と小文字を区別して判別するようになります。

そのため、「JUST」や「Dream」は同じ文字列ですが、大きさの異なる文字れ列は含まれていないため、両方とも「false」が表示されています。

includes()で開始する位置を設定して指定した文字列が含まれているかを調べる場合

includes()で開始する位置を設定して指定した文字列が含まれているかを調べる場合は、2つ目のパラメータに「開始位置」を指定します。

開始する位置を指定するので、開始位置よりも前にあるインデックスの文字列は対象外となります。

ここでは下記の2つの場合でincludes()を使用します。

  1. 開始位置に正の数を指定する場合
  2. 開始位置に負の数を指定する場合

開始位置に正の数を指定する場合

開始位置に正の数を指定して、includes()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

開始位置に正の数を指定してincludes()を使用した結果

includes()の開始位置に正の数を指定することで、文字列の開始位置を設定しています。

そのため、「前の塵」は開始位置を5文字ずらしても、含まれているため「true」が表示されています。

しかし、「ほろびぬ」は開始位置を15文字ずらして、含まれなくなることから「false」が表示されています。

開始位置に負の数を指定する場合

開始位置に負の数を指定して、includes()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

開始位置に負の数を指定してincludes()を使用した結果

includes()の開始位置に負の数を指定すると、開始位置が設定されなくなります。

そのため、「思う」や「心」は含まれていると判別され、「true」が表示されています。

includes()を配列に対して使用する場合

includes()は文字列だけでなく、配列にも使用することができます。

配列に対して使用することで、指定した要素が配列に含まれているかどうかを調べることができます。

そのため、こちらも返り値は「真偽値」となります。

⚫︎ Main.js

⚫︎ 実行結果

配列に対してincludes()を使用した結果

includes()によって指定した要素が配列に含まれているかどうかを調べています。

そのため、「沙羅双樹」は含まれているため「true」を、「諸行無常」も含まれていますが、開始位置が設定されているため「false」が表示されています。

includes()を使用した実際の例

includes()を使用した実際の例についてご紹介します。

例えば、入力フォーム画面で不適切な文字列が含まれてるかどうか調べることができます。

⚫︎ index.html

⚫︎ 実行結果

includes()を入力フォーム画面で使用した結果

includes()によって入力した文字列に不適切な文字列が含まれているかどうかを調べています。

そのため、含まれている場合はメッセージが表示され、含まれていない場合はメッセージが表示されなくなります。

指定した文字列が含まれているかを調べる他のメソッド

指定した文字列が含まれているかを調べることができるメソッドは、includes()以外にも存在します。

ここでは、指定した文字列が含まれているかを調べることができるメソッドについてご紹介します。

指定した文字列で始まるかどうかを調べる場合

指定した文字列で始まるかどうかを調べる場合はstartsWith()を使用します。

startsWith()とは、始まりの文字が指定した文字列を含むかどうかを調べることができるメソッドになります。

⚫︎ Main.js

⚫︎ 実行結果

startsWith()で指定した文字列で始まるかどうかを調べた結果

startsWith()によって指定した文字列で始まるかどうかを調べています。

そのため、「祗園精舎」の場合は「true」を、「諸行無常」の場合は「false」が表示されています。

指定した文字列で終わるかどうかを調べる場合

指定した文字列で終わるかどうかを調べる場合はendsWith()を使用します。

endsWith()とは、終わりの文字が指定した文字列を含むかどうかを調べることができるメソッドになります。

⚫︎ Main.js

⚫︎ 実行結果

endsWith()で指定した文字列で終わるかどうかを調べた結果

endsWith()によって指定した文字列で終わるかどうかを調べています。

そのため、「表す。」の場合は「true」を、「沙羅双樹」の場合は「false」が表示されています。

検索した文字列のインデックスを取得する場合

検索した文字列のインデックスを取得する場合は、indexOf()を使用します。

indexOf()とは、指定した文字列の出現位置を取得するメソッドになります。

⚫︎ Main.js

⚫︎ 実行結果

indexOf()で指定した文字列の出現位置を取得した結果

indexOf()によって指定した文字列を検索し、インデックスを取得しています。

そのため、「春の夜」のインデックスである「12」が表示されています。

もし、indexOf()について詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ includes()とは指定した文字列が含まれているかどうかを調べるメソッドである

⚫︎ includes()を使用するには1つのパラメータが必須であり、最大で2つのパラメータを指定できる
・ 調べる文字列(必須)
・ 開始位置(任意)

⚫︎ 調べる文字列が含まれる場合にincludes()を使用すると、「true」を返す

⚫︎ 調べる文字列が含まれない場合にincludes()を使用すると、「false」を返す

⚫︎ 調べる文字列の大きさが異なる場合にincludes()を使用すると、「false」を返す
(大文字と小文字は別の文字列と認識してされる)

⚫︎ includes()のパラメータに「開始位置」を指定することで、開始位置を設定して指定した文字列を含むかどうかを調べることができる
(負の数を指定すると、範囲は設定されない)

⚫︎ includes()は文字列だけでなく、配列にも使用することができる
(指定した要素が含まれているかどうかの真偽値を返り値として返す)

⚫︎ 指定した文字列で始まるかどうかを調べる場合はstartsWith()を使用する

⚫︎ 指定した文字列で終わるかどうかを調べる場合はendsWith()を使用する

⚫︎ 検索した文字列のインデックスを取得する場合はindexOf()を使用する

コメントを残す

メールアドレスが公開されることはありません。