JavaScriptのincludesメソッドを完全理解：配列と文字列での違いと注意点
JavaScriptにおけるincludesメソッドは非常に便利で、特定の要素や部分文字列が「含まれているか」を簡単に確認できます。しかし、配列と文字列の両方で使用されるため、それぞれの挙動や違いを理解しておかないと、思わぬバグやトラブルの原因になりがちです。
この記事では、includesメソッドの配列と文字列での挙動の違いを詳しく解説し、混乱を避けるためのポイントをお伝えします。🚀
1. 配列のincludesメソッド
配列におけるincludesメソッドは、指定した値が配列内に含まれているかをチェックします。includesは、厳密等価演算子（===）を使用して値を比較する点が特徴です。
基本的な書式
array.includes(value, startIndex)
value: 配列内で探したい値startIndex（オプション）: 検索を開始するインデックス（デフォルトは0）
例: 配列でのincludes
const fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false
console.log(fruits.includes("apple", 1)); // false ("apple"はインデックス0にある)
- 厳密等価比較:
console.log([1, 2, 3].includes("1")); // false ("1"は文字列)
2. 文字列のincludesメソッド
文字列におけるincludesメソッドは、指定した部分文字列が文字列内に含まれているかをチェックします。比較対象は文字列で、部分一致を確認する動きになります。
基本的な書式
string.includes(substring, startIndex)
substring: 文字列内で探したい部分文字列startIndex（オプション）: 検索を開始するインデックス（デフォルトは0）
例: 文字列でのincludes
const sentence = "I love JavaScript";
console.log(sentence.includes("love")); // true
console.log(sentence.includes("Java")); // true
console.log(sentence.includes("script")); // false ("script"は小文字で指定)
console.log(sentence.includes("Java", 5)); // false ("Java"はインデックス5以降にない)
- 部分一致:
console.log("12345".includes("23")); // true
3. 配列と文字列でのincludesの違い
| 特性 | 配列のincludes |
文字列のincludes |
|---|---|---|
| データ型 | 配列 | 文字列 |
| 比較方法 | 厳密等価（===） |
部分一致 |
| 戻り値 | 指定した値が配列に含まれていればtrue |
指定した部分文字列が含まれていればtrue |
| 使い方の用途 | 配列内の値の存在確認 | 部分文字列の存在確認 |
4. トラブルの回避ポイント
includesの動きを正しく理解していないと、コードが意図した通りに動作しないことがあります。以下に注意すべきポイントを挙げます。
1. データ型に注意する
配列では厳密等価（===）で比較されるため、型が異なると一致しません。一方で、文字列のincludesは部分文字列として一致するかだけを確認します。
例: 型の違いでの挙動
console.log([1, 2, 3].includes("1")); // false
console.log("123".includes(1)); // true (1は部分文字列"1"と一致)
2. 部分一致を想定していないときの文字列検索
文字列のincludesは部分一致を確認します。完全一致を確認したい場合は、正規表現や他のメソッド（例: ===）を使う必要があります。
部分一致の問題例
const word = "javascript";
console.log(word.includes("java")); // true（意図しない部分一致）
完全一致を確認する方法
console.log(word === "java"); // false
3. オプション引数を活用する
検索開始位置（startIndex）を指定することで、不要な範囲を検索しないようにできます。
配列での例
const colors = ["red", "green", "blue", "red"];
console.log(colors.includes("red", 2)); // true (インデックス2以降を検索)
文字列での例
const message = "Hello, Hello, World!";
console.log(message.includes("Hello", 7)); // true (インデックス7以降で検索)
5. 実践例: 配列と文字列のincludesを使い分ける
シナリオ: ユーザー名の検索
配列での検索
複数のユーザー名を持つ配列から、指定したユーザー名が存在するかをチェックします。
const users = ["alice", "bob", "charlie"];
function isUserPresent(username) {
return users.includes(username);
}
console.log(isUserPresent("alice")); // true
console.log(isUserPresent("dave")); // false
文字列での検索
メッセージ内に特定のキーワードが含まれているかをチェックします。
const message = "Hello, @alice! How are you?";
function hasMention(username) {
return message.includes(`@${username}`);
}
console.log(hasMention("alice")); // true
console.log(hasMention("bob")); // false
まとめ
includesメソッドは、配列と文字列の両方で使える便利なメソッドですが、それぞれの動作をしっかり理解しておかないとバグの原因になりかねません。以下のポイントを押さえておきましょう：
- 配列では厳密等価（
===）で比較する。 - 文字列では部分一致を確認する。
- データ型や用途に応じて使い分ける。
この記事を参考にして、配列と文字列のincludesメソッドを正しく使いこなしましょう！ 😄
登録日：
更新日：