Javascript Strings • Zeichenketten

Zeichenkette in Javascript: Strings

Strings sind der Dreh- und Angelpunkt der Entwicklung von Web-Anwendungen vom Kontaktformular bis zum Shopping Cart. Auch wenn wir den Computer »Rechner« nennen: Programme wühlen sich laufend durch Zeichenketten.

Eingabefelder in Formularen werden als Strings gelesen, Pfadnamen und Nachrichten an den Benutzer sind Strings.

Strings sind Folgen von Zeichen aller Art, die in einfache oder doppelte Hochkommas gefasst werden.

let simpleString = "Hallo Welt!";   // Literale Notation
let simpleString = "";              // erzeugt einen leeren String

Jedes Zeichen eines Strings wird durch ein 16-Bit-Unicodezeichen dargestellt – Strings dürfen Umlaute enthalten und die Interationalisierung von Anwendungen mit Javascript ist ein Klacks.

let simpleString = "äöüß";

Hochkommas für Javascript-Strings

Quoting ist die Kunst, Strings in die richtigen Hochkommas zu setzen. Die Hochkommas müssen zusammenpassen: Wenn ein String mit einem einfachen Hochkomma beginnt, muss er mit einem einfachen Hochkomma geschlossen werden. Einfache Hochkommas dürfen doppelte Hochkommas enthalten und umgekehrt:

"Dies ist eine Zeichenkette"    // schöne einfache Hochkommas
^                          ^
+--------------------------+

'@!zzz@@ zack!!! '
^                ^
+----------------+

'p { font-family: "Courier New" }'
^                 ^           ^  ^
+--------------------------------+

"Und noch'n 'String'"
^           ^      ^^
+-------------------+

"Wo ist die „Zeichenkette“?"    // Anführungszeichen 
^                          ^     
+--------------------------+    // sind keine Hochkommas


„Dies ist kein valider String“  // Falsch gequotet: 
                                // Anführungszeichen sind keine Hochkommas

'Kein "valider' String"         // Falsch gequotet

"drunter und drüber"            // Verschiedene Strings, da Javascript 
"Drunter und Drüber"            // zwischen Groß- und Kleinschreibung
                                // unterscheidet

"5"                             // Zahlen in Hochkommas: auch nur Strings
5                               // Ohne Hochkommas ist die Zahl eine Zahl 

""                              // Leere Hochkommas bilden einen null-String

Wenn weitere Sätze unterschiedlicher Hochkommas gebraucht werden, können sowohl einfache als auch doppelte Hochkommas mit einem vorangestellten Backslash notiert werden: \" oder \'. Zeichen mit einem vorangehenden Backslash werden als Escape-Sequenzen bezeichnet. Der Backslash teilt dem Interpreter mit, dass er das nächste Zeichen so dargestellen soll wie es ist.

elem.innerHTML = '<?php echo "<p class=\"simple\">Ausgabe"</p> ?>';
                 ^           ^         ^        ^        ^       ^
                 +-----------+---------+--------+--------+-------+

String-Konkatenation

Das Zusammenfügen – konkatenieren – von Strings ist die wichtigste Stringoperation – z.B. um zwei Strings in einen neuen String zu packen oder um einen langen String in kürzere Strecken zu teilen, damit er besser lesbar ist.

Das »+«-Zeichen verbindet Strings miteinander. Das Verfahren wird auch als Konkatenation bezeichnet und das »+«-Zeichen als Operator der Konkatenation. Seine Operanden sind zwei Strings.

let vorname  = "Donald";
let nachname = "Duck"; 
let name = vorname + " " + nachname; 
alert(name);                            // Ausgabe: Donald Duck

alert(name) gibt Donald Duck aus – und zwar ohne die Hochkommas, die im Skript nur dazu dienen, den String vom Rest des Skriptcodes zu trennen.

In der Mitte steht ein literales Leerzeichen (literal: „wörtlich“, weil nicht durch eine Variable dargestellt, sondern direkt notiert). Jede Mischung aus literalen Strings und Variablen ist erlaubt:

let vorname = "Donald";
let name = vorname + " " + "Duck";

Und es geht noch kürzer:

let name = "Donald";
name += " Duck";

Immer die Hochkamms prüfen! Falsch gesetzte Hochkommas passieren auch den besten Programmierern immer wieder.

Steht innerhalb einer Zeichenkette eine Variable, so wird sie nicht ausgewertet, sondern als Teil des Strings angesehen. Damit eine Variable innerhalb des Strings ausgewertet wird, muss sie durch den +-Operator von den umgebenden Zeichen getrennt werden.

let preis = 17;

let prod = "T-Shirts " + preis + " €";

Länge von Strings: length

str.length gibt die Anzahl der Zeichen eines Strings zurück.

let simpleString = "Ich bin eine Zeichenkette";
let len = simpleString.length;                    // len hat jetzt den Wert 25

Theoretisch können Strings beliebig lang werden, nur ältere Browser, die heute kaum noch von Belang sind, limitieren Strings auf eine Länge von 255 Zeichen.

Strings suchen, vergleichen und ersetzen

string match
durchsucht einen String und gibt alle Treffer als Array zurück.
string indexOf
sucht einen String und gibt die erste Fundstelle zurück.
string search
sucht ebenfalls einen String und gibt die erste Fundstelle zurück, aber kann mit einem regulären Ausdruck eine komplexe Suche starten.
string replace
findet einen String und ersetzt ihn durch eine neue Zeichenkette.

Zeilenumbruch im String

Lange literale Strings dürfen über mehrere Zeilen notiert werden:

let gedicht = "Als es klingelte, nachts," +
              "es war kurz vor halb zehn," +
              "wurde niemand erwartet und niemand gesehen.";

Seit ECMAScript 5 dürfen Strings auch ohne "+"-Zeichen umgebrochen werden.

let gedicht1 = "Als es klingelte, nachts, \
es war kurz vor halb zehn, ";
let gedicht2 = "Als es klingelte, nachts, \ 
es war kurz vor halb zehn, ";

Die zweite Zeile führt zu einem Fehler, denn hinter dem Backslash sitzt ein Leerzeichen. Firefox meldet SyntaxError: unterminated string literal[Weitere Informationen], Chrome bezeichnet den Fehler als Uncaught SyntaxError: Invalid or unexpected token.

Diese Schreibweise ist kaum eine empfehlenswerte Technik, zumal die folgenden Zeilen immer am linken Rand anfangen müssen. Werden die Folgezeilen schön eingerückt, entstehen dicke Lücken im String.

Der Zeilenumbruch, der den Code lesbarer gestaltet, wird bei der Ausgabe einer Zeichenkette nicht berücksichtigt.

offer.innerHTML = "T-Shirt „Emmi“ Stck 12,50 € " +
                  "T-Shirt „Loll“ Stck 10,l2 €";
T-Shirt „Emmi“ Stck 12,50 € T-Shirt „Loll“ Stck 10,l2 €

Strings, Zahlen und das +

Der +-Operator ist doppelt belegt und kann sowohl die Konkatenation von Strings als auch die Addition von Zahlen veranlassen. Wenn der JavaScript-Interpreter ein +-Symbol erspäht, muss er also eine Entscheidung treffen, ob er Zahlen addieren oder Strings konkatenieren soll.

Wenn einer der beiden Operanden eine Zahl ist und der andere Operand ein String, erzeugt die Konkatenation einen String. Wenn beide Operanden Zahlen sind, wird das „+“-Zeichen zu einem Additions-Operator.

2 + 2           // ist eine Addition und ergibt die Zahl 4

2 + "2"         // ist eine Konkatenation und ergibt den String "22"

"2" + "2"       // ist eine Konkatenation und ergibt den String "22"

2 + 2 + "2"     // ist eine Addition gefolgt von einer Konkatenation
                // und ergibt den String "42"

Zu klassischen Fehlern kommt es immer wieder, wenn ein Skript versucht, Zahlenwerte und Strings zu addieren. Zu den Fallen gehören die Werte aus Formularfeldern, die der Javascript-Interpreter immer als Strings behandelt, auch wenn das Eingabefeld die Eingabe von Zahlen erfordert.

Die Methoden parseInt () und parseFloat () konvertieren Strings in ganze Zahlen bzw. Fließkommazahlen.

parseInt("2") + parseInt("2")  // ergibt 4
parseInt("2") + 2              // ergibt 4

String löschen

Die einfachste Methode, einen String zu löschen, ist das Zuweisen eines leeren Strings.

let simpleString = "Hallo Welt"; 
…
simpleString = "";

Escapezeichen

Escapezeichen werden zur Darstellung von Zeichen benutzt, die in regulären Ausdrücken normalerweise eine besondere Bedeutung haben und zur Darstellung von Zeichen, die nicht auf der Tastatur eingegeben werden können und im Dokument nicht direkt sichtbar sind, sondern nur durch ihre Wirkung in Erscheinung treten.

\f
Formfeed (Zeilenvorschub)
\n
Newline (Neue Zeile)
\n
Newline (Neue Zeile)
\r
Carriage return (Wagen-Rücklauf ohne Zeilenvorschub)
\t
Tabulator
\v
Vertikaler Tabulator
prototype

erweitert das String-Objekt und damit den primitiven Datentyp string durch neue Methoden und Eigenschaften.

Zeilenumbrüche in br konvertieren

Wer PHP programmiert hat, wird in der Liste der Methoden des String-Objekts vergeblich nach einer Methode wie nl2br suchen. nl2br nimmt einen String, der z.B. durch eine Benutzereingabe in einer Textarea entstanden ist, und ersetzt die unterschiedlichen Escape-Sequenzen für den Zeilenumbruch (\n bei Unix, \r\n bei Windows und \r bei Mac OS) der Betriebssysteme durch das <br />-Tag.

// Windows: Zeilenumbruch \r\n
let userText = "Montag,\r\nDienstag\r\nMittwoch und\r\nFreitag";

// Unix: Zeilenumbruch \n
let userText = "Montag,\nDienstag\nMittwoch und\nFreitag";
<script>
function newLineBreak() {
   let htmlString = this.replace(/(\r\n)|(\r)|(\n)/g, '<br />');
   return( htmlString);
}

String.prototype.nl2br = newLineBreak;
</script>

Die Funktion newLineBreak() nimmt den String, auf den sie angewendet wird und ersetzt die Escape-Sequenzen durch den String '<br />' – das ist schon alles, was in newEcho() passiert. Die letzte Anweisung fügt die Funktion dem Prototypen des String-Objekts als neue Methode hinzu String.prototype.nl2br = newLineBreak;.

Die neue Methode ist jetzt sowohl für das String-Objekt als auch für den primitiven Datentyp string verfügbar:

Montag,<br />Dienstag<br />Mittwoch und<br />Freitag

Objekt oder String?

Für Einsteiger ist das String-Objekt kein intuitiver Datentyp und oft fällt es schwer, den Typ einer Variable festzustellen – handelt es sich bei einem Wert um ein Objekt oder um einen String? Hier hilft der typeof-Operator.

let was1 = window.location;                // 
let was2 = window.location.href;           // 

let type1 = typeof(window.location);       // 
let type1 = typeof(window.location.href);  // 

Sowohl der Aufruf von window.location als auch der Aufruf von window.location.href erzielen dieselbe Ausgaben – aber window.location gibt ein String-Objekt zurück, während window.location.href einen String zurückgibt.

JAVASCRIPTSTINGS 41111111112111338