Javascript Strings alphabetisch sortieren

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"
            ];
const simple = document.querySelector(".simple")
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);