JavaScript - Zeichenketten
Letzten Monat wurden die Zahlen manipuliert, aber natürlich kommen auch die Zeichenketten nicht ungeschoren davon.
In der letzten Folge des Kurses haben wir das "Math"-Objekt kennengelernt, das mit seinen verschiedenen Methoden zur Lösung mathematischer Probleme dient. Es liegt nahe, das auch einer der wichtigsten Bereiche einer Sprache - die Zeichenkettenverarbeitung -, mit Funktionen bedient wird.
Wie schon zu Kursbeginn erwähnt, ist JS bei der Behandlung von Variablen sehr flexibel, z.B. wird die Stringlänge vorher nicht definiert. Für die Verknüpfung von Zeichenketten wird ähnlich wie in Basic kein spezielles Schlüsselwort benötigt, vielmehr werden sie mit dem "+"-Zeichen verknüpft. Das JS an der einen oder anderen Stelle Zugeständnisse an "C"-gewöhnte Programmierer macht, wird später noch behandelt.
Mussten wir bei den mathematischen Funktionen den Objektnamen "Math" immer voranstellen, so ist dies bei "string" in den meisten Fällen weder erforderlich noch zulässig. Wie gehabt folgt der Befehlsaufbau damit dem Muster [Zeichenkettenname].[Methode/Eigenschaft]. Was es alles so an Methoden und Eigenschaften gibt, wird in diesem Kursteil erläutert.
Sie werden dabei auch Hinweise auf die JavaScript-Version finden. Mit der Version 1.2 gab es nicht nur Erweiterungen im Bereich dynamisches HTML und Stylesheets, sondern auch einige neue Methoden zur Zeichenkettenverarbeitung.
Methoden
anchor()
Anchor erzeugt einen sogenannten Verweisanker. Diese "Marke" in der HTML-Datei kann mit Verweisen angesprungen werden. Diese, schon seit JS-Urzeiten vorhandene, Methode ist eigentlich überflüssig, da sie identisch ist mit dem entsprechendem HTML-Befehl:
Titel="st-computer";
document.write(Titel.anchor("nr1"));
und
document.write('<a name="nr1">st-computer</a>');
oder
<a name="nr1">st-computer</a>
bewirken alle das gleiche. Vorteile haben die zwei JavaScript-Varianten vor allem dann, wenn über eine Schleife mehrere Verweisanker ausgegeben werden sollen. Denkbar wäre es auch, die Namen der Anker an den Anfang der HTML-Datei zu stellen, während der document.write-Befehl weiter unten zu finden ist.
link()
link erzeugt - nomen est omen - einen Verweis (Link). Zwar ist auch diese Methode nicht unbedingt die nützlichste, aber es ist denkbar, mit einem Zeichenkettenfeld (String-Array) und einer Schleife automatisch eine Verweisliste zu erzeugen.
Beispiel:
Titel="stc-Archiv";
document.write(Titel.link("http://www.stcarchiv.de/"));
Natürlich könnte das ganze ohne link() auch wie folgt aussehen:
Titel="stc-Archiv";
document.write('<a href="http://www.stcarchiv.de">'+Titel+'</a>');
Bei der letzten Variante lässt sich zudem das <a>-Tag noch weiter modifizieren.
big()
Kennen Sie noch die nette 80er Jahre Komödie mit Tom Hanks? big() macht kleines größer und ist identisch mit dem HTML-Tag <big>:
Text="Tom Hanks"; document.write(Text.big());
schreibt "Tom Hanks" in größerer Schrift auf den Bildschirm. Die Schreibweise wird nicht geändert, die Schriftgröße hängt von den Browsereinstellungen ab.
bold()
Auch diese Methode imitiert erfolgreich ein HTML-Tag, in diesem Fall <b>.
Beispiel:
Text="Fett schwimmt oben"; document.write(Text.bold());
charAt()
Sinnvoller als die bisherigen Methoden ist charAt(): Zurückgeliefert wird ein Zeichen, das sich ab einer bestimmten Position befindet. Wenn mehr als ein Zeichen benötigt wird, muß entweder mit einer Schleife oder mit substr() gearbeitet werden. Stefan Münz (SelfHTML) hat ein ganz brauchbares Beispiel für die Verwendung von charAt() gefunden:
Vollversion = navigator.appVersion.charAt(0);
alert(Vollversion);
Das Beispiel gibt die Nummer der Vollversion des Browsers aus. Dies wäre z.B. die 5 für den Internet Explorer 5.01. In der Vergangenheit taugte die Vollversionsnummer, um die Leistung des Browsers einzuschätzen. Es kann aber durchaus sein, das ein alternativer Browser bei gleicher Leistungsfähigkeit eine kleinere Versionsnummer als z.B. der Netscape Navigator trägt.
charCodeAt()
...entspricht charAt(), liefert aber den Latin-1-Zeichensatzwert des Zeichens zurück.
Beispiel:
Text="Abba" document.write(Text.charCodeAt(1));
liefert den Zeichensatzwert des kleinen "b" zurück: 98.
concat()
Hier kommt die Methode, die etwas an die C-Funktion strcat() (string concatenate) erinnert. concat() hängt eine Zeichenkette an eine andere an und wurde mit der JavaScript-Version 1.2 eingeführt. Das heißt aber nicht, das eine Zeichenkettenverknüpfung nicht schon vorher möglich gewesen wäre:
Vorname="Jack "; Nachname="Tramiel"; Name=Vorname+Nachname;
ist identisch mit
Vorname="Jack "; Nachname="Tramiel"; Name=Vorname.concat(Nachname);
Der Nutzen dieses Befehls ist damit praktisch nicht vorhanden.
fixed()
Zu der bei jung und alt beliebten Gruppe der Formatiermethoden gehört fixed(). Diese Methode bewirkt genau das gleiche wie das HTML-Tag <tt> d.h. ein Text wird mit nicht-proportionaler Schrift ausgegeben (z.B. für Listings).
Beispiel:
Text = '10 REM *** Kommentar ***'; document.write(Text.fixed());
fontcolor(), fontsize()
Ein HTML-Tag, das vom W3C [1] gar nicht gerne gesehen wird, hat auch in JavaScript ein Gegenstück. Das <font>-Tag wurde einst von Netscape eingeführt, um den Wunsch nach mehr Farbe und Schriftgrößen Genüge zu tragen. Seit der ersten JS-Version gibt es fontcolor() und fontsize().
Text = 'Ein Text sieht rot.';
document.write(Text.fontcolor("#ff0000"));
Die Farbe kann entweder in hexadezimaler Schreibweise oder als Farbname angegeben werden. Bei der ersten Schreibweise kann mit einer Schleife auf einfache Weise ein Farbverlauf für einen Text erzeugt werden.
Text = 'Ein Text wird riesig.'; document.write(Text.fontsize(7));
fontsize() erwartet einen Wert von eins bis sieben.
fromCharCode()
Diese nette Methode erzeugt aus Zahlen Buchstaben anhand der Zeichensatztabelle. Die Anzahl der übergebenen Argumente kann variieren.
Beispiel:
Test = String.fromCharCode(56,98,75,120); document.write(Test);
erzeugt die etwas wirre Zeichenfolge '8bKx'. Dahinter steckt weder eine geheime Regierungsorganisation noch atos/st-computer-Redakteur Benjamin 'bkx' Kirchheim. Leider ist diese nützliche Methode erst ab JS 1.2 eingebaut.
indexOf()
Eine der wichtigsten Methoden im Bereich der Zeichenkettenverarbeitung ist indexOf(). Die Methode sucht in einer Zeichenkette nach einer anderen Zeichenkette und gibt bei Erfolg die Fundstelle zurück. Wurde die Zeichenkette nicht gefunden, wird der Wert -1 zurückgegeben.
Test="Atari";
document.write(Test.indexOf("r"));
ergibt 3.
Test="Je t'aime, lallte das Script.";
document.write(Test.indexOf("J"));
ergibt 0.
Optional ist die Angabe des zweiten Parameters, mit dem ab einer bestimmten Position gesucht werden kann.
lastIndexOf()
indexOf() sucht nach dem ersten Vorkommen eines Zeichens, lastIndexOf() nach dem letzten, also quasi "von rechts".
italics()
Diese Methode formatiert eine Zeichenkette kursiv und ist identisch mit dem HTML-Tag <i>.
match()
Mit match() können reguläre Ausdrücke auf eine Zeichenkette angewendet werden. Es wird nach einer Zeichenkette gesucht. Liegt ein positives Suchergebnis vor, wird ein Feld (Array) erzeugt und weitergesucht. Die Methode 'sammelt' die Ergebnisse. Dank der regulären Ausdrücke kann dieses Verhalten jedoch weitgehend geregelt werden.
Test = "Katzentatzen kratzen Fratzen."; Wieviel = Test.match(/k/gi);
Dieses Beispiel sucht in Test nach allen Vorkommen (g: global) des Buchstaben 'k' und ignoriert Groß-/Kleinschreibung (i: ignore case). Die Ergebnisse werden in einem Feld abgelegt.
Reguläre Ausdrücke sind ideal, um komplexe Suchen-/Ersetzen-Operationen in einem Durchgang zu erledigen. Die genauen Möglichkeiten werden in einem separaten Kursteil später erläutert.
search()
Die Methode search() ist vom Aufbau identisch mit match(), liefert aber die gefundenen Positionen zurück.
replace()
Auch replace() bedient sich der regulären Ausdrücke:
Test="Drei Chinesen mit dem Kontrabaß"; neu = Test.replace(/e/g,"i"); document.write(neu);
erzeugt "Drii Chinisin mit dim Kontrabaß". Ersetzt wird in der Zeichenkette Test der Buchstabe 'e' durch 'i'.
slice()
Schneidet aus einer Zeichenkette ein Teil heraus. Häufig wird diese Methode in Verbindung mit indexOf() verwendet.
Test="Drei Chinesen mit dem Kontrabaß"; neu = Test.slice(0,4); document.write(neu);
gibt "Drei" aus. Der erste Parameter bestimmt die Start-, der zweite die Endposition, die nicht mehr mit ausgeschnitten werden soll. Der zweite Parameter kann auch weggelassen werden, dann wird bis zum Ende der Zeichenkette ausgeschnitten.
substr()
Eine thematisch ähnliche Methode ist substr(). Der einzige Unterschied liegt im zweiten Parameter: erwartet slice() erwartet eine Positionsangabe, substr() jedoch die Anzahl der Zeichen, die extrahiert werden soll. Damit der Unterschied deutlich wird, muss das slice()-Beispiel etwas modifiziert werden:
Test="Drei Chinesen mit dem Kontrabaß"; neu = Test.substr(5,4); document.write(neu);
ergibt "Chin".
substring()
Ganz schön verwirrend: substring ist nicht etwa ein Synonym für substr(), sondern für slice().
small()
Aus groß mach klein: small() hat die gleiche Wirkung wie das HTML-Tag <small>.
Text="Klein, aber oho!"; document.write(Text.small());
split()
Die split()-Methode ist eine Kombination aus indexOf() und substr(). Eine Zeichenkette wird anhand eines Parameters aufgeteilt. Die Teilzeichenketten werden in einem Array gespeichert.
Test = "Äpfel
Erdnüsse
Mandarinen
Schokolade";
Weihnachten = Test.split("
");
document.write(Weihnachten[1]);
In diesem Fall dient "
" als Trennzeichen, es kann aber auch eine Zeichenfolge verwendet werden. Die Teilzeichenketten werden in dem Array Weihnachten gespeichert, dessen zweites Element (Erdnüsse) ausgegeben wird. JavaScript fängt bei der Null an zu zählen.
toLowerCase(), toUpperCase()
Diese Methoden wandeln eine Zeichenkette in Großschrift (toUpperCase) bzw. Kleinschrift (toLowerCase).
Test = "EIN wildEs TohuBawoHu!"; document.write(Test.toUpperCase());
gibt "EIN WILDES TOHUBAWOHU!" aus.
Ausblick
Nach den ersten vier Kursteilen sollte ein Grundwissen vorhanden sein, um bestimmte Probleme zu lösen. Daher wird es im nächsten Teil weniger theoretisch zugehen.
[1] World Wide Web Consortium, beschließt Standards für das WWW: http://www.w3.org
Mia Jaap