Проверка подстроки в JavaScript: 5 методов поиска и сравнение

Для кого эта статья:

• JavaScript-разработчики и программисты
• Студенты и начинающие специалисты в области веб-разработки

• Люди, интересующиеся оптимизацией производительности кода и методами работы со строками в JavaScript

  Работая с текстом в JavaScript, разработчик постоянно сталкивается с задачей поиска подстрок. "Как проверить, содержит ли строка определенный текст?" — вопрос, который возникает ежедневно, будь то валидация ввода пользователя, фильтрация данных или парсинг документов. К счастью, JavaScript предоставляет целый арсенал методов для этой задачи, от простейших встроенных функций до мощных регулярных выражений. Выбор правильного инструмента может значительно повлиять на производительность вашего кода и читаемость. Давайте разберемся, какой метод подойдет именно для вашей задачи. 🔍

Если вы стремитесь мастерски освоить не только проверку подстрок, но и весь JavaScript, обратите внимание на Обучение веб-разработке от Skypro. Программа включает глубокое изучение работы со строками, объектами и асинхронностью — ключевыми компонентами современной веб-разработки. Вместо разрозненных знаний вы получите структурированную экспертизу, востребованную на рынке труда.

5 JavaScript методов для обнаружения подстрок: обзор

JavaScript предоставляет разнообразные способы проверки наличия подстроки в строке, каждый со своими преимуществами и особенностями применения. Основные методы поиска подстроки можно разделить на две категории: встроенные методы строк и регулярные выражения. 🧰

Вот пять наиболее эффективных методов, которые должен знать каждый JavaScript-разработчик:

• string.includes(substring) — современный, читаемый метод, возвращающий булево значение
• string.indexOf(substring) — классический подход, возвращающий позицию подстроки или -1
• string.search(regexp) — поиск с использованием регулярного выражения, также возвращает индекс
• regexp.test(string) — проверка соответствия строки регулярному выражению, возвращает true/false
• string.match(regexp) — возвращает совпадающие подстроки или null, если совпадений нет

Давайте рассмотрим каждый метод подробнее, сравним их синтаксис, особенности и ситуации, когда их применение наиболее оправдано.

Алексей Кудрявцев, Senior Frontend Developer

Когда я работал над проектом для крупного интернет-магазина, нам потребовалось создать мощный поисковый интерфейс для каталога товаров. Изначально мы использовали простой поиск через includes(), который прекрасно работал для небольших наборов данных. Однако по мере роста каталога до десятков тысяч товаров, пользователи начали жаловаться на медлительность поиска.

После профилирования кода мы обнаружили, что вызов includes() для каждого товара становился узким местом. Заменив его на оптимизированные регулярные выражения с методом test(), мы смогли ускорить поиск примерно на 40% при сложных поисковых запросах. Этот опыт научил меня внимательно выбирать методы поиска подстрок в зависимости от масштаба задачи.

Метод includes() и indexOf(): синтаксис и особенности

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

Синтаксис метода includes():

string.includes(searchString[, position])

Где:

• searchString — строка, которую нужно найти
• position (опционально) — позиция в строке, с которой начать поиск (по умолчанию 0)

Метод includes() появился в ECMAScript 2015 и возвращает true, если строка содержит указанную подстроку, и false в противном случае:

const text = "JavaScript — мощный язык программирования";
console.log(text.includes("мощный")); // true
console.log(text.includes("Python")); // false
console.log(text.includes("javascript")); // false (регистрозависимый)
console.log(text.includes("мощный", 15)); // false (поиск начинается с 15-й позиции)

Синтаксис метода indexOf():

string.indexOf(searchValue[, fromIndex])

Где:

• searchValue — строка, которую нужно найти
• fromIndex (опционально) — позиция, с которой начать поиск

Метод indexOf() возвращает индекс первого вхождения указанной подстроки или -1, если подстрока не найдена:

const text = "JavaScript — мощный язык программирования";
console.log(text.indexOf("мощный")); // 13
console.log(text.indexOf("Python")); // -1
console.log(text.indexOf("язык")); // 21
console.log(text.indexOf("язык", 25)); // -1 (поиск начинается с 25-й позиции)

Особенности и различия:

1. Возвращаемое значение: includes() возвращает булево значение, что делает его идеальным для условных выражений, тогда как indexOf() возвращает позицию, что требует дополнительной проверки на -1.
2. Производительность: оба метода имеют сходную производительность, но includes() немного оптимизированнее в новых движках JavaScript.
3. Совместимость: indexOf() поддерживается всеми браузерами, включая устаревшие, тогда как includes() может требовать полифила для старых версий.
4. Проверка на наличие: для простой проверки существования подстроки includes() предпочтительнее из-за лучшей читаемости кода.

Пример проверки на наличие подстроки с использованием обоих методов:

// С использованием includes()
if (text.includes("JavaScript")) {
console.log("Строка содержит JavaScript");
}

// С использованием indexOf()
if (text.indexOf("JavaScript") !== -1) {
console.log("Строка содержит JavaScript");
}

Регулярные выражения: test(), match() и поиск подстроки

Регулярные выражения предоставляют мощный и гибкий инструментарий для поиска и проверки подстрок в JavaScript. В отличие от базовых методов строк, они позволяют задавать сложные шаблоны поиска и игнорировать регистр символов. 🧩

Рассмотрим три основных метода работы с регулярными выражениями для поиска подстрок:

RegExp.test()

Метод test() — самый быстрый способ проверить наличие совпадения в строке с использованием регулярного выражения. Он возвращает булево значение: true при наличии совпадения и false при его отсутствии.

Синтаксис:

regexp.test(string)

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

const text = "JavaScript делает веб-страницы интерактивными";

// Простая проверка наличия подстроки
const pattern1 = /JavaScript/;
console.log(pattern1.test(text)); // true

// Проверка с игнорированием регистра
const pattern2 = /javascript/i;
console.log(pattern2.test(text)); // true

// Проверка наличия одной из нескольких подстрок
const pattern3 = /Python|JavaScript|Ruby/;
console.log(pattern3.test(text)); // true

String.match()

Метод match() возвращает массив, содержащий результаты совпадения, или null, если совпадений нет. Он полезен, когда нужно не только проверить наличие подстроки, но и извлечь её.

Синтаксис:

string.match(regexp)

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

const text = "JavaScript и TypeScript — популярные языки программирования";

// Поиск первого совпадения
console.log(text.match(/Script/)); // ["Script", index: 4, input: "JavaScript и TypeScript..."]

// Поиск всех совпадений
console.log(text.match(/Script/g)); // ["Script", "Script"]

// Поиск с игнорированием регистра
console.log(text.match(/javascript/i)); // ["JavaScript", index: 0, input: "JavaScript и..."]

String.search()

Метод search() возвращает индекс первого совпадения или -1, если совпадение не найдено. По функциональности он похож на indexOf(), но работает с регулярными выражениями.

Синтаксис:

string.search(regexp)

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

const text = "JavaScript делает веб-страницы интерактивными";

// Поиск индекса первого совпадения
console.log(text.search(/веб/)); // 19

// Поиск с игнорированием регистра
console.log(text.search(/JAVASCRIPT/i)); // 0

// Если совпадения нет, возвращается -1
console.log(text.search(/Python/)); // -1

Преимущества использования регулярных выражений:

• Гибкие шаблоны поиска с использованием специальных символов и квантификаторов
• Возможность игнорирования регистра с помощью флага i
• Поиск всех вхождений с помощью флага g
• Возможность извлекать группы совпадений
• Поиск по сложным шаблонам (email, телефоны, URL и т.д.)

Марина Соколова, Lead Frontend Engineer

Работая над платформой для анализа текстовых данных, наша команда столкнулась с необходимостью обрабатывать большие объемы неструктурированного текста. Один из ключевых компонентов системы должен был анализировать тысячи отзывов клиентов и выявлять упоминания конкретных продуктов.

Сначала мы использовали простое сочетание includes() и toLowerCase() для поиска с игнорированием регистра. Но вскоре стали появляться ошибки: система не распознавала варианты с опечатками, сокращениями и морфологическими вариациями названий продуктов.

Переход на регулярные выражения с методом test() полностью изменил ситуацию. Мы создали шаблоны, учитывающие типичные вариации написания и ошибки. Например, для продукта "SmartHome" шаблон /smart[ -]?home|смарт[ -]?хоум/i находил различные варианты написания. Точность распознавания выросла с 78% до 94%, а производительность даже улучшилась, так как отпала необходимость в предварительной трансформации строк.

Сравнение производительности методов поиска в JavaScript

При выборе метода проверки наличия подстроки производительность часто становится решающим фактором, особенно когда речь идёт о больших объемах данных или критичных для скорости участках кода. Давайте проанализируем, какие методы работают быстрее в различных сценариях. 🚀

Для объективного сравнения я провел серию тестов производительности на строках разной длины и с разными шаблонами поиска:

Ключевые выводы из тестов производительности:

1. Встроенные методы строк быстрее: includes() и indexOf() демонстрируют превосходную производительность, особенно на больших строках.
2. indexOf() vs includes(): indexOf() иногда немного быстрее на маленьких строках, но на больших текстах разница практически нивелируется.
3. RegExp.test() — лидер среди регулярных выражений: если вам необходима мощь регулярных выражений, test() будет наиболее производительным выбором.
4. match() — самый медленный метод: хотя он предоставляет больше всего информации, он также требует больше всего ресурсов.
5. Масштабирование: разница в производительности становится более заметной с увеличением размера строки.

Вот код, который можно использовать для проведения своих тестов производительности:

function testPerformance(text, substring, iterations = 1000) {
const regex = new RegExp(substring);

console.time('includes');
for (let i = 0; i < iterations; i++) {
text.includes(substring);
}
console.timeEnd('includes');

console.time('indexOf');
for (let i = 0; i < iterations; i++) {
text.indexOf(substring) !== -1;
}
console.timeEnd('indexOf');

console.time('search');
for (let i = 0; i < iterations; i++) {
text.search(regex) !== -1;
}
console.timeEnd('search');

console.time('test');
for (let i = 0; i < iterations; i++) {
regex.test(text);
}
console.timeEnd('test');

console.time('match');
for (let i = 0; i < iterations; i++) {
text.match(regex) !== null;
}
console.timeEnd('match');
}

Факторы, влияющие на производительность:

• Длина строки: все методы замедляются с увеличением длины, но регулярные выражения страдают больше
• Сложность шаблона: для простых подстрок includes() и indexOf() оптимальны, для сложных шаблонов необходимы регулярные выражения
• Расположение подстроки: производительность повышается, если подстрока находится ближе к началу текста
• Отсутствие совпадения: в худшем случае (когда подстрока не найдена) метод должен пройти через весь текст
• Флаги регулярных выражений: использование флагов (особенно глобального g) может замедлить поиск

Рекомендации по производительности:

1. Для простого поиска подстроки предпочтительнее использовать includes() или indexOf()
2. Если нужно игнорировать регистр, но не требуются другие возможности регулярных выражений, конвертируйте строки к одному регистру: text.toLowerCase().includes(substring.toLowerCase())
3. Для сложных шаблонов или поиска с игнорированием регистра используйте RegExp.test()
4. Кэшируйте объекты регулярных выражений вместо их создания в циклах
5. Избегайте чрезмерно сложных регулярных выражений, особенно с обратными ссылками и просмотром вперед/назад
6. При работе с очень большими строками рассмотрите возможность разбиения их на части

Практические сценарии применения разных методов проверки

Выбор оптимального метода проверки наличия подстроки зависит от конкретной задачи, требований к производительности и необходимой функциональности. Давайте рассмотрим практические сценарии, где каждый метод раскрывает свои сильные стороны. 💡

Сценарии для includes()

1. Простая валидация ввода пользователя:

function containsProhibitedWords(text) {
const prohibitedWords = ['spam', 'реклама', 'бесплатно'];
return prohibitedWords.some(word => text.toLowerCase().includes(word));
}

const userComment = "Получите бесплатно наш новый продукт!";
if (containsProhibitedWords(userComment)) {
console.log("Комментарий содержит запрещенные слова");
}

2. Фильтрация списка по простому критерию:

const products = [
{ name: "Смартфон Samsung Galaxy", price: 20000 },
{ name: "Ноутбук Apple MacBook", price: 80000 },
{ name: "Планшет Samsung Tab", price: 30000 }
];

const samsungProducts = products.filter(product =>
product.name.includes('Samsung')
);

console.log(samsungProducts); // Вернет продукты Samsung

Сценарии для indexOf()

1. Определение позиции для вставки или разделения текста:

function insertAfterKeyword(text, keyword, insertText) {
const position = text.indexOf(keyword);
if (position === -1) return text; // Ключевое слово не найдено

const insertPosition = position + keyword.length;
return text.slice(0, insertPosition) + insertText + text.slice(insertPosition);
}

const originalText = "JavaScript делает веб-страницы интерактивными";
const newText = insertAfterKeyword(originalText, "JavaScript", " и TypeScript");
console.log(newText); // "JavaScript и TypeScript делает веб-страницы интерактивными"

2. Подсчет вхождений подстроки:

function countOccurrences(text, substring) {
let count = 0;
let position = text.indexOf(substring);

while (position !== -1) {
count++;
position = text.indexOf(substring, position + 1);
}

return count;
}

const article = "JavaScript — популярный язык программирования. JavaScript используется для создания интерактивных веб-страниц.";
console.log(countOccurrences(article, "JavaScript")); // 2

Сценарии для регулярных выражений (test())

1. Валидация формата ввода:

function isValidEmail(email) {
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return emailRegex.test(email);
}

function isValidPhone(phone) {
const phoneRegex = /^\+7\(\d{3}\)\d{3}-\d{2}-\d{2}$/;
return phoneRegex.test(phone);
}

console.log(isValidEmail("user@example.com")); // true
console.log(isValidPhone("+7(123)456-78-90")); // true

2. Поиск с учетом вариаций написания:

function containsProductMention(text, productName) {
// Создаем шаблон, который учитывает различные написания
// Например, для "iPhone" найдет "iphone", "i-phone", "i phone" и т.д.
const parts = productName.split("");
const pattern = parts.join("[\\s-_]*");
const regex = new RegExp(pattern, "i");

return regex.test(text);
}

const customerReview = "Я недавно купил новый i-Phone и очень доволен!";
console.log(containsProductMention(customerReview, "iPhone")); // true

Сценарии для match()

1. Извлечение всех упоминаний:

function extractHashtags(text) {
const hashtagRegex = /#[a-zA-Zа-яА-ЯёЁ0-9_]+/g;
const matches = text.match(hashtagRegex);
return matches || [];
}

const tweet = "JavaScript — отличный язык для веб-разработки! #javascript #webdev #programming";
console.log(extractHashtags(tweet)); // ["#javascript", "#webdev", "#programming"]

2. Парсинг структурированного текста:

function parseCSV(csvString) {
const rows = csvString.split('\n');
return rows.map(row => {
// Корректная обработка CSV с учетом кавычек
const regex = /(?:^|,)(?:"([^"]*(?:""[^"]*)*)"|([^,]*))/g;
const fields = [];
let match;

while ((match = regex.exec(row + ','))) {
fields.push(match[1] !== undefined ? match[1].replace(/""/g, '"') : match[2]);
}

return fields;
});
}

const csvData = 'name,age,city\n"John Doe",30,"New York"\n"Jane Smith",25,London';
console.log(parseCSV(csvData));

Сценарии для search()

1. Поиск первого вхождения шаблона с учетом регистра:

function findFirstCapitalWord(text) {
const position = text.search(/[A-Z][a-z]+/);
if (position === -1) return null;

// Извлекаем найденное слово
const match = text.slice(position).match(/[A-Z][a-z]+/)[0];
return { word: match, position: position };
}

const sentence = "программирование на javascript и TypeScript";
console.log(findFirstCapitalWord(sentence)); // { word: "TypeScript", position: 26 }

Выбор метода в зависимости от задачи:

• includes() — когда нужен простой и быстрый поиск конкретной подстроки
• indexOf() — когда кроме наличия подстроки нужно знать её позицию
• test() — для проверки соответствия регулярному выражению, особенно когда важна производительность
• match() — когда нужно извлечь совпадения или группы из строки
• search() — для поиска позиции первого совпадения с шаблоном

Советы для реальных проектов:

1. Для критичных к производительности участков проводите бенчмарки на реальных данных
2. Учитывайте читаемость кода — иногда лучше пожертвовать микрооптимизациями ради ясности
3. Для сложных задач поиска рассмотрите специализированные библиотеки (fuse.js для нечеткого поиска, например)
4. При работе с регулярными выражениями тестируйте их на краевых случаях
5. Для международных приложений учитывайте языковые особенности (используйте библиотеки для поддержки Unicode, например)

Правильный выбор метода проверки наличия подстроки может существенно влиять на качество и скорость вашего JavaScript-кода. Для простых случаев includes() и indexOf() обеспечат вам максимальную производительность и читаемость. Когда требуется гибкость шаблонов поиска — RegExp.test() станет оптимальным решением. Помните, что универсального метода не существует, а ваш выбор должен определяться конкретной задачей, контекстом использования и характеристиками данных, с которыми вы работаете. Главное правило оптимизации остаётся неизменным: сначала сделайте код работающим, затем убедительным, и только потом — быстрым.