Strings verarbeiten – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Strings verarbeiten

Ein zentraler Aspekt in der Pro­gram­mie­rung ist die Da­ten­ver­ar­bei­tung. Dazu wer­den Wer­te ana­lysiert und auf be­stimm­te Ei­gen­schaf­ten unter­sucht.

Wenn ihr die Konsole in eurem Browser öffnet und den folgenden Befehl ausführt, erhaltet ihr ein Eingabefenster.

prompt("Wie heißt du?");

Gebt ihr daraufhin euren Namen in die Eingabezeile ein und bestätigt die Eingabe, erscheint euer Text als Rückgabewert der prompt-Funktion.

prompt("Wie heißt du?");
// => "Oli"

In diesem Artikel geht es darum, eine Eingabe zu verarbeiten und eine Ausgabe zu erzeugen. Der eingegebene Name soll ausgelesen und untersucht werden, sodass am Ende eine Anzeige wie diese ausgegeben wird:

Hi, Oli! Dein Name ist 3 Buchstaben lang und der erste Buchstabe ist ein 'O'

Je nachdem welcher Name angegeben wird, soll sich diese Ausgabe ändern. Wie geht das?

Eingabe speichern

Um die Eingabe auszulesen, muss sie in einer Form gespeichert werden, in der auf sie zugegriffen werden kann. Dazu kann sie in einer Variablen gespeichert werden.

Um die Eingabe in einer Variablen zu speichern, wird eine Variable deklariert und der Rückgabewert der prompt-Funktion ihr zugewiesen. Das klingt kompliziert, ist jedoch recht simpel:

var name = prompt("Wie heißt du?");

Wird in das angezeigte Eingabefeld der Name geschrieben und das Dialogfenster bestätigt, wird dieser Name nun der Variable name zugewiesen. Das könnt ihr testen, indem ihr die Variable auslest:

var name = prompt("Wie heißt du?"); // Angenommen, ihr gebt "Oli" ein
name // Lest die Variable aus
// => "Oli" // In der Konsole steht nun der eingegebene Name

Strings verketten

Die Ausgabe soll mit folgenden Worten beginnen:

Hi, Oli!

Wobei Oli natürlich den eingegebenen Namen darstellen soll, das heißt, wenn Alex eingegeben wird, soll die Ausgabe mit Hi, Alex! beginnen.
Und genau das ist die Schwierigkeit: Wie kann der Wert der Variablen in den String geschrieben werden?
Es reicht nicht, den Namen der Variablen in den String zu schreiben:

"Hi, name!" // name heißt die Variable
// => "Hi, name!" // Es wird einfach "name" als String geschrieben

Es liegt hier eine Mischung aus festen String-Bestandteilen (das "Hi, " und das Ausrufezeichen) mit einer Variablen, die einen String enthält, vor.
Die Lösung ist, diese Teile miteinander zu verketten. Für die String-Verkettung, im Englischen String concatenation, gibt es einen eigenen Operator: Das Plus-Zeichen.

"Hi, " + name + "!"
// => "Hi, Oli!" // Die Variable wird ausgelesen und mit den beiden anderen Strings verkettet

Stringlänge auslesen

In der Ausgabe soll angegeben sein, wie viele Buchstaben der Name enthält:

Hi, Oli! Dein Name ist 3 Buchstaben lang

Das passiert, in dem die Länge des Strings ausgelesen wird. Die Länge des Strings ist nicht nur die Anzahl der Buchstaben, sondern aller Zeichen des Strings - Leer- und andere Zeichen werden ebenfalls mitgezählt.

Schreibt den Variablennamen name in eure Konsole und dahinter einen Punkt. Wahrscheinlich öffnet sich in eurem Browser nun eine Liste mit mehreren Einträgen.

In Chrome wird der Eintrag "length" direkt als erstes angezeigt

Was es mit diesen Einträgen auf sich hat, wird später in dieser Serie genauer beschrieben.
Die Liste enthält den Eintrag length. Length ist Englisch und bedeutet Länge. Wenn ihr diesen Eintrag auswählt oder length ausschreibt und mit Enter die Eingabe ausführt, wird die Anzahl der Zeichen zurückgegeben.

name.length
// => 3

Das funktioniert auch mit anderen Strings. Das .length kann auch direkt hinter einen String geschrieben werden.

"Hallo".length
// => 5

Der Rückgabewert ist eine Zahl, aber auch Zahlen können mit der String concatenation in einen String eingefügt werden:

"Hi, " + name + "! Dein Name ist " + name.length + " Buchstaben lang"
// => "Hi, Oli! Dein Name ist 3 Buchstaben lang"

Einzelne Zeichen auslesen

In der Ausgabe soll stehen, welcher der erste Buchstaben im Namen ist.

Hi, Oli! Dein Name ist 3 Buchstaben lang und der erste Buchstabe ist ein 'O'

Dafür muss auf die einzelnen Zeichen im String zugegriffen werden. Wie funktioniert das?

Ein String ist eine Zeichenkette und genauso liegt er auch im Speicher des Computers – als Kette bzw. als eine Liste von Zeichen. Jeder Buchstabe hat seinen Platz in dieser Liste und um den Buchstaben an einem bestimmten Platz auszulesen, muss dessen Index in eckigen Klammern hinter den String geschrieben werden.

Überraschenderweise gibt es jedoch andere Ergebnisse, als vermutlich zu erwarten wären:

name[1]; // Das erste Zeichen soll ausgelesen werden
// => "l" // Doch das zweite Zeichen wird zurückgegeben
name[2]; // Das zweite Zeichen soll ausgelesen werden
// => "i" // Doch das dritte Zeichen wird zurückgegeben

Die ausgelesenen Indizes scheinen um eine Stelle versetzt zu sein. Das zeigt eine wichtige Lektion in der Programmierung: Null-basierte Nummerierung.
Es wird mit 0 statt mit 1 begonnen, zu zählen. Das bedeutet, um das erste Zeichen des Namens auszulesen muss der Index 0 in eckigen Klammern hinter den String geschrieben werden:

name[0];
// => "O" // Am Index 0 ist das erste Zeichen

Mit dem Wissen kann nun der finale Ausgabe-String zusammengestellt werden.

"Hi, " + name + "! Dein Name ist " + name.length + " Buchstaben lang und der erste Buchstabe ist ein '" + name[0] + "'";

Ausgabe in Dialogfenster

Statt den String in die Konsole zu schreiben, kann er auch in einem Dialogfenster ausgegeben werden. Dazu kann die alert-Funktion verwendet werden. Der String wird als Parameter der Funktion übergeben.

alert("Hi, " + name + "! Dein Name ist " + name.length + " Buchstaben lang und der erste Buchstabe ist ein '" + name[0] + "'");

Durch den Aufruf der Alert-Funktion wird der Text im Dialogfenster ausgegeben

Da vom Beginn bis zu diesem Punkt viele Schritte durchgangen wurden, ist es gut, noch einmal zum Anfang zurückzukehren, und die Variable mit einem anderen Namen zu überschreiben, um zu prüfen, ob auch andere Eingaben zum gewünschten Ergebnis führen.

name = prompt("Wie heißt du?"); // Gebt nun einen anderen Namen ein, bspw. "Anders"

Mit der Pfeil-rauf Taste können die zuletzt ausgeführten Anweisungen in der Konsole durchgegangen werden. Durch zweimal Pfeil-rauf gelangt ihr wieder zum alert-Aufruf. Führt ihn aus. Nun müsste im Dialogfenster die Verarbeitung des neuen Namen stehen.

Hi, Anders! Dein Name ist 6 Buchstaben lang und der erste Buchstabe ist ein 'A'

Aufteilung in mehrere Anweisungen

Statt alles in eine Zeile zu schreiben, gibt es die Möglichkeit, die Zusammensetzung der Ausgabe auch über mehrere Anweisungen hinweg zu verteilen.

Dazu kreiert ihr eine Variable eigens für die Ausgabe.

var output = "Hi, " + name + "! ";

Wie schon bei den mathematischen Operatoren gibt es auch für die String-Verkettung mit Plusgleich einen eigenen Zuweisungsoperator. Dieser wird verwendet, um dem bestehenden String in der Variable output einen weiteren String anzuhängen. Der nächste Satz kann dadurch der Variablen hinzugefügt werden.

output += "Dein Name ist " + name.length + " Buchstaben lang ";
output += "und der erste Buchstabe ist ein '" + name[0] + "'";

Die Variable output kann in der Konsole ausgelesen werden oder der alert-Funktion als Parameter übergeben werden. Das Ergebnis ist dasselbe wie vorher.

output;
// => "Hi, Anders! Dein Name ist 6 Buchstaben lang und der erste Buchstabe ist ein 'A'"
alert(output);