JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで文字列に部分文字列が含まれるか判定する方法｜search()メソッドの使い方

JavaScriptで部分文字列の存在を確認するには？

JavaScriptで「ある文字列の中に特定の部分文字列（サブストリング）が含まれているか」を確認したい場合、Stringオブジェクトのsearch()メソッドを使うのが一般的な方法の一つです。

search()メソッドは、引数に渡した文字列（または正規表現）が対象の文字列内で最初に現れる位置（インデックス）を返します。見つからなかった場合は -1 を返すため、この戻り値を判定条件として使うことで、部分文字列の有無を簡単にチェックできます。

search()メソッドを使ったサンプルコード

次のコードは、文字列「Tutorialspoint: Free Video Tutorials」に部分文字列「point」が含まれているかどうかを判定する例です。

<html>
<head>
  <title>JavaScript String search() Method</title>
</head>
<body>
  <script>
    var re = "point";
    var str = "Tutorialspoint: Free Video Tutorials";

    if (str.search(re) == -1) {
      document.write("含まれていません");
    } else {
      document.write("含まれています！");
    }
  </script>
</body>
</html>

このコードを実行すると、「point」という文字列が見つかるため、画面には「含まれています！」と表示されます。

よりモダンな代替手段：includes()メソッド

ES6（ECMAScript 2015）以降では、より直感的に書けるincludes()メソッドも利用できます。includes()は、部分文字列が含まれていれば true、含まれていなければ false を返すシンプルなメソッドです。

var str = "Tutorialspoint: Free Video Tutorials";

if (str.includes("point")) {
  console.log("含まれています！");
} else {
  console.log("含まれていません");
}

indexOf()メソッドでも判定可能

また、従来から使われているindexOf()メソッドでも同様の判定が可能です。search()と同じく、見つかった位置のインデックスを返し、見つからない場合は -1 を返します。

var str = "Tutorialspoint: Free Video Tutorials";

if (str.indexOf("point") !== -1) {
  console.log("含まれています！");
}

使い分けのポイント

  • search()：正規表現を使った柔軟な検索が必要な場合に便利
  • includes()：単純に含まれているかどうかだけを知りたい場合に最適（可読性が高い）
  • indexOf()：位置（インデックス）情報も必要な場合に有効

目的に応じてこれらのメソッドを使い分けることで、文字列操作を効率的に行えます。

  1. JavaScriptで文字列を検索する方法【search()メソッドの使い方を解説】

    JavaScriptで文字列を検索する方法 JavaScriptで文字列の中から特定の文字列を探すには、search()メソッドを使用します。このメソッドは、引数に渡した文字列（または正規表現）が対象の文字列内で最初に一致した位置（インデックス）を返し、見つからなかった場合は -1 を返します。 以下は、JavaScriptで文字列を検索するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" />

  2. JavaScriptでボタンがクリックされたかどうかを判定する方法

    JavaScriptを使えば、ボタンがクリックされたかどうかを簡単に判定できます。最も一般的な方法は、addEventListener()メソッドでクリックイベントを監視することです。以下に、ボタンのクリックを検出し、クリックされた回数を画面に表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1