Zeichen und Teilstücke

Text ist die Form, in der alles ankommt, was ein Mensch eintippt. Bevor Abschnitt 13 ihn aus einem echten Formular holt, bringt dieser Abschnitt ihn in Form. Los geht es mit dem Zerlegen.

01 / 04Zeichen zählen und lesen

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const nummer = "KURS-2026-JS";

// Wie viele Zeichen sind es?
console.log("Länge:", nummer.length);

// Ein einzelnes Zeichen, gezählt ab 0 wie bei einer Liste.
console.log("Erstes:", nummer[0]);
console.log("Fünftes:", nummer[4]);

// at kann dasselbe und zusätzlich von hinten zählen.
console.log("Letztes mit at:", nummer.at(-1));
console.log("Vorletztes:", nummer.at(-2));

// Von hinten mit eckigen Klammern geht nicht.
console.log("Mit Klammern von hinten:", nummer[-1]);

// Und die alte Schreibweise, die man noch oft sieht.
console.log("Letztes von Hand:", nummer[nummer.length - 1]);

length sagt dir, aus wie vielen Zeichen ein Text besteht. Das kennst du schon aus Lektion 2.4, und es funktioniert genauso wie bei einer Liste.

Ein einzelnes Zeichen holst du mit eckigen Klammern, ebenfalls ab 0 gezählt. Ein Text verhält sich hier also wie ein Array, ohne eines zu sein.

at kann dasselbe und noch etwas mehr: mit einer negativen Zahl zählt es von hinten. at(-1) ist das letzte Zeichen, at(-2) das vorletzte. Mit eckigen Klammern geht das nicht, dort liefert [-1] schlicht undefined.

Der alte Weg zum letzten Zeichen steht am Ende des Beispiels: text[text.length - 1]. Den siehst du in fremdem Code oft, und jetzt weißt du, was er tut. Neu schreiben würde man ihn nicht mehr.

02 / 04Ein Stück herausschneiden

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const nummer = "KURS-2026-JS";

// Von Position 0 bis vor Position 4. Das Ende gehört nicht dazu.
console.log("Vorn:", nummer.slice(0, 4));

// Die Länge des Stücks ist die Differenz der beiden Zahlen.
console.log("Vier Zeichen:", nummer.slice(0, 4).length);

// Das Ende darf weggelassen werden, dann geht es bis zum Schluss.
console.log("Ab 5:", nummer.slice(5));

// Negative Werte zählen von hinten.
console.log("Letzte zwei:", nummer.slice(-2));
console.log("Ohne die letzten drei:", nummer.slice(0, -3));

// Die Mitte: von 5 bis vor 9.
console.log("Jahr:", nummer.slice(5, 9));

slice nimmt zwei Zahlen: die Position, an der das Stück beginnt, und die, vor der es endet. Das Ende gehört nicht dazu, und das ist die Regel, die man einmal falsch anwendet und danach nie wieder vergisst.

Der Vorteil dieser Zählweise ist praktisch: die Länge des Stücks ist genau die Differenz der beiden Zahlen. slice(0, 4) liefert vier Zeichen, slice(5, 9) ebenfalls vier.

Beide Angaben sind optional. Ohne die zweite geht es bis zum Ende, und negative Werte zählen von hinten. slice(-2) sind die letzten beiden Zeichen, slice(0, -3) alles ohne die letzten drei.

Diese vier Formen sind schneller ausprobiert als nachgelesen. Tipp "JavaScript".slice(0, 4) in die Eingabezeile der Console, die Antwort ist "Java", und "JavaScript".slice(-6) antwortet "Script". Wenn du dir bei einer Grenze unsicher bist, ist das jedes Mal die kürzere Frage als der Blick in die Dokumentation.

03 / 04Der Zwilling, den du nicht nimmst

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const text = "Programmieren";

// Bei gewöhnlichen Werten sind die beiden gleich.
console.log("slice:", text.slice(0, 7));
console.log("substring:", text.substring(0, 7));

// Bei negativen Werten nicht. slice zählt von hinten.
console.log("slice(-4):", text.slice(-4));

// substring macht daraus eine 0 und liefert den ganzen Text.
console.log("substring(-4):", text.substring(-4));

// Und substring vertauscht die Angaben stillschweigend,
// wenn sie in der falschen Reihenfolge stehen.
console.log("slice(7, 3):", text.slice(7, 3));
console.log("substring(7, 3):", text.substring(7, 3));

// Deshalb im Kurs immer slice.

Es gibt eine zweite Methode mit fast derselben Aufgabe: substring. Bei gewöhnlichen Angaben verhalten sich beide gleich, und deshalb sieht man beide in freier Wildbahn.

Bei ungewöhnlichen Angaben laufen sie auseinander, und substring verhält sich dabei überraschend. Negative Zahlen behandelt es als 0, und wenn Anfang und Ende in der falschen Reihenfolge stehen, vertauscht es sie stillschweigend.

Beides ist gut gemeint und im Ergebnis unangenehm: ein Rechenfehler, der eine negative Position erzeugt, fällt nicht auf, er liefert einfach ein anderes Stück. Nimm slice. Es tut, was dasteht, und wo etwas nicht passt, kommt ein leerer Text heraus, den man bemerkt.

04 / 04Und nichts davon verändert etwas

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

let name = "  mario  ";

// Das hier sieht aus, als würde es etwas tun. Es tut nichts.
name.trim();
name.toUpperCase();
console.log("Unverändert:", `[${name}]`);

// Richtig ist: das Ergebnis auffangen.
const sauber = name.trim();
console.log("Aufgefangen:", `[${sauber}]`);

// Oder den Namen neu belegen, wenn er ein let ist.
name = name.trim().toUpperCase();
console.log("Neu belegt:", `[${name}]`);

// Auch ein einzelnes Zeichen lässt sich nicht überschreiben.
const wort = "Haus";
wort[0] = "M";
console.log("Immer noch:", wort);

Jetzt der Punkt, an dem in diesem Abschnitt die meiste Zeit verloren geht.

Ein Text ist unveränderlich. Keine der Methoden in diesem Abschnitt ändert den Text, auf dem sie aufgerufen wird. Alle geben einen neuen Text zurück, und der alte bleibt genau so stehen, wie er war.

Deshalb tut name.trim() als eigene Zeile nichts Sichtbares. Es berechnet den getrimmten Text und wirft ihn weg, weil ihn niemand auffängt. Es kommt auch keine Warnung, die Zeile ist ja gültig.

Richtig ist entweder ein neuer Name für das Ergebnis oder eine neue Zuweisung an den alten, sofern er ein let ist. Das gilt für alles, was in dieser und in den nächsten Lektionen kommt, und wenn eine Textumformung scheinbar wirkungslos bleibt, ist fast immer das die Ursache.

Der letzte Block zeigt dasselbe von der anderen Seite: wort[0] = "M" ist erlaubt zu schreiben und ändert nichts. Bei einer Liste würde es funktionieren, bei einem Text nicht.