「この文字列に特定の単語が含まれているか調べたい」「ファイル名が .png で終わるか確認したい」——こうした文字列の検索は、JavaScript の includes()・startsWith()・endsWith()・indexOf() といったメソッドで簡単にできます。それぞれ「含むか」「で始まるか」「で終わるか」「何文字目にあるか」と役割が分かれており、用途に合わせて選べます。この記事では、4つのメソッドの使い方と返り値の違い、大文字小文字を無視する方法、つまずきやすいポイントまでコード例で解説します。
目次
文字列を検索する4つのメソッド
まずは、それぞれのメソッドが「何を調べて、何を返すか」を一覧で確認しましょう。includes・startsWith・endsWith はtrue / false（真偽値）を返すのに対し、indexOf は見つかった位置（数値）を返す、という違いがポイントです。
| メソッド | 調べること | 返り値 |
|---|---|---|
includes() | 含まれているか | true / false |
startsWith() | その文字列で始まるか | true / false |
endsWith() | その文字列で終わるか | true / false |
indexOf() | 最初に現れる位置 | 位置（数値）/ -1 |
includes：含まれているか調べる
includes() は、指定した文字列が含まれていれば true、含まれていなければ false を返します。条件分岐でそのまま使えるので、もっとも手軽な検索方法です。
const text = "今日はいい天気です";
text.includes("天気"); // true
text.includes("雨"); // false
if (text.includes("天気")) {
console.log("「天気」が含まれています");
}第2引数に数値を渡すと、その位置から後ろだけを検索対象にできます。たとえば text.includes("天気", 5) なら、5文字目以降に「天気」があるかを調べます。
startsWith・endsWith：先頭・末尾を調べる
startsWith() はその文字列で始まるか、endsWith() は終わるかを判定します。URL が https で始まるか、ファイル名が特定の拡張子で終わるか、といったチェックでよく使います。
const url = "https://webool.net";
url.startsWith("https"); // true（httpsで始まる）
url.startsWith("http://"); // false
const file = "photo.png";
file.endsWith(".png"); // true（.pngで終わる）
file.endsWith(".jpg"); // falsestartsWith() も第2引数で開始位置を指定できます。"abcdef".startsWith("cd", 2) のように書くと、2文字目から見て「cd」で始まるか（この場合は true）を調べられます。
indexOf：位置を調べる
indexOf() は、指定した文字列が最初に現れる位置を数値で返します。位置は0から数え、見つからない場合は -1 を返します。「何文字目にあるか」を知りたいときに使います。
const text = "banana";
text.indexOf("a"); // 1（最初の "a" は1文字目）
text.indexOf("na"); // 2
text.indexOf("z"); // -1（見つからない）
// 末尾から探したいときは lastIndexOf
text.lastIndexOf("a"); // 5（最後の "a"）「含まれているか」を indexOf で判定するときは、見つからないと -1 が返る点に注意が必要です。次のように !== -1 で比較します。ただし「含むかどうか」を知りたいだけなら、結果が分かりやすい includes() を使う方がおすすめです。
// indexOf で「含むか」を判定する古い書き方
if (text.indexOf("na") !== -1) {
console.log("含まれています");
}
// includes なら意図が明確
if (text.includes("na")) {
console.log("含まれています");
}大文字・小文字を区別せずに検索する
これらのメソッドは、すべて大文字と小文字を区別します。"Hello".includes("hello") は false になります。大文字小文字を無視して検索したいときは、検索元と検索文字の両方を toLowerCase() で小文字にそろえてから比べます。
const text = "Hello World";
text.includes("hello"); // false
text.toLowerCase().includes("hello".toLowerCase()); // true検索キーワードを使った絞り込み機能などでは、この「両方を小文字にそろえる」方法を覚えておくと、利用者が大文字小文字を気にせず検索できるようになります。
配列の検索との違い
includes() と indexOf() は、配列にも同じ名前のメソッドがあります。文字列では「部分文字列が含まれるか」を調べますが、配列では「その要素がちょうど存在するか」を調べる点が違います。
// 文字列：部分文字列を探す
"apple".includes("pp"); // true
// 配列：要素そのものが一致するかを探す
["apple", "banana"].includes("apple"); // true
["apple", "banana"].includes("app"); // false（部分一致はしない）うまく判定できないときに確認すること
常に false / -1 になる
思った文字があるのに見つからないときは、まず大文字小文字の違いを疑いましょう。前述のとおりこれらは区別するため、toLowerCase() でそろえると解決することがよくあります。また、全角と半角の違い（ＡＢＣ と ABC）や、見えない空白文字が混ざっているケースもあります。
数値に対して使ってエラーになる
これらは文字列のメソッドなので、数値（number 型）にそのまま使うとエラーになります。数値の中に特定の桁が含まれるか調べたいときは、String(num) で文字列に変換してから検索してください。
const num = 12345;
// num.includes("3"); // エラー（数値にはメソッドがない）
String(num).includes("3"); // trueまとめ
文字列の検索は、目的に合わせて4つのメソッドを使い分けるのが基本です。要点を整理します。
- 含むか調べるなら
includes()（true / false）。 - 先頭・末尾の確認は
startsWith()/endsWith()。 - 位置を知りたいなら
indexOf()。見つからないと-1、末尾からはlastIndexOf()。 - 大文字小文字を無視するときは両方を
toLowerCase()でそろえる。 - 数値に使うときは
String()で文字列へ変換する。
「含むかどうか」を知りたい場面では、まず includes() を使うのが分かりやすくおすすめです。位置まで必要になったら indexOf()、と段階的に使い分けていきましょう。