JavaScript Academy · Lektion

Lokalisierte Sortierung

Sortieren Sie Strings mit Intl.Collator korrekt.

Lokalisierte Sortierung ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum die Standardsortierung scheitert

Array-sort() vergleicht Zeichenketten anhand von UTF-16-Codeeinheiten. Dadurch werden Großbuchstaben vor Kleinbuchstaben eingeordnet und Akzente nicht korrekt behandelt – für menschenlesbare Listen ist das falsch.

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

localeCompare

String.prototype.localeCompare vergleicht zwei Zeichenketten nach den Regeln einer Locale und gibt einen negativen Wert, null oder einen positiven Wert zurück.

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

Mit localeCompare sortieren

Übergeben Sie die Methode als Vergleichsfunktion, um eine für Menschen passende Sortierreihenfolge zu erhalten.

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

Intl.Collator

Beim Sortieren vieler Elemente ist Intl.Collator schneller: Erstellen Sie ihn einmal und verwenden Sie seine compare-Methode wieder.

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

Akzente und diakritische Zeichen

Collator-Objekte ordnen Zeichen mit Akzenten gemäß der jeweiligen Locale korrekt ein – anders als ein Vergleich von Codeeinheiten.

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

Empfindlichkeit

sensitivity legt fest, welche Unterschiede berücksichtigt werden: "base" ignoriert Groß- und Kleinschreibung sowie Akzente, "accent" ignoriert nur die Groß- und Kleinschreibung, und "variant" unterscheidet alle Varianten.

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

Numerische Sortierung

numeric: true sortiert eingebettete Zahlen nach ihrem Wert, sodass „file2“ vor „file10“ eingeordnet wird.

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

Reihenfolge nach Groß- und Kleinschreibung

caseFirst: "upper" oder "lower" legt fest, ob Großbuchstaben vor Kleinbuchstaben sortiert werden, wenn alle anderen Unterschiede gleich sind.

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

Die Locale beeinflusst die Reihenfolge

Verschiedene Sprachen alphabetisieren unterschiedlich. Im Schwedischen werden bestimmte Buchstaben mit Akzenten hinter z eingeordnet, nicht in der Nähe von a.

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

Mit usage suchen

usage: "search" optimiert den Collator für die Suche statt für die Sortierung – nützlich, um beim Filtern Akzente zu ignorieren.

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

Objekte sortieren

Verwenden Sie den Collator für einen Schlüssel, wenn Sie Arrays mit Objekten sortieren.

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));

Schnelltest

Testen Sie das Locale-bewusste Sortieren.

Zusammenfassung: Locale-bewusstes Sortieren

Sie haben gesehen, warum die Standardsortierung mit sort() falsch ist, localeCompare und den schnelleren Intl.Collator verwendet, Akzente, Empfindlichkeit, numerische Sortierung und die Reihenfolge nach Groß- und Kleinschreibung behandelt, sprachspezifische Alphabete berücksichtigt und die Suche angepasst. Damit ist der Intl-Kurs abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „Lokalisierte Sortierung“ kostenlos?

Ja — der vollständige Text von „Lokalisierte Sortierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Lokalisierte Sortierung“?

Sortieren Sie Strings mit Intl.Collator korrekt. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Lokalisierte Sortierung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy