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

今回の記事は、

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

という悩みをお持ちの方に向けた記事になっています。

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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

まずは、検索したい文字列を直接指定して判定する方法について、以下の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が返されます

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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