Text

Alles, was ein Mensch lesen soll, ist Text: Überschriften, Meldungen, Eingaben aus einem Formular. Diese Lektion klärt, wie du ihn hinschreibst und zusammensetzt.

01 / 04Anführungszeichen

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

// Beide Sorten sind gleichwertig, es kommt nur auf den Inhalt an.
const einfach = 'Ein Text in einfachen Anführungszeichen';
const doppelt = "Ein Text in doppelten Anführungszeichen";

console.log(einfach);
console.log(doppelt);

// Steht ein Apostroph im Text, nimmt man die doppelten.
console.log("Es geht nicht, weil's regnet");

// Stehen Anführungszeichen im Text, nimmt man die einfachen.
console.log('Er sagte: "Guten Morgen"');

Einfache und doppelte Anführungszeichen sind gleichwertig. Es gibt keinen Unterschied im Verhalten, keinen in der Geschwindigkeit, keinen im Ergebnis.

Es gibt nur eine Regel: Nimm die Sorte, die im Text nicht vorkommt. Steht ein Apostroph im Text, nimmst du die doppelten. Stehen Anführungszeichen im Text, nimmst du die einfachen. So sparst du dir den Backslash aus dem nächsten Abschnitt.

Welche Sorte man sonst nimmt, ist Geschmackssache oder Teamvereinbarung. In diesem Kurs stehen doppelte, weil sie sich von den einfachen Anführungszeichen im deutschen Fließtext besser unterscheiden.

Wichtig ist nur: Was du öffnest, musst du auch schließen, und zwar mit derselben Sorte. Ein fehlendes Anführungszeichen ist einer der häufigsten Syntaxfehler, und du erkennst ihn daran, dass in deinem Editor plötzlich der halbe Rest der Datei eingefärbt ist wie Text.

02 / 04Der Backslash

Manchmal geht es nicht anders, und das Zeichen, das du brauchst, ist genau das, mit dem der Text aufhört.

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

// Der Backslash nimmt dem nächsten Zeichen seine Bedeutung.
console.log("Er sagte: \"Guten Morgen\"");

// \n ist ein Zeilenumbruch mitten im Text.
console.log("Erste Zeile\nZweite Zeile");

// Und wenn du einen echten Backslash willst, nimmst du zwei.
console.log("Ein Pfad: C:\\Projekte\\kurs");

Der Backslash nimmt dem folgenden Zeichen seine Bedeutung. \" ist ein Anführungszeichen, das den Text nicht beendet. Man nennt das Escapen, und den Backslash davor das Escape-Zeichen.

Zwei Kombinationen brauchst du regelmäßig:

\n ist ein Zeilenumbruch mitten im Text. Der Buchstabe steht für „newline”. Das ist kein \ gefolgt von einem n, sondern ein einziges Zeichen, das der Backslash aus zweien macht.

\\ ist ein echter Backslash. Weil das Zeichen selbst eine Sonderbedeutung hat, muss es sich selbst escapen. Das brauchst du bei Windows-Pfaden und in Abschnitt 9 bei regulären Ausdrücken.

Daneben gibt es \t für einen Tabulator und noch ein paar seltene. Die musst du nicht auswendig lernen.

03 / 04Texte verbinden

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

const name = "Mario";
const stadt = "Leipzig";
const jahre = 20;

// Ein Plus hängt zwei Texte aneinander. Die Leerzeichen musst du selbst setzen.
console.log("Hallo " + name + "!");

// Steht eine Zahl dazwischen, wird sie stillschweigend zu Text.
console.log(name + " aus " + stadt + " ist " + jahre + " Jahre dabei");

// Und ab hier wird es unübersichtlich. Lektion 2.5 löst das.
console.log("Hallo " + name + ", schön dass du aus " + stadt + " kommst!");

Ein Plus zwischen zwei Texten hängt sie aneinander. Das ist derselbe Operator wie beim Rechnen, und was er tut, hängt allein davon ab, was links und rechts steht: zwei Zahlen werden addiert, ist einer der beiden Text, wird verbunden.

Zwei Dinge fallen dabei sofort auf.

Die Leerzeichen musst du selbst setzen. "Hallo" + name ergibt HalloMario. Das Leerzeichen gehört in den Text hinein, also "Hallo " + name. Diesen Fehler macht wirklich jeder einmal.

Zahlen werden stillschweigend zu Text. "ist " + 20 ergibt "ist 20". Praktisch hier, gefährlich anderswo, denn genau dieselbe Regel macht aus "5" + 5 die "55" aus Lektion 2.2.

Und dann fällt noch etwas auf: Sobald mehr als zwei Bausteine im Spiel sind, ist die Zeile schwer zu lesen. Man sieht den fertigen Satz nicht mehr, sondern nur noch Bruchstücke zwischen Plus-Zeichen, und ob die Leerzeichen stimmen, erkennt man erst in der Ausgabe. Genau dafür gibt es eine bessere Schreibweise, und die ist die nächste Lektion.

04 / 04Länge und Unveränderlichkeit

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

const wort = "JavaScript";

// length zählt die Zeichen, Leerzeichen inklusive.
console.log("Länge:", wort.length);
console.log("Länge mit Leerzeichen:", "Guten Morgen".length);

// Ein Text lässt sich nicht ändern, nur neu erzeugen.
const gross = wort.toUpperCase();
console.log("Neu:", gross);
console.log("Alt ist unverändert:", wort);

length ist die Anzahl der Zeichen. Es steht hinter dem Text mit einem Punkt dazwischen und ohne Klammern, denn es ist eine Eigenschaft und kein Befehl. Leerzeichen zählen mit, Satzzeichen auch.

Interessanter ist die zweite Hälfte des Beispiels. toUpperCase macht aus dem Text eine Großbuchstaben-Fassung, und der ursprüngliche Text bleibt danach unverändert. Das ist kein Zufall dieser einen Funktion, sondern eine Eigenschaft aller Texte in JavaScript: Ein Text lässt sich nicht ändern. Jede Operation erzeugt einen neuen und lässt den alten stehen.

Daraus folgt eine Regel, die dich einmal erwischen wird und danach nie wieder: Das Ergebnis musst du auffangen. wort.toUpperCase(); allein bewirkt nichts Sichtbares, weil das Ergebnis nirgends landet. Du brauchst const gross = wort.toUpperCase(); oder gibst es direkt aus.

Zwei Zeilen in der Eingabezeile der Console zeigen dir das, während dieses Beispiel dasteht. Tipp wort.toUpperCase(), und zurück kommt "JAVASCRIPT". Tipp danach wort allein, und zurück kommt "JavaScript". Der Aufruf hat also etwas Neues geliefert und den alten Text in Ruhe gelassen, und du siehst beides direkt untereinander, statt es dir aus zwei Ausgabezeilen zusammenzureimen.

Was es sonst noch an Textfunktionen gibt, ist ein ganzer Abschnitt für sich, nämlich Abschnitt 8. Dort geht es ums Suchen, Ersetzen, Zerteilen und Zusammenfügen. Für den Moment reichen length und das Plus.