JS метод String.localeCompare()


Загальний опис

Властивість String.prototype.localeCompare() - це потужний метод для порівняння двох рядків з урахуванням локалізації. Цей метод повертає числове значення, що вказує на відносне розташування рядків. Він особливо корисний для впорядкування або порівняння рядків у мовах, де порядок символів відрізняється від англійського алфавіту, а також при роботі з міжнародними даними.

Для використання localeCompare(), необхідно викликати його на одному рядку, передаючи інший рядок як аргумент. Метод повертає -1, 0 або 1. Якщо перший рядок має йти перед другим у сортуванні, метод повертає -1. Якщо рядки ідентичні, повертається 0. І, нарешті, якщо перший рядок має йти після другого, повертається 1. Наприклад:

let str1 = "абрикос";
let str2 = "яблуко";
console.log(str1.localeCompare(str2)); // може повернути -1

Метод localeCompare() також може приймати другий параметр - локалі (наприклад, "en" для англійської або "uk" для української), що дозволяє вказати правила сортування для конкретної мови:

console.log(str1.localeCompare(str2, 'uk')); // використовує правила сортування української мови

Однією з ключових особливостей localeCompare() є його здатність до точного порівняння рядків, враховуючи локалізаційні особливості. Це робить його незамінним у міжнародних додатках, де потрібно враховувати локальні відмінності при сортуванні та порівнянні рядків.

автор: Bond

Порада

Використовуйте метод localeCompare() для порівняння рядків у відповідності з локальними правилами сортування. Це особливо корисно, коли вам потрібно впорядковувати дані, які містять символи специфічних мов, таких як акценти, умлаути чи інші спеціальні символи.

автор: Bond
Порада

localeCompare()` повертає ціле число: якщо менше нуля, це означає, що початковий рядок розташований перед порівняльним рядком; якщо більше нуля - після; якщо рівне нулю, рядки вважаються рівними. Це можна використати для реалізації точних та чутливих до локалі сортувань.

автор: Bond
Порада

При роботі з великими наборами даних краще спочатку визначити критерії сортування, а потім виконати сортування, щоб оптимізувати продуктивність. Це дозволяє уникнути повторного виклику localeCompare() для кожної пари порівнянь, що може бути часозатратним для великих обсягів даних.

автор: Bond

Синтаксис

localeCompare(compareString)
localeCompare(compareString, locales)
localeCompare(compareString, locales, options)

Параметри

compareString

Рядок, з яким порівнюється початковий рядок. Всі значення автоматично перетворюються на рядки, тому пропуск цього аргументу або передача undefined призведе до порівняння з рядком "undefined", що, як правило, не є бажаним.

автор: Bond

locales

Рядок з тегом мови BCP 47 або масив таких рядків. Відповідає параметру locales конструктора Intl.Collator(). Дозволяє вказати локалізацію для порівняння, що впливає на правила сортування і порівняння.

автор: Bond

options

Об'єкт, який налаштовує формат виведення. Відповідає параметру options конструктора Intl.Collator(). Може включати такі налаштування, як чутливість до регістру та акцентів, вибір між числовим і нумеричним порівнянням тощо.

автор: Bond

Повернення

number

Повертає числове значення, яке вказує на взаємне розташування двох рядків у порядку сортування з урахуванням локальних особливостей. Якщо перший рядок (referenceStr) слід розміщувати перед другим (compareString), метод повертає від'ємне число. Якщо перший рядок слід розміщувати після другого, метод повертає додатне число. У випадку, коли рядки еквівалентні, повертається 0.

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 3 7 12 5.5
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

У цьому складнішому прикладі localeCompare() використовується з додатковими опціями, що дозволяють налаштувати порівняння рядків з урахуванням локальних особливостей та чутливості до регістру. Це корисно для більш точного порівняння рядків, особливо в міжнародних додатках.

// Створюємо два рядки для порівняння
let germanString1 = "Straße";
let germanString2 = "strasse";

// Порівнюємо рядки з врахуванням локалі та чутливості до регістру
let comparisonResult = germanString1.localeCompare(germanString2, 'de', { sensitivity: 'base' });

console.log(comparisonResult); // Виводить: 0, оскільки в німецькій мові ці рядки вважаються еквівалентними
автор: Bond

У цьому прикладі користувачі можуть ввести два рядки і вибрати локаль для порівняння. Після натискання на кнопку "Порівняти", вони побачать результат порівняння: -1, 0 або 1, відповідно до відносного порядку рядків у вибраній локалі.

автор: Bond

У цьому прикладі ми використовуємо String.prototype.localeCompare() для порівняння двох рядків. Цей метод повертає числове значення, яке показує, чи розміщений перший рядок перед, після або в тому ж порядку, що й другий рядок, при сортуванні відповідно до локальних правил.

// Створюємо два рядки для порівняння
let string1 = "абрикос";
let string2 = "банан";

// Порівнюємо рядки
let comparisonResult = string1.localeCompare(string2);

console.log(comparisonResult); // Виводить: -1, оскільки "абрикос" йде перед "банан"
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід