Сортировка строк без учета регистра в JavaScript: методы

Быстрый ответ

Чтобы эффективно сортировать строки в массиве без учета регистра с использованием метода sort() в сочетании с функцией-компаратором, примените метод toLowerCase():

const fruits = ['Banana', 'apple', 'Cherry'];

fruits.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));

console.log(fruits); // ['apple', 'Banana', 'Cherry']

Разбор метода

В JavaScript есть несколько путей к одной цели, и для сортировки строк это тоже верно. Давайте подробнее разберемся.

Использование localeCompare() при сортировке

Метод localeCompare() удобен для сортировки строк без учета регистра:

const strings = ['Bænjamin', 'benjamin', 'BENJAMIN'];

strings.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));

// Вывод: ['Bænjamin', 'benjamin', 'BENJAMIN']

Здесь параметр { sensitivity: 'base' } указывает методу localeCompare игнорировать отличия в регистре и акцентах, что подходит для универсальной сортировки.

Подробнее об этом расскажет наш спикер на видео

Применение Intl.Collator() для улучшения производительности

Для оптимизации производительности при больших объемах данных или частых сортировках используйте Intl.Collator().compare:

const collator = new Intl.Collator(undefined, { sensitivity: 'base' });
const words = ['zebra', 'Zebra', 'ZEBRA'];

words.sort(collator.compare);

Особенности сортировки строк

При сортировке строк следует учесть несколько особенностей.

Выполнение действия до сравнения

Перед сравнением строк необходимо привести их к нижнему регистру с помощью .toLowerCase().localeCompare().

Сложности сортировки

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

const alnums = ['alex', 'Alex', 'alex1', 'Alex2'];

alnums.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()) || a.localeCompare(b));

// Вывод: ['alex', 'Alex', 'alex1', 'Alex2']

Работа метода sort

Метод Array.sort() сравнивает элементы как символы Unicode, что может привести к неожиданным результатам.

Настраиваемая сортировка для достижения точности

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

Совместимость в браузерах

Убедитесь, что localeCompare() работает одинаково во всех браузерах.

Вывод

Цель – сформировать механизм сортировки, не различающий регистры, чтобы сосредоточиться на важных аспектах работы.

Визуализация

Представьте, что вы на танцполе в тишине:

Участники вечерины: [ "Banana", "apple", "Cherry" ]

DJ-ей (метод .sort()) включает музыку, и все начинают двигаться в такт биту, не обращая внимания на регистр:

partyGoers.sort((a,b) => a.toLowerCase().localeCompare(b.toLowerCase()));

Выполнение движений без учета регистра: [ "apple", "Banana", "Cherry" ]

Все танцующие двигаются вместе, не обращая внимания на регистр. 🎧✨

Лучшие практики для улучшения читабельности кода

Улучшите код, чтобы повысить его читабельность и упростить поддержку.

Принцип DRY

Создайте функцию sortCaseInsensitive() для многократного использования:

function sortCaseInsensitive(arr) {
  return arr.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
}

Оптимизация toLowerCase()

Сохраните результат toLowerCase() в переменной перед сравнением, чтобы сократить количество вызовов:

const sortInsensitive = (a, b) => {
  const lowerA = a.toLowerCase();
  const lowerB = b.toLowerCase();

  return lowerA.localeCompare(lowerB);
};

Стандартизация строк

Для улучшения совпадений используйте normalize():

const stripDiacritics = (str) => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');

// Теперь все строки будут идеально совпадать, без учета диакритических знаков.

Полезные материалы

1. Array.prototype.sort() – JavaScript | MDN — Подробный обзор метода sort.
2. Как сортировать строки в массиве без учета регистра в JavaScript? – Stack Overflow — Обсуждение разных вариантов сортировки без учета регистра.
3. Метод JavaScript Array sort() – W3Schools — Детализация использования метода sort.
4. Методы массивов – JavaScript.info — Обзор методов массивов, включая сортировку.
5. Спецификация языка ECMAScript® 2024 — Основы сравнения строк.
6. Создание сортируемых таблиц с React — Smashing Magazine — Пример использования сортировки массивов в проектах на React.