【JavaScript】特定の文字列を含むか否かを評価する方法

2022年7月14日
Javascript
Javascript

Javascript

今回の記事は、

Javascriptを使って特定の文字列が含まれているかどうかをチェックしたい
色々なメソッドがあって、どれを使えば良いか分からない

という悩みを解決する記事になっています。

JavaScriptでは、特定の文字列が含まれているかを判定するメソッドが複数存在していますが、用途によって使い分けが必要で、いざという時にどれを使えば良いか混乱してしまいがちです。

今回は、それらのメソッドについて、サンプルコードを交えて使い方を解説していきます。今回の記事を読んでいただければ、上記のような悩みはすっかり無くなるかと思いますので、ぜひ参考にしてみてください。

フリーランス案件を探すならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い・福利厚生サービスが受けられる・首都圏の案件が中心	・給与保証制度で安定した収入を得られる・税務処理のサポートあり・マージン率は実質20%	・週2/週3の案件が多い・在宅/リモート案件が多い・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス・株式会社ユーザベース	・Sansan株式会社・株式会社一休・株式会社FiNC Technologies など	・クックパッド株式会社・株式会社カオナビ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている・カウンセリングに時間をかける・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント・業界経験者がキャリアコンサルタントを務める・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス・スキル・経験重視で評価してもらえる・他エンジニアの入札結果を見ることで自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社・株式会社サイバーエージェント・Chatwork株式会社など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ・ZOZOテクノロジーズ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

1 特定の文字列を含むかどうかチェックする方法
- 1.1 indexOf()メソッドの使い方
- 1.2 includes()メソッドの使い方
2 正規表現を使ってチェックする方法
3 最後に

特定の文字列を含むかどうかチェックする方法

まずは、検索したい文字列を直接指定して判定する方法について、以下の2つを解説します。

indexOf()メソッドを使う
includes()メソッドを使う

indexOf()メソッドの使い方

1つ目は、indexOf()メソッドを使う方法です。indexOf()メソッドは、検索したい文字列が含まれているかどうかを評価し、含まれている場合は文字列の出現位置を返します。以下にサンプルコードを示します。

// 検索対象の文字列
const targetStr = 'This is an apple.';

console.log(targetStr.indexOf('an'));
=> 8

console.log(targetStr.indexOf('on'));
=> -1

検索対象の文字列内に「an」が含まれているため、最初の出力結果の戻り値は8です（※JavaScriptにおいては、文字列の位置が0スタートとなっていることに注意してください）。

一方、文字列が含まれていない場合は、-1を返します。2つ目の例の「on」は検索対象の文字列に存在しないため、-1が返されます。

検索対象の文字列の中に該当する文字列が複数ある場合、通常は最初に出現した文字列の先頭位置を返します。もし、2番目以降に出現した文字列の先頭位置を取得したい場合は、indexOf()メソッドの第2引数に、検索開始位置を設定しましょう。以下のサンプルコードをご覧ください。

// 検索対象の文字列
const targetStr = 'This is an apple.';

console.log(targetStr.indexOf('is'));
=> 2

console.log(targetStr.indexOf('is', 3));
=> 5

検索対象の文字列には、「is」が2つ含まれています。indexOf()メソッドの第2引数を指定しない場合は、最初に出現した文字列の位置が返されるため、4行目のindexOf()メソッドの戻り値は2となります。一方、第2引数に3を指定すると、検索対象文字列の4文字目から検索を開始します。したがって、7行目のindexOf()メソッドの戻り値は5です。

また、indexOf()メソッドは、if文の条件式として記述されることも多いです。以下のサンプルコードをご覧ください。

// 検索対象の文字列
const targetStr = 'This is an apple.';

// 比較による文字列有無の判定
if (targetStr.indexOf('an') != -1) {
  console.log('文字列が含まれています。');
} else {
  console.log('文字列が含まれていません。');
}

// ビット反転演算子「~」を使った文字列有無の判定
if (~targetStr.indexOf('on')) {
  console.log('文字列が含まれています。');
} else {
  console.log('文字列が含まれていません。');
}

12行目の「~」は、対象の数値の符号を反転し1を引きます。例えば-1に「~」を作用させると、結果は0となります。if文の条件式が0の場合は、falseと同様に直後の文は実行されません。サンプルコードの場合、「on」は検索対象の文字列には含まれず、条件式の結果は0なるため、else以降の文が実行されます。

includes()メソッドの使い方

2つ目は、includes()メソッドを使う方法です。includes()メソッドはindexOf()メソッドとは違い、文字列が含まれている場合はtrue、含まれていない場合はfalseを返します。includes()メソッドのサンプルコードを、以下に示します。

// 検索対象の文字列
const targetStr = 'This is an apple.';

if (targetStr.includes('an')) {
  console.log('文字列が含まれています。');
}

if (targetStr.includes('is', 7)) {
  console.log('文字列が含まれています。');
} else {
  console.log('文字列が含まれていません。');
}

4行目のif文について、「an」は存在するため戻り値はtrueとなります。また、includes()メソッドはindexOf()メソッドと同様、検索開始位置を2番目の引数に指定可能です。8行目のif文では、includes()メソッドの2番目の引数で7を指定しているため、targetStrの8番目の文字から検索を行います。8番目以降に「is」は出現しないため、戻り値はfalseです。

正規表現を使ってチェックする方法

正規表現は、文字や記号を組み合わせて特定の文字列を指定する表現方法です。続いては、この正規表現を使って文字列が含まれているかを判定する方法について、以下の4つを紹介します。

match()メソッドを使う
search()メソッドを使う
test()メソッドを使う
exec()メソッドを使う

match()メソッドの使い方

1つ目は、match()メソッドを使う方法です。match()メソッドは、正規表現によって記述された文字列を引数にとります。

文字列が含まれていれば、文字列の開始位置などのデータが格納された配列、含まれていなければnullが返されるため、戻り値の違いを利用して文字列有無の判定が可能です。サンプルコードを以下に示します。

// 検索対象文字列
const targetStr = "This is an apple.";

const result1 = targetStr.match(/an/); // 配列が返される

if (result1 !== null) {
  // 配列がセットされている場合
  console.log(result1.index); // 「8」がセットされている
} else {
  // nullがセットされている場合
  console.log("文字列が含まれていません。");
}

const result2 = targetStr.match(/on/); // nullが返される

if (result2 !== null) {
  // 配列がセットされている場合
  console.log(result2.index);
} else {
  // nullがセットされている場合
  console.log("文字列が含まれていません。");
}

正規表現では、スラッシュ（/）で囲まれた範囲に検索したい文字列を記述します。4行目では、targetStrに「an」が含まれているため、result1には配列がセットされます。一方、14行目では「on」が含まれていないため、戻り値はnullです。この結果を利用し、if文でnullチェックを行えば、文字列が含まれているかどうかの判定処理を実装できます。

match()メソッドは、文字列が含まれていた場合に開始位置を取得できますが、実行速度が遅いという問題点があります。実行速度を意識しつつ文字列の出現位置を取得したい場合は、次節で解説するsearch()メソッドを利用しましょう。

search()メソッドの使い方

2つ目は、search()メソッドを使う方法です。search()メソッドは、引数に正規表現を使った文字列を指定し、戻り値はindexOf()メソッドと同様に、文字列の開始位置または-1を返します。サンプルコードは、以下の通りです。

// 検索対象の文字列
const targetStr = 'This is an apple.';

console.log(targetStr.search(/an/));
=> 8

console.log(targetStr.search(/on/));
=> -1

search()メソッドは、文字列が含まれている場合に開始位置を直接取得できます。文字列が含まれているか否かの判断だけでなく、文字列の出現位置を特定したい場合は、search()メソッドを利用するのがおすすめです。一方、文字列が含まれているか否かの判断のみを行いたい場合は、次節で解説するtest()メソッドを利用することをおすすめします。

test()メソッドの使い方

3つ目は、test()メソッドを使う方法です。test()メソッドは、正規表現を使って文字列が含まれているか否かを論理値で判断します。以下に、サンプルコードを示します。

// 検索対象の文字列
const targetStr = 'This is an apple.';

if (/an/.test(targetStr)) {
  console.log('文字列が含まれています。');
} else {
  console.log('文字列が含まれていません。');
}

if (/on/.test(targetStr)) {
  console.log('文字列が含まれています。');
} else {
  console.log('文字列が含まれていません。');
}

test()メソッドは、StringオブジェクトではなくRegExpオブジェクト（正規表現を取り扱うためのオブジェクト）のメソッドであるため、正規表現の文字列を先に記述した後で呼び出さなければなりません。したがって、anが含まれているか判定する場合は、「/an/」を先に記述したうえでtest()を呼び出します。

引数は、検索対象の文字列です。今まで解説したメソッドと用法が異なるため、注意してください。test()メソッドの戻り値はincludes()メソッドと同じく、文字列が存在した場合はtrue、存在しない場合はfalseを返します。

exec()メソッドの使い方

4つ目は、exec()メソッドを使う方法です。以下のサンプルコードをご覧ください。

// 検索対象の文字列
const targetStr = 'This is an apple.';

const result1 = /an/.exec(targetStr);

if (result1 !== null) {
  console.log(result1.index); // 「8」がセットされている
} else {
  console.log("文字列が含まれていません。");
}

const result2 = /on/.exec(targetStr);

if (result2 !== null) {
  console.log(result2.index);
} else {
  console.log("文字列が含まれていません。");
}

exec()メソッドはtest()メソッドと同じく、RegExpオブジェクトのメソッドで、検索対象の文字列を引数にとります。一方、戻り値はmatch()メソッドと同じく、文字列の開始位置などのデータが格納された配列、またはnullが返されます。

最後に

さて、ここまでJavascriptを特定の文字列が含まれるかどうかをチェックする方法について解説してきましたがいかがでしたか？

今回ご紹介した通り、Javascriptでは様々なメソッドが用意されているため、必要となったケース（正規表現を使用するか否か、戻り値がBoolean値であるか否かなど）に応じて適切なメソッドを選択する必要があります。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んでいただきありがとうございました。