JavaScript endsWith(): проверка окончания строк для разработчиков

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

• JavaScript-разработчики, как начинающие, так и опытные
• Люди, желающие улучшить свои навыки программирования и разобраться в методах работы с строками в JavaScript

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

  Проверка окончаний строк — задача, с которой JavaScript-разработчики сталкиваются постоянно: валидация расширений файлов, анализ URL-адресов, обработка пользовательского ввода. Метод endsWith() — элегантное решение для таких сценариев, позволяющее одной строкой кода определить, заканчивается ли строка указанной подстрокой. Этот инструмент появился в ES6 и быстро стал незаменимым в арсенале как начинающих, так и опытных программистов. Разберем его возможности, ограничения и альтернативы — чтобы вы могли использовать его максимально эффективно. 🚀

Освоение метода endsWith() — лишь маленький шаг на пути к мастерству в JavaScript. Хотите уверенно работать со всеми методами строк и другими аспектами языка? Программа Обучение веб-разработке от Skypro построена на практических задачах и реальных проектах. Вы не просто изучите синтаксис, а научитесь писать чистый, эффективный код и решать сложные задачи — от валидации форм до создания полноценных веб-приложений.

Что такое endsWith(): назначение и принцип работы метода

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

Метод появился в спецификации ECMAScript 2015 (ES6) и теперь доступен во всех современных браузерах и средах выполнения JavaScript. Его ценность заключается в простоте и читаемости кода по сравнению с альтернативными подходами, такими как использование регулярных выражений или операций с подстроками.

Александр Петров, ведущий frontend-разработчик

Помню, как в одном из первых коммерческих проектов мне нужно было проверять, что загружаемые пользователем файлы имеют допустимые расширения. Я написал сложную конструкцию с извлечением расширения через lastIndexOf и substring. Код был громоздким и трудночитаемым. Когда я узнал о методе endsWith(), переписал всю логику в одну строку:

JS

Скопировать код

function isValidImageFile(filename) {
return filename.toLowerCase().endsWith('.jpg') || 
filename.toLowerCase().endsWith('.png') || 
filename.toLowerCase().endsWith('.gif');
}

Код стал не только короче, но и намного понятнее для всей команды. Мелочь, а какой эффект на читаемость!

Принцип работы метода endsWith() основан на сравнении последних символов исходной строки с проверяемой подстрокой. Это сравнение учитывает регистр символов, что важно помнить при работе с текстом, где регистр имеет значение.

Основные преимущества использования endsWith():

• Декларативный подход: код сразу сообщает о своём намерении проверить окончание строки
• Лаконичность: не требуется писать дополнительную логику для извлечения и сравнения подстрок
• Отсутствие побочных эффектов: метод не изменяет исходную строку
• Высокая производительность: нативная реализация оптимизирована

Типичные сценарии использования метода endsWith() включают:

Теперь, понимая назначение и основные сценарии использования, перейдем к детальному рассмотрению синтаксиса и параметров метода. 🔍

Синтаксис и параметры метода endsWith() в JavaScript

Синтаксис метода endsWith() лаконичен и интуитивно понятен. Он принимает до двух параметров и возвращает булево значение:

string.endsWith(searchString[, length])

Где:

• string — исходная строка, в которой выполняется поиск
• searchString — подстрока, наличие которой проверяется в конце исходной строки
• length — опциональный параметр, определяющий, какую часть исходной строки следует рассматривать (по умолчанию равен длине строки)

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

Параметр length заслуживает особого внимания. Он позволяет ограничить область поиска, указав, сколько символов от начала строки следует учитывать. Это особенно полезно, когда нужно проверить окончание части строки, а не всей строки целиком.

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

// Базовое использование
"JavaScript".endsWith("Script"); // true
"JavaScript".endsWith("script"); // false (регистр имеет значение)

// С использованием параметра length
"JavaScript".endsWith("Java", 4); // true (рассматриваем только первые 4 символа)
"JavaScript".endsWith("Script", 6); // false (в первых 6 символах "JavaSc" нет окончания "Script")

Важно отметить несколько особенностей синтаксиса и поведения метода:

1. Метод чувствителен к регистру — "HELLO".endsWith("lo") вернет false
2. При передаче пустой строки в качестве searchString метод всегда возвращает true
3. Если searchString длиннее исходной строки, метод вернет false
4. Если параметр length больше длины строки, используется фактическая длина строки
5. Если параметр length отрицательный, он интерпретируется как 0

Интересная особенность связана с параметром length: он указывает не позицию, с которой начинать поиск, а количество символов от начала строки, которые следует учитывать. Это отличает endsWith() от некоторых других методов строк, что может вызвать путаницу у начинающих разработчиков.

При использовании endsWith() с параметром length помните о возможных ловушках: значение length — это не индекс конца, а количество символов, рассматриваемых от начала строки. Это тонкое различие может быть источником трудноуловимых ошибок. ⚠️

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

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

Валидация расширения файла — одно из самых распространенных применений. Проверка типа загружаемого файла перед его обработкой критически важна для безопасности и корректной работы приложения:

function isImageFile(filename) {
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
const lowercaseName = filename.toLowerCase();

return imageExtensions.some(ext => lowercaseName.endsWith(ext));
}

console.log(isImageFile('vacation.jpg')); // true
console.log(isImageFile('document.pdf')); // false
console.log(isImageFile('LOGO.PNG')); // true (благодаря преобразованию в нижний регистр)

Работа с URL и путями — еще один распространенный сценарий. Например, проверка, заканчивается ли URL слешем, часто необходима при построении полных путей:

function appendPathToUrl(baseUrl, path) {
if (baseUrl.endsWith('/')) {
return baseUrl + path;
} else {
return baseUrl + '/' + path;
}
}

console.log(appendPathToUrl('https://example.com', 'api/users')); // https://example.com/api/users
console.log(appendPathToUrl('https://example.com/', 'api/users')); // https://example.com/api/users

Валидация и форматирование ввода пользователя — еще одна область, где endsWith() может быть очень полезен:

function formatSentence(text) {
// Проверяем, заканчивается ли текст точкой, вопросительным или восклицательным знаком
if (text.endsWith('.') || text.endsWith('?') || text.endsWith('!')) {
return text;
} else {
return text + '.';
}
}

console.log(formatSentence("Hello world")); // "Hello world."
console.log(formatSentence("How are you?")); // "How are you?"

Мария Соколова, технический писатель

В моей работе над документацией к API часто требуется проверять и форматировать URL-адреса. В одном из проектов я столкнулась с задачей: сгенерировать единообразные ссылки на документацию из списка разнородных URL, которые пришли от разных команд. Некоторые URL заканчивались на "/docs", другие на "/docs/", третьи не содержали "docs" вообще.

Я написала функцию для нормализации:

JS

Скопировать код

function normalizeDocUrl(url) {
// Убираем завершающий слеш, если он есть
url = url.endsWith('/') ? url.slice(0, -1) : url;

// Добавляем /docs, если его нет
if (!url.endsWith('/docs')) {
url += '/docs';
}

return url;
}

Эта простая функция позволила обработать более 500 URL без единой ошибки, сэкономив мне часы ручной работы. Особенно ценно то, что код легко читается и понимается другими членами команды.

Проверка форматов данных и шаблонов — метод endsWith() может использоваться для проверки соответствия строк определенным шаблонам:

// Проверка, соответствует ли строка формату JavaScript-выражения
function isFunctionCall(code) {
return code.trim().endsWith(');');
}

console.log(isFunctionCall('calculateTotal();')); // true
console.log(isFunctionCall('let x = 10;')); // false

Работа с многострочным текстом — проверка окончаний строк полезна при парсинге и форматировании:

function ensureNewlineEnding(text) {
if (!text.endsWith('\n')) {
return text + '\n';
}
return text;
}

// Гарантируем, что каждая строка в конфигурационном файле заканчивается переносом
const config = configLines.map(ensureNewlineEnding).join('');

Фильтрация массивов строк — endsWith() часто используется в функциях фильтрации:

// Получение всех JavaScript-файлов из списка
const files = ['app.js', 'style.css', 'index.html', 'utils.js', 'data.json'];
const jsFiles = files.filter(file => file.endsWith('.js'));
console.log(jsFiles); // ['app.js', 'utils.js']

Эти практические примеры демонстрируют, насколько универсальным и полезным может быть метод endsWith() в различных сценариях разработки. Его простота и выразительность делают код более читаемым и понятным. 💡

Особенности работы endsWith() с разными типами данных

Метод endsWith(), несмотря на свою простоту, имеет ряд особенностей при работе с различными типами данных и в разных контекстах. Понимание этих нюансов поможет избежать распространенных ошибок и повысит эффективность вашего кода.

Начнем с основного: endsWith() — это метод строк, поэтому он работает только с типом String. При попытке вызвать этот метод для других типов данных JavaScript автоматически попытается преобразовать их в строки:

// Числа преобразуются в строки
(123).endsWith('3'); // true
(123).endsWith('23'); // true

// Boolean преобразуется в строку
true.endsWith('e'); // true, т.к. String(true) === 'true'
false.endsWith('se'); // true

// null и undefined вызовут ошибку
null.endsWith('l'); // TypeError
undefined.endsWith('d'); // TypeError

При работе с объектами ситуация немного сложнее. JavaScript вызывает метод toString() объекта для его преобразования в строку:

const obj = { toString: () => 'custom string' };
obj.endsWith('string'); // true

// Массивы преобразуются в строки с запятыми
[1, 2, 3].endsWith('3'); // true, т.к. [1, 2, 3].toString() === '1,2,3'
[].endsWith(''); // true, пустой массив преобразуется в пустую строку

Особое внимание следует уделить работе с Unicode и многобайтовыми символами. JavaScript строки являются последовательностями UTF-16 кодовых единиц, поэтому некоторые символы представлены двумя кодовыми единицами (суррогатные пары):

// Эмодзи состоит из двух кодовых единиц
const emoji = "Hello 🌍";
emoji.endsWith("🌍"); // true, метод корректно работает с суррогатными парами

// Однако могут быть проблемы с составными символами
const composed = "e\u0301"; // é (e + комбинирующий акцент)
composed.endsWith("e"); // false, т.к. это один составной символ

Важно помнить о регистрозависимости метода endsWith(). Если регистр не имеет значения, необходимо предварительно преобразовать строки:

const url = "EXAMPLE.COM";
url.endsWith(".com"); // false
url.toLowerCase().endsWith(".com"); // true

Рассмотрим поведение с разными типами параметров:

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

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

// Для очень длинных строк
const longString = "a".repeat(1000000) + "xyz";

// Использование endsWith() (быстрее)
console.time('endsWith');
longString.endsWith("xyz");
console.timeEnd('endsWith');

// Альтернативный способ (медленнее)
console.time('slice');
longString.slice(-3) === "xyz";
console.timeEnd('slice');

Наконец, стоит упомянуть о совместимости с браузерами. Метод endsWith() доступен во всех современных браузерах, но отсутствует в IE11 и более ранних версиях. Если необходима поддержка устаревших браузеров, следует использовать полифилл или альтернативные методы, которые мы рассмотрим в следующем разделе. 🔄

Альтернативные способы проверки окончания строки в JS

Хотя метод endsWith() предоставляет элегантное и интуитивно понятное решение для проверки окончания строки, существуют ситуации, когда необходимо использовать альтернативные подходы. Это может быть обусловлено требованиями совместимости со старыми браузерами, специфическими требованиями к производительности или необходимостью более гибкого поиска.

Рассмотрим основные альтернативы методу endsWith() и сравним их по различным параметрам:

1. Использование substring() или slice() с indexOf()
2. Применение регулярных выражений
3. Использование lastIndexOf()
4. Создание полифилла
5. Применение библиотечных функций

Вариант с substring/slice и сравнением позволяет эмулировать функциональность endsWith() даже в старых браузерах:

function customEndsWith(str, searchStr, position = str.length) {
const subStr = str.substring(0, position);
return subStr.slice(-searchStr.length) === searchStr;
}

console.log(customEndsWith("JavaScript", "Script")); // true
console.log(customEndsWith("JavaScript", "script")); // false

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

// Проверка, заканчивается ли строка на .jpg, .jpeg или .png (без учета регистра)
const isImageFile = filename => /\.(jpe?g|png)$/i.test(filename);

console.log(isImageFile("vacation.jpg")); // true
console.log(isImageFile("LOGO.PNG")); // true
console.log(isImageFile("document.pdf")); // false

Метод lastIndexOf() позволяет определить последнее вхождение подстроки и на основе этого сделать вывод о том, заканчивается ли строка данной подстрокой:

function endsWithUsingLastIndexOf(str, searchStr) {
const position = str.lastIndexOf(searchStr);
return position !== -1 && position === str.length – searchStr.length;
}

console.log(endsWithUsingLastIndexOf("Hello world", "world")); // true
console.log(endsWithUsingLastIndexOf("Hello world", "Hello")); // false

Для обеспечения совместимости со старыми браузерами часто используется полифилл, который реализует функциональность endsWith(), если метод отсутствует:

if (!String.prototype.endsWith) {
String.prototype.endsWith = function(searchString, position) {
const subjectString = this.toString();
if (position === undefined || position > subjectString.length) {
position = subjectString.length;
}
position -= searchString.length;
const lastIndex = subjectString.indexOf(searchString, position);
return lastIndex !== -1 && lastIndex === position;
};
}

Сравним различные подходы по ключевым параметрам:

В большинстве современных проектов рекомендуется использовать нативный метод endsWith() из-за его читаемости и производительности. Если требуется поддержка устаревших браузеров, наиболее чистым решением будет использование транспайлера (например, Babel) с полифиллом или включение полифилла напрямую.

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

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

// Простая проверка расширения файла – лучше endsWith()
function isTextFile(filename) {
return filename.endsWith('.txt');
}

// Проверка нескольких возможных расширений – регулярное выражение может быть удобнее
function isDocumentFile(filename) {
return /\.(doc|docx|pdf|txt|rtf)$/i.test(filename);
}

// Проверка на специфический паттерн в конце URL – можно использовать lastIndexOf
function isProductPage(url) {
const productPattern = '/product/';
return url.lastIndexOf(productPattern) === url.length – productPattern.length;
}

Выбирая альтернативу методу endsWith(), учитывайте требования к совместимости, производительности, читаемости кода и гибкости решения. В современной разработке предпочтительно использовать нативные методы, но знание альтернативных подходов расширяет ваш инструментарий и позволяет выбрать оптимальное решение для конкретной задачи. 🛠️

Метод endsWith() — элегантный инструмент для проверки окончания строк в JavaScript. Его простота маскирует мощность: от валидации файловых расширений до обработки URL и форматирования текста. Несмотря на ограничения (чувствительность к регистру, особенности работы с юникодом, отсутствие поддержки в IE), его преимущества очевидны: читаемость, производительность и интуитивно понятный API. Даже когда приходится обращаться к альтернативам, понимание принципов работы endsWith() формирует более осознанный подход к обработке строк. Владение такими базовыми методами — необходимый фундамент для создания надежного, эффективного и читаемого кода.