7. Unterrichtsblock
Kursinhalte
JavaScript Strings
JavaScript-Strings dienen zum Speichern und Bearbeiten von Text. Ein JavaScript-String besteht aus null oder mehr Zeichen, die in Anführungszeichen geschrieben werden.
// SYNTAX
let text = "Servus!";
// Es sind beide Arten von Anführungszeichen erlaubt
let autoName1 = "BMW 3er"; // Doppelte Anführungszeichen
let autoName2 = 'BMW 3er'; // Einfache Anführungszeichen
// Verwendung von Anführungszeichen innerhalb von Strings
let antwort1 = "Alles in Ordnung";
let antwort2 = "Er heißt 'Thomas'";
let antwort3 = 'Er heißt "Thomas"';
Die Längen von Strings messen
Um die Länge einer Zeichenfolge zu ermitteln, verwendet man die integrierte length
-Eigenschaft.
// Beispiel
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;
Aufgabe
Lasse Dir die o.g. Länge des Textes in einem <p>
-Tag ausgeben.
Escape-Zeichen
/* Da Zeichenfolgen in Anführungszeichen geschrieben werden müssen,
wird JavaScript diese Zeichenfolge falsch verstehen:
*/
let text = "Im Scherz gemeinte Verwendungszwecke bei Überweisungen wie z.B. "Waffenfähiges Plutonium"
können für den Verfasser unangenehme Konsequenzen haben.";
Der String wird zu „Im Scherz gemeinte Verwendungszwecke bei Überweisungen wie z.B.“ geteilt. Die Lösung zur Vermeidung dieses Problems ist die Verwendung des Backslash-Escape-Zeichens. Das Escape-Zeichen Backslash (\) wandelt Sonderzeichen in Zeichenketten um:
Code | Ergebnis | Beschreibung |
---|---|---|
\‘ | ‚ | Einfaches Anführungszeichen |
\“ | „ | Doppeltes Anführungszeichen |
\\ | \ | Backslash |
Beispiel:
// Durch die Verwendung eines Backslash wird die Anwendung ausführbar
let text = "Im Scherz gemeinte Verwendungszwecke bei Überweisungen wie z.B. \"Waffenfähiges Plutonium\"
können für den Verfasser unangenehme Konsequenzen haben.";
// Oder
let text= 'Komms\'t heut noch mit?.';
// Oder
let text = "Dieses Zeichen \\ ist ein Backslash.";
Strings in Objekten & String Objekte
Normalerweise sind JavaScript-Strings primitive Werte, die aus Literalen erstellt werden:
// Normaler String
let x = "John";
// String im Objekt
const y = {
vorName: "Thoams",
nachName: "Müller"
}
// !String als Objekt!
let y = new String("Thomas");
HINWEIS: Man erstellt keine Strings-Objekte. Das Schlüsselwort new verkompliziert den Code und verlangsamt die Ausführungsgeschwindigkeit. String-Objekte können zu unerwarteten Ergebnissen führen.
String Methoden
Mit den verfügbaren Methoden für Strings werden diese verarbeitet.
Methode | Erläuterung |
---|---|
length | Gibt die Länge des Strings zurück. |
replace() | Ersetzt einen angegebenen Wert durch einen anderen in der Zeichenfolge (nur das erste Vorkommen). |
replaceAll() | Ersetzt alle Vorkommen eines angegebenen Werts durch einen anderen in der Zeichenfolge. |
concat() | Verbindet zwei oder mehr Zeichenfolgen und gibt eine neue Zeichenfolge zurück. |
trim() | Entfernt Leerzeichen von beiden Seiten des Strings. |
trimStart() | Entfernt Leerzeichen vom Anfang des Strings. |
trimEnd() | Entfernt Leerzeichen vom Ende des Strings. |
slice(start, end) | Extrahiert einen Teil des Strings und gibt ihn als neuen String zurück (das Ende ist nicht eingeschlossen). |
substring(start, end) | Extrahiert Zeichen zwischen zwei Indizes und gibt sie als neuen String zurück. |
substr(start, length) | Extrahiert Zeichen ab einem angegebenen Startpunkt über eine angegebene Länge. |
charAt(position) | Gibt das Zeichen an einem bestimmten Index in der Zeichenfolge zurück. |
charCodeAt(position) | Gibt den Unicode-Wert des Zeichens an einem angegebenen Index zurück. |
split(separator) | Teilt einen String in ein Array von Strings, indem der String an einem bestimmten Separator geteilt wird. |
toUpperCase() | Wandelt den gesamten String in Großbuchstaben um. |
toLowerCase() | Wandelt den gesamten String in Kleinbuchstaben um. |
indexOf(searchValue) | Gibt den Index der ersten Übereinstimmung des Suchwerts zurück; -1, wenn nicht gefunden. |
lastIndexOf(searchValue) | Gibt den Index der letzten Übereinstimmung des Suchwerts zurück; -1, wenn nicht gefunden. |
Extrahieren von String-Teilen
Es gibt 3 Methoden zum Extrahieren eines Teils einer Zeichenfolge:
slice(start, end)
substring(start, end)
substr(start, length)
JavaScript String slice()
slice()
extrahiert einen Teil eines Strings und gibt den extrahierten Teil in einem neuen String zurück. Die Methode benötigt 2 Parameter: Startposition und Endposition (Ende nicht eingeschlossen).
// Beispiel
let text = "Apfel, Banane, Kiwi";
let teil = text.slice(7, 13);
let text = "Apfel, Banane, Kiwi";
let teil = text.slice(7);
// Wenn ein Parameter negativ ist, zählt JavaScript von hinten:
let text = "Apfel, Banane, Kiwi";
let teil = text.slice(-12);
// Dieses Beispiel schneidet einen String von den Positionen -12 bis -6 aus:
let text = "Apfel, Banane, Kiwi";
let teil = text.slice(-12, -6);
WICHTIG: JavaScritp zählt immer von 0 weg. Der erste Buchstabe wird also mit 0 angezählt. Der zweite Buchstabe erhält die Index-Zahl 1 usw. Wenn die Parameter negativ sind, zählt JavaScript von hinten.
JavaScript String substring() & substr()
substring()
istslice()
ähnlich. Der Unterschied besteht darin, dass Start- und Endwerte kleiner als 0 insubstring()
als 0 behandelt werden. Wenn man den zweiten Parameter weglässt, schneidetsubstring()
den Rest des Strings heraus.substr()
ist ebenfallsslice()
ähnlich. Der Unterschied besteht darin, dass der zweite Parameter die Länge des auszuschneidenden Teils angibt.
// Beispiel substring()
let obst = "Apfel, Banane, Kiwi";
let teil = obst.substring(7, 13);
// Beispiel substr()
let obst = "Apfel, Banane, Kiwi";
let teil = obst.substr(7, 6);
Aufgabe
Probiere o.g. Sting-Methoden aus und lasse Dir die Ergebnisse ausgeben. Versuche auch bei beiden Methoden den letzten Parameter wegzulassen.
String Inhalte austauschen
Die Methode replace()
ersetzt einen angegebenen Wert durch einen anderen Wert in einer Zeichenfolge:
// Ersetzen eines Textes
let text = "Bitte besuche Google!";
let neuerText = text.replace("Google", "Webentwicklerkurs");
// Nur das erste Vorkommen eines Textes wird veröffentlicht
let text = "Bitte besuche Google und Google!";
let neuerText = text.replace("Google", "Webentwicklerkurs");
// Mit der /g-Flag wird das gesamte Vorkommen der vorgesehenen Wörter im String ersetzt
let text = "Bitte besuche Google und Google!";
let neuerText = text.replace(/Google/g, "Webentwicklerkurs");
Die Methode
replace()
ändert nicht die Zeichenfolge, für die sie aufgerufen wird.
Die Methodereplace()
gibt einen neuen String zurück.
Die Methodereplace()
ersetzt nur die erste Übereinstimmung
Wenn alle Übereinstimmungen ersetzt werden sollen, wird ein regulärer Ausdruck mit gesetztem /g-Flag verwendet. Siehe Beispiele oben.
Aufgaben
Bringe o.g. Scripte zum laufen. Der Austausch soll erfolgen, wenn die Maus aus einer roten Fläche herausfährt. Der Text innerhalb der roten Fläche ist weiß und soll geändert werden.
JavaScript achtet auch auf Groß- und Kleinschreibung. Versuche daher auch das Wort GOOGLE zur ersetzen.
Aufgabe 1: Anführungszeichen innerhalb von Strings verwenden
Erstelle zwei Variablen, satz1
und satz2
, und weise ihnen folgende Sätze unter Verwendung von Anführungszeichen zu:
satz1
: Sie sagte: „Das ist fantastisch!“satz2
: Er fragte: ‚Hast du das schon gesehen?‘
Gib die beiden Variablen auf der Konsole aus.
Aufgabe 2: Stringlänge messen
Erstelle einen String mit dem Inhalt: „JavaScript ist großartig!“ und speichere ihn in einer Variable namens meinText
. Finde die Länge des Strings mithilfe der length
-Eigenschaft heraus und gib sie in einem HTML-Element <p>
aus.
Aufgabe 3: Escape-Zeichen verwenden
Weise einer Variable den folgenden String zu, indem du Escape-Zeichen benutzt:
Gib die Variable stringMitEscape
auf der Konsole aus.
Aufgabe 4: String-Methoden ausprobieren
Erstelle einen String mit dem Inhalt: „Apfel, Banane, Kiwi“. Verwende die Methoden slice()
, substring()
und substr()
wie in den Beispielen gezeigt, um den Teilstring „Banane“ zu extrahieren. Lass die Ergebnisse über console.log()
ausgeben. Probiere auch aus, die jeweiligen Endparameter wegzulassen und beobachte, wie sich die Ergebnisse ändern.
Aufgabe 5: String-Inhalte austauschen
Erstelle einen String mit dem Inhalt: „Bitte besuche Google und Google!“. Verwende die Methode replace()
sowohl ohne als auch mit dem /g
-Flag, um alle Vorkommen von „Google“ durch „Webentwicklerkurs“ zu ersetzen. Gib die Ergebnisse auf der Konsole aus.
String Methode replaceAll()
2021 führte JavaScript die String-Methode replaceAll()
ein:
// Beispiel
let text = "Rote Ballons sind schön. Ich möchte rote Ballons zum Geburtstag. Rote Dinge passen gut in meine Wohnung."
text = text.replaceAll("Rote","Blaue");
text = text.replaceAll("rote","blaue");
document.getElementById("demo").innerHTML = text;
// Flag-/g wenn der Parameter ein regulärer Ausdruck ist
text = text.replaceAll(/Rote/g,"Blaue");
text = text.replaceAll(/rote/g,"blaue");
Mit der Methode replaceAll()
kann man anstelle einer zu ersetzenden Zeichenfolge einen regulären Ausdruck angeben.
Wenn der Parameter ein regulärer Ausdruck ist, muss das globale Flag (g) gesetzt werden, sonst wird ein TypeError geworfen.
replaceAll()
funktioniert nicht im Internet Explorer
JavaScript String concat()
concat()
verbindet zwei oder mehr Strings:
// Beispiel:
let text1 = "Hallo";
let text2 = "Welt";
let text3 = text1.concat(" ", text2);
// Anstelle des Plus-Operators kann die Methode concat() verwendet werden. Diese beiden Zeilen tun dasselbe:
text = "Hallo" + " " + "Welt!";
text = "Hallo".concat(" ", "Welt!");
Alle String-Methoden geben einen neuen String zurück. Sie ändern die ursprüngliche Zeichenfolge nicht. Formell gesagt: Strings sind unveränderlich: Strings können nicht geändert, nur ersetzt werden.
JavaScript String trim(), trimStart() und trimEnd()
Die Methode trim()
entfernt Leerzeichen von beiden Seiten eines Strings:
// Beispiel 1
let text1 = " Hallo Welt! ";
let text2 = text1.trim();
/* Beispiel 2 - Die Methode trimStart() funktioniert wie trim(),
entfernt aber Leerzeichen nur am Anfang eines Strings.
*/
let text1 = " Hallo Welt! ";
let text2 = text1.trimStart();
/* Beispiel 3 - Die Methode trimEnd() funktioniert wie trim(),
entfernt aber Leerzeichen nur am Ende eines Strings.
*/
let text1 = " Hallo Welt! ";
let text2 = text1.trimEnd();
Extrahieren von Zeichenketten
Es gibt drei Methoden zum Extrahieren von Zeichenketten:
charAt(position)
charCodeAt(position)
- Property access [ ]
// charAt() - Die Methode charAt() gibt das Zeichen an einem bestimmten Index (Position) in einem String zurück:
var text = "HALLO WELT";
document.getElementById("demo").innerHTML = text.charAt(0); // Ausgabe ist "H"
/* charCodeAt() - Die Methode charCodeAt() gibt den Unicode des Zeichens
an einem angegebenen Index in einer Zeichenfolge zurück.
Die Methode gibt einen UTF-16-Code zurück (eine ganze Zahl zwischen 0 und 65535).
*/
let text = "HALLO WELT";
let char = text.charCodeAt(0); // Ausgabe ist "72"
// Die Methode erlaubt den direkten Zugriff [ ] auf einzelne Buchstaben und Ziffern eines Strings:
var str = "HALLO WELT";
document.getElementById("demo").innerHTML = str[2]; // Ausgabe ist "L"
Konvertieren eines Strings in ein Array
Wenn man mit einem String als Array arbeiten möchten, kann man diesen ihn in ein Array umwandeln.
JavaScript String split()
Ein String kann mit der Methode split()
in ein Array umgewandelt werden:
// Beispiel:
let text = "a,b,c,d,e,f";
const myArray = text.split(",");
document.getElementById("demo").innerHTML = myArray[0];
Wenn das Trennzeichen weggelassen wird, enthält das zurückgegebene Array die gesamte Zeichenfolge in Index [0]. Wenn das Trennzeichen „“ ist, ist das zurückgegebene Array ein Array aus einzelnen Zeichen.
Aufgabe
- Speichere die einzelnen Sätze in folgenden Text auf Knopfdruck in einem Array. Die Trennzeichen sind Punkte (.):
- Lorem ipsum dolor sit amet. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- Auf Knopfdruck bei einem zweiten Button soll der letzte Satz ausgegeben werden.
Übungsaufgaben
Aufgaben
Aufgabe 1: Verwendung von replaceAll()
Erstelle einen String mit dem Inhalt: „Ich liebe rote Blumen und rote Autos.“ Verwende die Methode replaceAll()
, um alle Vorkommen von „rote“ durch „blaue“ zu ersetzen. Gib das Ergebnis im HTML-Element <p>
mit der ID result
aus.
Aufgabe 2: Strings verbinden
Erstelle zwei Variablen, text1
mit dem Wert „Guten“ und text2
mit dem Wert „Morgen“. Verwende die Methode concat()
, um die beiden Strings mit einem Leerzeichen dazwischen zu verbinden. Gib das verbundene Ergebnis in einem HTML-Element <p>
mit der ID greeting
aus.
Aufgabe 3: Leerzeichen in Strings entfernen
Erstelle einen String mit dem Wert “ JavaScript lernen „. Verwende die Methoden trim()
, trimStart()
und trimEnd()
, um die Leerzeichen zu entfernen. Gib jede Methode auf der Konsole aus, um die Unterschiede zu sehen.
Aufgabe 4: Zeichen extrahieren
Verwende die Methoden charAt()
und charCodeAt()
, um das Zeichen und den Unicode-Wert an der Position 3 im String „Hallo Welt“ zu extrahieren. Gib die Ergebnisse auf der Konsole aus.
Aufgabe 5: String in ein Array umwandeln
Erstelle einen String mit dem Inhalt: „Hallo,JavaScript,Welt“. Verwende die Methode split()
, um den String in ein Array zu verwandeln, wobei das Trennzeichen ein Komma ist. Gib das erste Element des Arrays im HTML-Element <p>
mit der ID arrayElement
aus.