Проверка подстроки в JavaScript: метод includes()

kirilljsx

Введение

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

Этот метод полезен при валидации данных, фильтрации текста и обработке пользовательского ввода. Знание его особенностей поможет избежать ошибок и написать надёжный код.

Что такое метод includes() и как он работает

Метод includes() — это встроенная функция JavaScript, которая проверяет наличие подстроки в строке. Он выполняет чувствительный к регистру поиск, что означает, что заглавные и строчные буквы различаются.

Если вам нужно проверить, есть ли в предложении «Hello World» слово «hello», метод вернёт false, потому что «hello» с маленькой буквы отличается от «Hello». Это важная особенность, которую нужно учитывать при написании кода.

Основная идея простая: метод сканирует строку и возвращает true, если подстрока найдена, или false в противном случае. Это гораздо удобнее, чем старые методы вроде indexOf().

Основные характеристики:

Возвращаемое значение: boolean (true или false)
Чувствительность к регистру: да, различает прописные и строчные буквы
Поддержка всех браузеров: доступен во всех современных версиях
Простота использования: минимум параметров и понятный синтаксис

Синтаксис и параметры

Синтаксис метода очень простой и состоит из двух параметров:

string.includes(searchValue, start)

Первый параметр — это строка, которую вы ищете. Второй параметр (опциональный) указывает, с какой позиции начинать поиск. Если вы его не передадите, поиск начнётся с начала строки (с индекса 0).

Давайте разберёмся с каждым параметром подробнее:

Параметр	Описание	Обязательный
searchValue	Строка для поиска в исходной строке	Да
start	Позиция, с которой начинать поиск (по умолчанию 0)	Нет

Важные моменты при использовании параметров:

Параметр searchValue не может быть регулярным выражением — только строка
Если передать undefined вместо searchValue, метод будет искать строку “undefined”
Параметр start должен быть числом; отрицательные значения игнорируются
Если start больше длины строки, метод вернёт false

Практические примеры использования

Рассмотрим реальные примеры, которые помогут вам понять, как применять includes() в своём коде.

Пример 1: базовая проверка наличия слова

const text = "JavaScript is awesome";
const result = text.includes("awesome");
console.log(result); // true

Этот код проверяет, есть ли в строке слово “awesome”. Поскольку оно там есть, на консоль выведется true.

Пример 2: проверка с учётом регистра

const greeting = "Hi Sammy";
console.log(greeting.includes("hi")); // false
console.log(greeting.includes("Hi")); // true

Обратите внимание: поиск слова “hi” вернул false, потому что в строке оно написано с заглавной буквы. Это показывает, насколько важна чувствительность к регистру.

Пример 3: использование параметра start

const sentence = "Hello world, welcome to the universe.";
console.log(sentence.includes("world")); // true
console.log(sentence.includes("world", 12)); // false

Во втором случае поиск начинается с 12-й позиции, где слова “world” уже нет, поэтому результат false.

Пример 4: проверка пустой строки

const text = "Some text";
console.log(text.includes("")); // true

Любая строка содержит пустую строку, поэтому результат всегда true. Это может быть полезным при написании условных операторов.

Частые ошибки и как их избежать

Даже простой метод может привести к ошибкам, если не знать его особенностей. Давайте разберёмся, на что нужно обратить внимание.

Самая распространённая ошибка — забывать о чувствительности к регистру. Если пользователь введёт текст в другом регистре, поиск может не сработать. Для решения этой проблемы нужно привести обе строки к одному регистру перед проверкой.

Типичные ошибки:

Не учитывать регистр букв при сравнении
Передавать регулярное выражение вместо строки
Забывать, что includes() работает с подстроками, а не со словами
Неправильно использовать параметр start для пропуска символов

Правильный подход для игнорирования регистра:

const userInput = "HELLO";
const text = "hello world";

// Неправильно
console.log(text.includes(userInput)); // false

// Правильно
console.log(text.toLowerCase().includes(userInput.toLowerCase())); // true

Приведение обеих строк к нижнему регистру с помощью toLowerCase() решает проблему с регистром. Это стандартный подход при обработке пользовательского ввода.

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

В JavaScript есть несколько способов проверить, содержит ли строка подстроку. Давайте сравним includes() с популярными альтернативами.

Метод	Возвращает	Особенности	Когда использовать
includes()	boolean	Простой, читаемый	В 95% случаев
indexOf()	число	Возвращает позицию, -1 если не найдено	Когда нужна позиция подстроки
search()	число	Поддерживает регулярные выражения	Для сложных паттернов поиска
match()	массив	Возвращает массив совпадений	Когда нужны все совпадения

Почему includes() лучше для базовой проверки:

Код более читаемый и понятный
Не нужно проверять наличие -1 (как в indexOf())
Специально разработан для проверки наличия, а не для поиска позиции
Быстрее выполняется на строках, где нет необходимости в позиции

Пример сравнения:

const text = "Learning JavaScript";

// Старый способ с indexOf()
if (text.indexOf("JavaScript") !== -1) {
  console.log("Found");
}

// Современный способ с includes()
if (text.includes("JavaScript")) {
  console.log("Found");
}

Второй вариант выглядит чище и понятнее, не так ли?

Практическое применение в реальных проектах

Метод includes() используется в самых разных сценариях разработки. Вот несколько реальных примеров, где он действительно полезен.

При валидации электронной почты нужно проверить наличие символа @. При обработке URL нужно убедиться, что он содержит правильный протокол. При фильтрации списков товаров пользователь может искать предметы по названию.

Пример 1: валидация email

function isValidEmail(email) {
  return email.includes("@") && email.includes(".");
}

console.log(isValidEmail("user@example.com")); // true
console.log(isValidEmail("invalid.email")); // false

Эта простая функция проверяет наличие необходимых компонентов email адреса.

Пример 2: проверка формата URL

function isSecureUrl(url) {
  return url.toLowerCase().includes("https://");
}

console.log(isSecureUrl("https://example.com")); // true
console.log(isSecureUrl("http://example.com")); // false

Эта функция убеждается, что URL использует защищённый протокол HTTPS.

Пример 3: фильтрация списка

const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];
const searchTerm = "top";

const filtered = products.filter(product => 
  product.toLowerCase().includes(searchTerm.toLowerCase())
);

console.log(filtered); // ["Laptop"]

Этот код показывает, как использовать includes() для поиска товаров по названию.

Пример 4: проверка прав доступа

const userRoles = "admin moderator user";
const requiredRole = "admin";

if (userRoles.includes(requiredRole)) {
  console.log("Access granted");
} else {
  console.log("Access denied");
}

Эта функция проверяет, есть ли у пользователя необходимая роль для доступа к ресурсу.

Что нужно помнить при использовании

Метод includes() — отличный инструмент для проверки наличия подстроки в строке. Он прост в использовании, но имеет несколько важных особенностей, которые стоит учитывать.

Главное правило: помните о чувствительности к регистру и при необходимости приводите строки к одному виду перед проверкой. Это избежит неожиданного поведения вашего кода и поможет избежать ошибок логики.

Для большинства задач проверки наличия подстроки это будет идеальным выбором. Только если вам нужна позиция подстроки или сложный поиск по регулярному выражению, рассмотрите альтернативные методы вроде indexOf() или search().