Привет, меня зовут Дмитрий, я React-разработчик, и сегодня хочу рассказать о методе localeCompare в JavaScript. Мне кажется, что этот метод не так часто используется при сортировке строк, хотя он действительно заслуживает внимания. Многие привыкли к стандартным методам сравнения, но localeCompare позволяет учесть важные нюансы, такие как языковые особенности, регистр символов и числовую сортировку. Я постараюсь раскрыть все его возможности и показать, как можно использовать его для улучшения сортировки данных в проектах.
Введение
При работе со строками в JavaScript часто возникает необходимость их сравнивать и сортировать. Например, это требуется при отображении списка имен пользователей, упорядочивании товаров в интернет-магазине или обработке текстовых данных. На первый взгляд, задача может показаться простой — достаточно использовать операторы сравнения (>, <, ===). Однако такой подход имеет ряд недостатков, особенно если учитывать языковые особенности, регистр букв и специальные символы.
Проблемы стандартного сравнения строк
В JavaScript строки сравниваются посимвольно на основе их кодов Unicode. Это может приводить к неожиданным результатам:
console.log("apple" > "banana"); // false (ожидаемо)
console.log("Zebra" > "apple"); // false (ожидали true, но код 'Z' < 'a')
console.log("straße" === "Strasse"); // false (в немецком языке они считаются одинаковыми)
Основные проблемы:
Регистрозависимость. Например, «Zebra» > «apple» возвращает false, так как заглавная Z имеет меньший Unicode‑код, чем строчная a.
Проблемы с диакритическими знаками. «straße» !== «Strasse», хотя в немецком языке эти слова считаются идентичными.
-
Некорректное сравнение строк с числами. Например:
console.log(["file10", "file2"].sort()); // ["file10", "file2"]Ожидаемый порядок: ["file2", "file10"], но строки сравниваются посимвольно, и "1" в "file10" идет раньше "2" в "file2".
Зачем нужен localeCompare?
Метод localeCompare позволяет сравнивать строки с учетом языковых особенностей, правил сортировки и дополнительных параметров. Например:
console.log('ёжик'.localeCompare('яблоко', 'ru')); // -1 (Ё считается перед Я)
console.log('ёлка'.localeCompare('ежевика', 'ru', { sensitivity: 'base' })); // -1 (игнорируется разница между Ё и Е)
console.log('файл10'.localeCompare('файл2', 'ru', { numeric: true })); // 1 (правильная числовая сортировка)
console.log('мост'.localeCompare('Москва', 'ru', { sensitivity: 'case' })); // 1 (различается регистр)
В русском языке буква Ё идет перед Я, поэтому «ёжик» раньше «яблоко».
При sensitivity: «base» буквы Е и Ё считаются одинаковыми.
numeric: true позволяет правильно сортировать строки с числами (обычно «файл10» шло бы перед «файл2»).
sensitivity: «case» различает регистр, «Москва» будет раньше «мост».
Этот метод полезен для работы с кириллическими текстами, особенно в случае алфавитных списков и каталогов.
Преимущества localeCompare:
Корректное сравнение строк в разных языках. Учитываются особенности алфавитов и диакритические знаки.
Настраиваемая сортировка. Можно игнорировать регистр, учитывать числовые значения и изменять порядок сортировки.
Поддержка во всех современных браузерах. Это встроенный метод, который не требует дополнительных библиотек.
Основы метода localeCompare
Метод localeCompare используется для сравнения двух строк с учетом языковой локали и дополнительных параметров. В отличие от стандартного посимвольного сравнения, он учитывает особенности алфавита, регистр, числовые значения и национальные правила сортировки.
string1.localeCompare(string2, [locales], [options])Описание параметров:
string2 - строка, с которой производится сравнение.
locales — (необязательный) — код языка или массив кодов, например «en» (английский), «ru» (русский), «de» (немецкий). Если не указано, используется локаль системы.
options — (необязательный) — объект с настройками, влияющими на поведение сравнения.
Пример без указания локали:
console.log("apple".localeCompare("banana")); // -1 (apple перед banana)
console.log("banana".localeCompare("apple")); // 1 (banana после apple)
console.log("apple".localeCompare("apple")); // 0 (строки равны)Пример с указанием локали:
console.log("ä".localeCompare("z", "de")); // -1 (в немецком "ä" идет перед "z")
console.log("ä".localeCompare("z", "sv")); // 1 (в шведском "ä" идет после "z")Использование настроек (options)
Метод localeCompare поддерживает объект options, который позволяет настраивать поведение сравнения строк. С его помощью можно учитывать регистр, диакритические знаки, числовые значения и игнорировать знаки препинания.
Основные параметры options:
sensitivity — определяет, учитываются ли регистр и диакритические знаки.
caseFirst — задает, какие буквы (заглавные или строчные) должны идти первыми при сортировке.
numeric — включает естественную числовую сортировку.
ignorePunctuation — позволяет игнорировать знаки препинания при сравнении.
Учет регистра (caseFirst):
Этот параметр определяет, должны ли заглавные буквы идти перед строчными или наоборот.
console.log("a".localeCompare("B", "en", { caseFirst: "upper" })); // 1 ("B" идет перед "a")
console.log("a".localeCompare("B", "en", { caseFirst: "lower" })); // -1 ("a" идет перед "B")Доступные значения:
«upper» — заглавные буквы идут первыми.
«lower» — строчные буквы идут первыми.
«false» — порядок определяется локалью.
Чувствительность к диакритическим знакам (sensitivity)
Позволяет игнорировать или учитывать регистр и акцентные знаки, такие как «е» и «ё»
console.log("россия".localeCompare("Россия", "ru", { sensitivity: "case" })); // -1 (различает регистр)
console.log("жёлтый".localeCompare("желтый", "ru", { sensitivity: "base" })); // 0 (игнорирует диакритику)
console.log("жёлтый".localeCompare("желтый", "ru", { sensitivity: "accent" })); // 1 (различает акценты)В первом случае различается регистр (русский символ «р» и «Р»). Во втором случае игнорируются акценты (например, «ё» и «е»). В третьем случае различаются акценты.
Доступные значения:
«base» — игнорирует регистр и диакритические знаки.
«accent» — различает акцентные знаки, но игнорирует регистр.
«case» — различает регистр, но игнорирует диакритические знаки.
«variant» — учитывает и регистр, и диакритические знаки.
Числовое сравнение (numeric)
Полезно при сортировке строк с числами, например, имен файлов.
console.log("file10".localeCompare("file2", "en", { numeric: true })); // 1 (file2 идет перед file10)
console.log("file10".localeCompare("file2", "en", { numeric: false })); // -1 (обычное посимвольное сравнение)По умолчанию строки сравниваются посимвольно («1» идет перед «2»), но с numeric: true числа распознаются и сравниваются как целые.
Игнорирование знаков препинания (ignorePunctuation)
Позволяет не учитывать знаки препинания при сравнении строк.
console.log("hello!".localeCompare("hello", "en", { ignorePunctuation: true })); // 0
console.log("word, word".localeCompare("word word", "en", { ignorePunctuation: true })); // 0Этот параметр полезен при обработке текста, если знаки препинания не должны влиять на порядок сортировки.
Применение localeCompare на практике (RU регион)
Метод localeCompare особенно полезен в русскоязычных проектах, так как стандартное сравнение (>, <) не учитывает особенности алфавита, регистр и числовые значения. А еще очень удобно, если нужно отсортировать числа, записанные строками. Рассмотрим несколько практических примеров.
Сортировка массива строк
При использовании sort() строки сортируются посимвольно по таблице Unicode, что может давать некорректный порядок в русском языке. localeCompare позволяет учесть локаль.
const words = ["яблоко", "Вишня", "груша", "Апельсин", "банан"];
words.sort((a, b) => a.localeCompare(b, "ru"));
console.log(words); // ["Апельсин", "банан", "Вишня", "груша", "яблоко"]По умолчанию localeCompare чувствителен к регистру. Заглавные буквы сортируются отдельно от строчных. Чтобы этого избежать, можно использовать sensitivity: “base”.
words.sort((a, b) => a.localeCompare(b, "ru", { sensitivity: "base" })); console.log(words); // ["Апельсин", "банан", "Вишня", "груша", "яблоко"]Сортировка объектов по строковому свойству
Частая задача — сортировка массива объектов по названию, имени или другому строковому свойству.
const users = [
{ name: "Сергей" },
{ name: "Анна" },
{ name: "Юлия" },
{ name: "Борис" }
];
users.sort((a, b) => a.name.localeCompare(b.name, "ru")); console.log(users);
/* [ { name: "Анна" }, { name: "Борис" }, { name: "Сергей" }, { name: "Юлия" } ] */Если нужно, чтобы заглавные и строчные буквы не влияли на сортировку, добавляем sensitivity: “base”.
users.sort((a, b) => a.name.localeCompare(b.name, "ru", { sensitivity: "base" }));Ограничения localeCompare
Хотя localeCompare — мощный инструмент для локализованного сравнения строк, он имеет ряд ограничений, о которых важно знать при использовании в реальных проектах.
Производительность на больших объемах данных
LocaleCompare работает значительно медленнее, чем стандартные операторы сравнения
(>, <), так как учитывает сложные правила локалей. При обработке больших массивов его использование может снизить производительность. Например, сортировка массива из 100 000 строк с помощью localeCompare будет ощутимо медленнее, чем при использовании стандартного Unicode-сравнения.
Альтернативы:
Если важна скорость, но не требуется строгая локализованная сортировка, можно привести строки к нижнему регистру и использовать localeCompare с sensitivity: «base», что немного ускорит процесс.
Для англоязычных данных и технических строк можно использовать обычные операторы сравнения.
В случае частого использования стоит кешировать результаты сравнения.
Ограниченная поддержка локалей в старых браузерах
Хотя современные браузеры хорошо поддерживают localeCompare, в устаревших версиях могут возникать проблемы.
Вот так можно проверить доступные локали
console.log(Intl.Collator.supportedLocalesOf(["ru", "en", "fr"]));Если браузер не поддерживает указанную локаль, результат сортировки может отличаться от ожидаемого.
Альтернатива:
Использовать Intl.Collator, который иногда работает быстрее и предоставляет больше возможностей.
const collator = new Intl.Collator("ru", { sensitivity: "base" });
arr.sort((a, b) => collator.compare(a, b));Вывод
localeCompare — удобный метод для локализованного сравнения строк, но в некоторых случаях его использование может быть неэффективным. Для ускорения сортировки или поиска на больших данных стоит рассмотреть Intl.Collator, предварительную нормализацию данных или специализированные библиотеки.