Aufteilen und verbinden

Zwischen einem Text und einer Liste liegt genau eine Methode, in jede Richtung eine. Sobald du das kannst, ist jede Textverarbeitung eine Listenverarbeitung, und dafür hast du in Abschnitt 6 schon alles gelernt.

01 / 04Hin und zurück

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

const zeile = "Ida,Ben,Mila";

// Aus einem Text wird eine Liste.
const namen = zeile.split(",");
console.log("Geteilt:", namen);
console.log("Wie viele:", namen.length);

// Und wieder zurück. Beliebiges Trennzeichen.
console.log("Verbunden:", namen.join(" und "));
console.log("Wieder wie vorher:", namen.join(","));

// Mit leerem Trennzeichen einzeln in Zeichen zerlegt.
console.log("Zeichen:", "Haus".split(""));

// Und dazwischen liegt eine Liste, also gilt Abschnitt 6.
console.log("Rückwärts:", "Haus".split("").reverse().join(""));

split macht aus einem Text eine Liste. Du gibst das Trennzeichen an, und überall dort, wo es vorkommt, wird geschnitten. Das Trennzeichen selbst landet nicht in der Liste.

join macht aus einer Liste einen Text und setzt zwischen die Einträge, was du angibst. Die beiden sind Umkehrungen voneinander: text.split(",").join(",") gibt dir denselben Text zurück.

Interessant wird es, wenn du zwischen den beiden etwas machst. Die Liste dazwischen kennt map, filter, sort und reverse, und damit sind Umformungen möglich, die es für Text direkt gar nicht gibt. Ein Text rückwärts ist genau das: aufteilen, umdrehen, verbinden.

split("") mit leerem Trennzeichen zerlegt in einzelne Zeichen. Für europäische Sprachen ist das in Ordnung. Bei Emojis und einigen anderen Zeichen zerfällt dabei mehr, als man will, aber das ist ein Thema für einen anderen Tag.

02 / 04Wo split unerwartet zuschlägt

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

const sauber = "a b c";
const doppelt = "a  b c";

// Bei einfachen Leerzeichen sieht alles gut aus.
console.log("Sauber:", sauber.split(" "));
console.log("Anzahl:", sauber.split(" ").length);

// Zwei Leerzeichen hintereinander erzeugen einen leeren Eintrag.
console.log("Doppelt:", doppelt.split(" "));
console.log("Anzahl:", doppelt.split(" ").length);

// Der Ausweg: leere Einträge wegfiltern.
const woerter = doppelt.split(" ").filter((wort) => wort !== "");
console.log("Gefiltert:", woerter, woerter.length);

// Dasselbe passiert am Rand.
console.log("Mit Rand:", " a b ".split(" "));

Hier steckt die Überraschung dieser Lektion, und sie ist leicht zu übersehen.

Zwei Trennzeichen hintereinander erzeugen einen leeren Eintrag. Zwischen ihnen steht nichts, und split liefert genau das: einen leeren Text an dieser Stelle. Bei einem Testsatz mit einfachen Leerzeichen fällt das nie auf, in echten Eingaben dauernd.

Dasselbe passiert am Rand. Beginnt der Text mit dem Trennzeichen, ist der erste Eintrag leer, endet er damit, der letzte.

Der Ausweg ist ein filter dahinter, das die leeren Einträge wegwirft. Das ist eine Zeile mehr und die kürzeste ehrliche Lösung, solange man kein Muster aus Abschnitt 9 nehmen will. Wer nur die Wörter zählen will, zählt sonst zu viele.

03 / 04Aufräumen am Rand

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

const eingabe = "   Mario   ";

// Eckige Klammern im Text machen die Ränder sichtbar.
console.log(`Roh: [${eingabe}]`);
console.log(`trim: [${eingabe.trim()}]`);
console.log(`trimStart: [${eingabe.trimStart()}]`);
console.log(`trimEnd: [${eingabe.trimEnd()}]`);

// trim erwischt auch Zeilenumbrüche und Tabulatoren.
console.log(`Mit Umbruch: [${"\n  Mario \n".trim()}]`);

// Aber nicht die Leerzeichen in der Mitte.
console.log(`Mitte: [${"Mario  Laurich".trim()}]`);

// Und wie immer: das Ergebnis muss aufgefangen werden.
const roh = "  Mario  ";
roh.trim();
console.log(`Nicht aufgefangen: [${roh}]`);

trim entfernt Leerzeichen am Anfang und am Ende, trimStart und trimEnd jeweils nur an einer Seite. Alle drei geben einen neuen Text zurück und lassen den alten stehen.

trim erwischt nicht nur Leerzeichen, sondern auch Tabulatoren und Zeilenumbrüche. Das ist genau richtig für Eingaben, denn ein versehentlicher Zeilenumbruch am Ende eines eingefügten Textes ist der häufigste Grund, warum ein Vergleich scheitert, obwohl beide Werte gleich aussehen.

Leerzeichen in der Mitte lässt trim in Ruhe. Das ist Absicht, dort gehören sie ja meistens hin. Wenn du auch die zusammenfassen willst, führt der Weg über split und filter aus dem Absatz davor.

Die letzten Zeilen zeigen noch einmal den Fehler aus Lektion 8.1, weil er genau hier am häufigsten passiert: roh.trim() als eigene Zeile tut nichts.

04 / 04Das Rezept für Nutzereingaben

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

const eingabe = " Ida , ben ,MILA ";

// Schritt für Schritt, damit man jeden Zwischenstand sieht.
const roh = eingabe.split(",");
console.log("1. geteilt:", roh);

const getrimmt = roh.map((t) => t.trim());
console.log("2. getrimmt:", getrimmt);

const klein = getrimmt.map((t) => t.toLowerCase());
console.log("3. kleingeschrieben:", klein);

const schoen = klein.map((t) => t[0].toUpperCase() + t.slice(1));
console.log("4. erster Buchstabe groß:", schoen);

// Und dasselbe als eine Kette.
console.log(
  "In einem:",
  eingabe
    .split(",")
    .map((t) => t.trim().toLowerCase())
    .map((t) => t[0].toUpperCase() + t.slice(1))
);

// Ausrichten mit padStart und padEnd, wie in Lektion 4.5.
console.log("Uhrzeit:", `${String(7).padStart(2, "0")}:05`);
console.log("Tabelle:", "Ida".padEnd(8, ".") + "98");

Fünf Handgriffe, die in dieser Reihenfolge fast jede Eingabe in Form bringen: teilen, trimmen, vereinheitlichen, prüfen, verbinden.

Das Beispiel zeigt sie einmal einzeln, mit einem console.log je Schritt. Genau so würde man es auch beim Entwickeln schreiben und die Zwischenschritte erst am Ende zusammenfassen. Wer die Kette gleich in einem Stück tippt und sie funktioniert nicht, hat keinen Anhaltspunkt, welcher Schritt danebenging.

Die Reihenfolge ist nicht beliebig. Erst teilen, dann trimmen: die Leerzeichen sitzen ja an den Rändern der Teile und nicht an denen des ganzen Textes. Ein trim vor dem split erwischt nur den Anfang und das Ende der Eingabe.

padStart und padEnd gehören auch hierhin. Sie füllen einen Text auf eine feste Länge auf, vorn oder hinten, mit einem Zeichen deiner Wahl. Für zweistellige Uhrzeiten und für Ausgaben, die untereinander stehen sollen, ist das der kürzeste Weg. In Lektion 4.5 hast du sie schon benutzt.