JS contains: includes() для строк и массивов с примерами кода

[kirilljsx]

Метод includes() в JavaScript проверяет, содержит ли строка или массив нужный элемент. Это простой способ избежать сложных циклов для поиска. Он вернёт true или false, что упрощает валидацию данных.

С его помощью решают задачи вроде проверки ключевых слов в тексте или элементов в списке. Полезно для форм, фильтров и API-ответов. Далее разберём, как это работает на примерах.

Как работает includes() для строк

Метод String.prototype.includes() ищет подстроку в строке и возвращает true, если нашёл, иначе false. Он чувствителен к регистру, так что “Java” и “java” — разные вещи. Второй аргумент задаёт позицию старта поиска, по умолчанию 0.

Возьмём строку “The quick brown fox”. Проверка на “fox” даст true, а на “Fox” — false. Если искать пустую строку, всегда true. Это удобно для базовой валидации, но для сложных случаев нужен трюк с регистром.

Вот базовый синтаксис:
строка.includes(подстрока, позиция)

• true для найденной подстроки, включая пустую строку.
• false, если ничего не найдено.
• Нюанс: не работает с регулярками, кинет TypeError.

Примеры поиска в строках

Пример	Код	Результат
Базовый поиск	'Быть или не быть'.includes('Быть')	true
С регистром	'Синий кит'.includes('синий')	false
С позицией	'Быть или не быть'.includes('Быть', 1)	false
Пустая строка	'текст'.includes('')	true

Для игнора регистра используй toLowerCase():

const text = 'Синий кит';
console.log(text.toLowerCase().includes('синий'.toLowerCase())); // true

includes() для массивов

Array.prototype.includes() проверяет наличие элемента в массиве, начиная с указанной позиции. Работает с примитивами и объектами по ссылке. Возвращает boolean, не меняет оригинал.

Пример: массив контактов, проверка объекта. Сравнение по ссылке, так что одинаковые свойства не сработают без строгого равенства. Идеально для списков разрешённых значений.

Синтаксис: массив.includes(элемент, с_позиции)

• Ищет точное совпадение (===).
• Объекты сравнивает по ссылке, не по содержимому.
• Полезно для флагов: permissions.includes('admin').

Сравнение с другими методами

Метод	Что возвращает	Преимущества	Недостатки
includes()	true/false	Простой, быстрый	Только boolean, чувствителен к типу
indexOf()	Индекс или -1	Получаешь позицию	Старый синтаксис
some()	true/false	Гибкий callback	Медленнее для простых задач

Пример для массива:

const contacts = [{name: 'Иван'}];
console.log(contacts.includes({name: 'Иван'})); // false — разные ссылки

Обход чувствительности к регистру

includes() различает регистр, что часто мешает. Для поиска без учёта “Аа” преобразуй в нижний. Это стандартный хак для пользовательского ввода.

В формach проверяй email-домены или ключевые слова. Без этого “Admin” и “admin” — разные. Комбинируй с split() для массивов слов.

Шаги для нечувствительного поиска:

• Приведи обе строки к toLowerCase().
• Используй includes() на результате.
• Для массивов: map() + includes()

Примеры:

const input = 'ADMIN ACCESS';
const required = 'admin';
console.log(input.toLowerCase().includes(required.toLowerCase())); // true

Задача	Решение с toLowerCase()	Без него
Поиск логина	true	false
Фильтр тегов	Работает	Пропускает
Email-домен	@gmail.com любой регистр	Только точный

Практические кейсы в проектах

В реальных задачах includes() фильтрует меню, валидирует URL или блокирует слова. Комбинируй с Array.includes() для прав доступа. Быстрее циклов, поддерживается везде.

Проверь URL на домен: window.location.href.includes('example.com'). Для массивов — черные списки IP. Не забывай типы: Number(1) !== ‘1’.

Ключевые сценарии:

• Валидация форм (запрет мата).
• Фильтры поиска.
• Проверки ролей пользователей.

const roles = ['user', 'admin'];
if (roles.includes(userRole)) { /* доступ */ }

Когда includes() не хватит

Метод хорош для простоты, но уступает regex для шаблонов. match() найдёт все вхождения, indexOf() — позицию. Думай о производительности в больших данных.

Осталось regex-интеграция и edge-кейсы вроде Unicode. Попробуй комбо с test() для гибкости. Это база, но в проде тестируй на реальных данных.