JavaScript Academy · Lekcja

Sortowanie zgodne z lokalizacją

Proszę poprawnie sortować ciągi znaków za pomocą Intl.Collator.

Sortowanie zgodne z lokalizacją to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Dlaczego domyślne sortowanie zawodzi

Metoda sort() tablic porównuje ciągi znaków według jednostek kodu UTF-16. W efekcie umieszcza wielkie litery przed małymi i niepoprawnie obsługuje znaki diakrytyczne — nie nadaje się to do list czytelnych dla użytkownika.

const words = ["banana", "Apple", "cherry"];
console.log([...words].sort()); // ["Apple","banana","cherry"] — capital wins

localeCompare

String.prototype.localeCompare porównuje dwa ciągi znaków zgodnie z regułami lokalizacji, zwracając wartość ujemną, zero lub wartość dodatnią.

console.log("apple".localeCompare("banana")); // -1
console.log("banana".localeCompare("apple")); // 1

Sortowanie za pomocą localeCompare

Należy przekazać tę metodę jako funkcję porównującą, aby uzyskać kolejność przyjazną dla użytkownika.

const words = ["banana", "Apple", "cherry"];
console.log([...words].sort((a, b) => a.localeCompare(b)));
// ["Apple", "banana", "cherry"] — case-insensitive ordering

Intl.Collator

W przypadku sortowania wielu elementów Intl.Collator jest szybszy: należy utworzyć go raz i ponownie używać jego metody compare.

const collator = new Intl.Collator("en-US");
const words = ["banana", "Apple", "cherry"];
console.log([...words].sort(collator.compare));

Znaki diakrytyczne

Obiekty Collator porządkują znaki diakrytyczne poprawnie dla danej lokalizacji, w przeciwieństwie do porównywania jednostek kodu.

const words = ["zebra", "ela", "elf", "elan"];
const collator = new Intl.Collator("fr");
console.log([...words].sort(collator.compare));

Czułość

sensitivity określa, które różnice mają znaczenie: "base" ignoruje wielkość liter i znaki diakrytyczne, "accent" ignoruje tylko wielkość liter, a "variant" rozróżnia wszystkie różnice.

const c = new Intl.Collator("en", { sensitivity: "base" });
console.log(c.compare("apple", "APPLE")); // 0 (treated equal)

Sortowanie liczbowe

numeric: true sortuje liczby występujące w ciągach według ich wartości, dzięki czemu „file2” znajduje się przed „file10”.

const files = ["file10", "file2", "file1"];
const c = new Intl.Collator("en", { numeric: true });
console.log([...files].sort(c.compare)); // ["file1","file2","file10"]

Kolejność według wielkości liter

caseFirst: "upper" lub "lower" określa, czy wielkie litery mają być sortowane przed małymi, gdy pozostałe różnice są takie same.

const c = new Intl.Collator("en", { caseFirst: "upper" });
console.log(["b", "B", "a", "A"].sort(c.compare));

Lokalizacja ma znaczenie dla kolejności

Różne języki stosują różne porządki alfabetyczne. W języku szwedzkim niektóre znaki diakrytyczne są sortowane za literą z, a nie w pobliżu litery a.

const words = ["z", "a", "o"];
console.log([...words].sort(new Intl.Collator("sv").compare));

Wyszukiwanie za pomocą usage

usage: "search" dostosowuje obiekt Collator do wyszukiwania zamiast porządkowania — przydatne podczas filtrowania bez uwzględniania znaków diakrytycznych.

const c = new Intl.Collator("en", { usage: "search", sensitivity: "base" });
function matches(a, b) { return c.compare(a, b) === 0; }
console.log(matches("cafe", "CAFE")); // true

Sortowanie obiektów

Podczas sortowania tablic obiektów należy użyć obiektu Collator dla wybranego klucza.

const people = [{ name: "Bob" }, { name: "alice" }, { name: "Carol" }];
const c = new Intl.Collator("en");
console.log(people.sort((a, b) => c.compare(a.name, b.name)).map((p) => p.name));

Szybki test

Proszę przetestować sortowanie uwzględniające lokalizację.

Podsumowanie: sortowanie uwzględniające lokalizację

Dowiedzieli się Państwo, dlaczego domyślne sort() działa niepoprawnie, używali localeCompare i szybszego Intl.Collator, obsługiwali znaki diakrytyczne, czułość, sortowanie liczbowe i według wielkości liter, alfabety właściwe dla poszczególnych lokalizacji oraz wyszukiwanie. To kończy kurs Intl.

Często zadawane pytania

Czy lekcja „Sortowanie zgodne z lokalizacją” jest bezpłatna?

Tak — pełny tekst „Sortowanie zgodne z lokalizacją” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Sortowanie zgodne z lokalizacją”?

Proszę poprawnie sortować ciągi znaków za pomocą Intl.Collator. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Sortowanie zgodne z lokalizacją”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy