localeCompare () und sort () – Sortieren mit Sonderzeichen wie Accent Aigu und Cédilla
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", "ärgern", "Cäsar", "Hägen", "hallo", "Ç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);
});
International: 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", "ärgern", "Cäsar", "Hägen", "hallo", "Ç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", "Tand", "218", "Buch", "bund", "bündig"]
.sort( function (w1, w2) {
return w1.localeCompare (w2,'de-DE-u-kn-true');
});
Die leeren Plätze des Arrays wandern beim Sortieren an das Ende des Arrays, leere Strings werden am Anfang des Arrays einsortieren.
Datum sortieren
Sortieren nach Datum ist 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);