Stil mit {stil}

Okt 2007

Javascript Strings • Verarbeitung von Zeichenketten

Auch wenn wir den Computer noch immer »Rechner« nennen – tatsächlich ist die Verarbeitung von Strings der Dreh- und Angelpunkt der Anwendungsentwicklung. Formulareingaben werden als Strings gelesen, Pfadnamen und Nachrichten an den Benutzer sind Strings.

Strings sind einfach Zeichenfolgen, die durch einfache oder doppelte Hochkommas vom übrigen Code des Programms getrennt werden.

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

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

var simpleString = "äöüß";

Muster für 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"      // Unterschiedliches sauberes Quoting
^                          ^
+--------------------------+
'@!zzz@@ zack!!! '
^                ^
+----------------+
'p { font-family: "Courier New" }'
^                 ^           ^  ^
+--------------------------------+
"Und noch'n 'String'"
^           ^      ^^
+-------------------+
"Wo ist die „Zeichenkette“?"      // Anführungszeichen sind keine Hochkommas
^                          ^     
+--------------------------+

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

'Dies ist kein "valider' String"  // Falsch gequotet

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

"5"                               // Zahlen in Hochkommas sind auch nur Strings
5                                 // Ohne Hochkamms 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-Operationen

Das Zusammenfügen 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.

var vorname  = "Donald";
var nachname = "Duck"; 
var 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:

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

Und es geht noch kürzer:

var name = "Donald";
name += " Duck";

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

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

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

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

var preis = 17;

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

Stings und Zahlen und der +-Operator

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

Strings löschen

Die einfachste Methode, einen String zu löschen, ist die Zuweisung eines leeren Strings.

var simpleString = "Hallo Welt"; 
…
simpleString = "";

Zeilenumbrüche in Zeichenketten

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

alert("T-Shirt „Emmi“ Stck 12,50 €" +
      "T-Shirt „Loll“ Stck 10,l2 €");

// Ausgabe: T-Shirt „Emmi“ Stck 12,50 €T-Shirt „Loll“ Stck 10,l2 €

Da hilft auch kein <br />-Tag – bei der Ausgabe in einem modalen Fenster (z.B. alert-Dialog) würde Javascript ein <br />-Tag nur als Teil des Strings interpretieren und wörtlich ausgegeben. Stattdessen muss das Skript einen Zeilenumbruch ausdrücklich durch eine „Escapesequenz“ eingefügen. Escapesequenzen sind Kodierungen von nicht-druckbaren Zeichen und bestehen aus einem Backslash gefolgt von einem Code.

Weil das noch nicht kompliziert genug ist, lauten die Escapesequenzen für den Zeilenumbruch auf den unterschiedlichen Plattformen auch noch unterschiedlich.

\r\n     Zeilenumbruch unter Windows
\n       Zeilenumbruch unter Unix
\r       Zeilenumbruch auf dem Mac (beim alten Mac OS Roman)

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

Eigenschaften des String-Objekts

length

gibt die Anzahl der Zeichen eines Strings zurück.

var simpleString = "Ich bin eine Zeichenkette";
var 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.

prototype

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

Internet Explorer 6 unterstützt die prototype-Eigenschaft für vorgefertigte Objekte nicht.

Zeilenumbrüche in <br />-Tags 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
var userText = "Montag,\r\nDienstag\r\nMittwoch und\r\nFreitag";

// Unix: Zeilenumbruch \n
var userText = "Montag,\nDienstag\nMittwoch und\nFreitag";

<script type="text/javascript">
function newLineBreak() 
{
   var 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.

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

var type1 = typeof(window.location);       // 
var 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.