localeCompare () und sort ()
Nur wenige Sprachen begnügen sich mit dem einfachen A bis Z. Wenn wir nicht gerade die Namen deutscher Städte sortieren, die sich auf die deutschen Umlaute und das ß beschränken, sondern mit Namen umgehen, müssen wir auf eine Vielzahl von charakteristischen Zeichen achten.
- Ç
- Cédilla
- é
- Accent Aigu
- â, ê, î, ô, û
- Accent Circonflexe
- à, è, ù
- Accent Grave
- ë, ï, ü
- Accent Tréma (Umlaut, Dieresis)
Wenn wir Strings sortieren, sind es fast immer Strings in Arrays. Das können wir ohne großen Vorlauf direkt so schreiben
const arr = ["Übach-Palenberg", "Unna", "5Code", "Cäsar", "Hägen", "Hagen", "Çelik"];
document.querySelector(".simple").innerHTML = arr.sort();
Das ist schräg und entspricht nicht unseren Erwartungen. Ohne das erste Argument arr.sort(compareFunction) werden die Elemente des Arrays in Strings umgewandelt und entsprechend zum jeweiligen Unicode Code Point-Wert sortiert.
U+0043 C 43 LATIN CAPITAL LETTER C U+0063 c 63 LATIN SMALL LETTER C U+00C7 Ç c3 87 LATIN CAPITAL LETTER C WITH CEDILLA U+00E4 ä c3 a4 LATIN SMALL LETTER A WITH DIAERESIS
Die Lösung setzt ebenfalls auf sort (): Als erste Argument von sort kann die Vergleichsfunktion localeCompare eingesetzt werden.
lokal.innerHTML = arr.sort( function (w1, w2) {
return w1.localeCompare (w2);
});
Internationalisierung: Intl.Collator().compare
Das ECMAScript Internationalization API beschert uns mit Sortierungen und Vergleichen von Strings, für die Formatierung von Zahlen und des Datums,
["Übach-Palenberg", "Unna", "5Code", "Cäsar", "Hägen", "Hagen", "Çelik"].sort(Intl.Collator().compare);
Intl.Collator() erspart die Callback-Funktion und ist bei einem großen Datenvolumen einen Tick schneller.
Support: Alle modernen Browser und IE11
Strings sortieren mit Groß- / Kleinschreibung und Ziffern
localeCompare () ist eine String-Methode, die zwei Strings unter Einbeziehung der Sprache miteinander vergleicht und einen numerischen Wert zurück gibt.
stringA.localeCompare (stringB, "de", { sensitivity: "base" }));
localeCompare hat drei Argumente: die Zeichenkette, die verglichen wird, ein Länderkürzel (optional – default wird vom Browser entschieden), sensitivity (optional – default ist "nicht case-sensitiv").
- sensitivity: "case" Groß-Kleinschreibung beachten
- sensitivity: "u-kf-upper"
- sensitivity: "u-kf-lower"
- sensitivity: "u-kn-true" für die Sortierung von Zahlen
Ziffern rangieren beim Sortieren von Buchstaben.
["1024", "Tuch", "555", "5", "13", "218", "Buch"].sort( function (w1, w2) {
return w1.localeCompare (w2,'de-DE-u-kn-true');
});
Datum sortieren
Sortieren nach Datum in ein Einzeiler, denn der Vergleich zwischen einem Datum und einem anderen Datum ist einfach. Die Subtraktion zweier Daten gibt die Differenz in Millisekunden zurück – das Datum wird im Callback von sort() subtrahiert.
const dates = [
new Date ("January 15, 2023 10:30:17"),
new Date ("December 24, 2022 17:23:00"),
new Date ("January 12, 2020 00:30:00"),
new Date ("March 02, 2021 12:00:34"),
new Date ("September 02, 2022 18:00:00"),
new Date ("May 20, 2019 04:23:00"),
new Date ("October 17, 2022 10:00:00"),
new Date ("January 12, 2020 23:30:00")
]
dates.sort((date1, date2) => date1 - date2);