CSS, HTML und Javascript mit {stil}

String Sort mit localeCompare

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

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

Intl.Collator

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.

Datum formatieren

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