Javascript Strings – Zeichen-Position at X

Position im String

Zum besseren Verständnis der String-Methoden hilft es, sich den String als ein besonderes Array vorzustellen:

                    1                   2
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 Index
I c h   b i n   e i n e   ©   Z e i c h e n k e t t e Zeichen

Die Position eines Zeichens oder das Zeichen an einer Position werden für das Zerlegen von Strings mit slice (start, end) oder substring (start, end) gebraucht, wenn neue Strings auf Teilstücken neu zusammengesetzt werden.

string charAt(i) an Position i

string.charAt(i) gibt das Zeichen am Index i – gezählt ab 0 – zurück (weil immer ab 0 gezählt wird, wäre das letzte Zeichen an Position string.length - 1).

               // 012345678901234567890123456
const mystring = "Ich bin eine © Zeichenkette";
console.log ("charAt(13) " + mystring.charAt(13));

[LOG] charAt(13) ©

Ist der Index i größer als die Länge der Zeichenkette, ist der Rückgabewert von string.charAt() leer.

string at – Zeichen an Position x

Gibt einen String der Länge 1 zurück, nämlich das Zeichen an Position x. Im Unterschied zu charAt unterstützt string at auch negative Indizes.Gilt als moderner als [index].

           +  01234567
console.log ("Lavendel".at(1)); // a
console.log ("Lavendel".at(-8)) // L
           -  87654321

charCodeAt

Jedes Zeichen hat eine bestimmte Position in der Unicode-Zeichentabelle. string.charCodeAt(i) gibt den Unicode-Codewert an der Position i – gezählt ab 0 – zurück.

               // 012345678901234567890123456
const mystring = "Ich bin eine © Zeichenkette";
console.log ("charCodeAt(13) " + mystring.charCodeAt(13));

[LOG] charCodeAt(13) 169

Da haben wir die Unicode-Position von © und können stattdessen auch © schreiben.

.codePointAt()

Wir nutzen heute viele Zeichen, die außerhalb der Basic Multilingual Plane (BMP) liegen. Dazu gehören Emojis und asiatische Sonderzeichen. charCodeAt() gibt nur 16-Bit Code Units (Surrogate-Paar) zurück, die oft unbrauchbar sind.

Ab ES6 kann man codePointAt nutzen, um den echten Unicode-Codepunkt zurückgeben zu lassen, wenn z.B. der Code Point für ein Sonderzeichen gefragt ist. Echten Unicode-Codepunkte werden für die Verarbeitung von Texten (Suche, Validierung, Filter) gebraucht, z.B., um zu prüfen, ob ein Zeichen ein Emoji ist oder Texte nach bestimmten Unicode-Bereichen durchsuchen (z. B. mathematische Symbole, Piktogramme). Zuguterletzt werden Input-Felder und textareas validiert (nur lateinische Buchstaben und Emojis erlauben).

const frosch = "🐸";
console.log(frog.codePointAt(0)); // 128056

128056 entspricht hex 1F438. Genau das Zeichen 🐸 🐸.

const cp = 'ẞ'.codePointAt(0);
console.log(cp); // gibt 7838 zurück

const hex = "🕍".codePointAt(0).toString(16)
let emoji = String.fromCodePoint("0x"+hex);

fromCharCode

String.fromCharCode() ist eine Funktion, aber keine Instanzmethode, sondern eine statische Methode des String-Objekts (erkennt man daran, dass String mit einem großen S beginnt und nicht in Hochkommas sitzt). Während Instanzmethoden auf einem String aufgerufen werden ("Lavendel".at(1)), werden statische Methoden direkt auf dem Objekt String selbst aufgerufen.

string.fromCharCode(c1,c2,..) erzeugt einen String aus Unicode-Werten ci.

const simpleString = String.fromCharCode(69, 103, 111, 110); // "Egon"
document.querySelector(".egon").innerHTML = simpleString;

Statische Methoden kommen in freier Wildbahn selten vor, aber es gibt sie nunmal … . String.fromCodePoint erstellt einen String aus vollständigen Unicode-Codepoints (auch Emojis). Also mal ganz schnell 50 Emojis erzeugen …

const result = String.fromCodePoint(
	...Array.from(
		{ length: 50 }, 
		(_, i) => 0x1F600 + i
	)
);

document.querySelector(".emojis").innerHTML = result;

Die wichtigsten String-Methoden

1. trim() / trimStart() / trimEnd() – Entfernen überflüssiger Leerzeichen in Benutzereingaben
2. slice(start, end) – Einen Teilstring ausschneiden und einem neuen String zuweisen
3. includes(), startsWith(), endsWith() – Suchen im Text
4. replace() / replaceAll () – Ersetzen von Text
5. split() – Zeichenfolge in ein Array zerlegen, häufig zusammen mit join()
6. match() / matchAll() – Inhalte mit regulären Ausdrücken extrahieren, matchAll() für Interation über alle Treffer
7. toLowerCase() / toUpperCase() – für Vergleiche und Normalisierung in Suchfunktionen
8. localeCompare() – Sprachsensible Vergleiche – wichtig bei Umlauten ["Äpfel", "Banane", "Zitrone"].sort((a, b) => a.localeCompare(b, "de"));