String Sort mit localeCompare – Internationalisierung

Strings je nach Sprache sortieren

Auch wenn das Sortieren von Strings auf den ersten Blick einfach ist – sobald wir den englischsprachigen Raum verlassen beginnen die Probleme mit den Sonderzeichen der Sprachen: Fast alle Sprachen haben charakteristische Zeichen vom Umlaut über das ß bis zum č.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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