28.10.20 2911 Views 4

credit: ©Quardia Inc./ Adobe

JavaScript Tutorial #11

String-Bearbeitung in JavaScript

Strings gehören zu den Standardobjekten in JavaScript. Mit ihnen lassen sich Zeichenketten speichern und bearbeiten. Gute Kenntnisse in diesem Bereich sind für einen JavaScript-Entwickler essentiell.

Falconbyte unterstüzen

Betrieb und Pflege von Falconbyte brauchen viel Zeit und Geld. Um dir auch weiterhin hochwertigen Content anbieten zu können, kannst du uns sehr gerne mit einem kleinen "Trinkgeld" unterstützen.

Thema in Kurzform

  • Strings dienen zur Speicherung von Zeichenketten.
  • Jedes Zeichen hat eine Indexnummer (Start bei 0).
  • Auf Strings können Objekt-Eigenschaften und Methoden aufgerufen werden.

    Inhaltsverzeichnis

  1. Was sind Strings eigentlich?
  2. Mit Strings arbeiten
  3. Übungen

Was sind Strings eigentlich?

Einen String erzeugen wir, indem, wir die Zeichenkette innerhalb von zwei Anführungszeichen setzen:

var s = "Space";

Mit dem Verkettungsoperator + können wir außerdem mehrere Strings zusammenschließen:

s = s + " bat"; // Space bat

Jedes einzelne Zeichen des Strings hat eine eindeutige Index-Nummer. Von dieser Warte aus sind Strings vergleichbar mit Arrays:

Sind Strings Objekte?

JavaScript unterscheidet zwischen Strings als primitive Datentypen und als Objekte.

Wir haben Strings bislang immer in der Form von primitiven Datentypen kennengelernt. Eine Zeichenkette kann aber auch als Objekt erstellt werden. Hierzu verwenden wir den new-Operator:

var s_primitiv = "Space bat";
var s_objekt = new String (s_primitiv); // String Objekt

Wir sollten Strings jedoch nicht als Objekte erstellen, da dies die Performance schwächt und den Code unnötig verkompliziert. Nun wissen wir aber, dass Eigenschaften und Methoden Begriffe aus der Objektorientierung sind und nur auf Objekten einsetzbar sind.

Warum funktioniert Folgendes aber trotzdem?

var s_primitiv = "Space bat";
var l = s_primitiv.length;    // 9
var i = s_primitiv.charAt(2); // a

Die Eigenschaft length und die Methode charAt() werden auf dem String aufgerufen, der nicht als String erstellt wurde - ein Widerspruch?

Tatsächlich können wir Eigenschaften und Methoden zur String-Bearbeitung problemlos auf einem String einsetzen, der als primitiver Datentyp erstellt wurde: JavaScript wandelt den primitiven Wert dann nämlich automatisch in ein String-Objekt um, wenn wir eine Eigenschaft oder Methode auf dem String einsetzen. Dieses Prinzip nennt man Auto-Wrapping.

Mit Strings arbeiten

Sehen wir uns nun die Eigenschaft length und eine Reihe von nützlichen Methoden an, die wir auf String-Objekten aufrufen können:

Name Erklärung und Beispiel Rückgabewert
length Die Eigenschaft length gibt die Länge eines Strings zurück. Number (Ganzzahl)
indexOf() Ermittelt die erste Position eines bestimmten Zeichens. Number (Ganzzahl)
lastIndexOf() Ermittelt die letzte Position eines bestimmten Zeichens. Number (Ganzzahl)
startsWith() Prüft, ob ein String mit einem bestimmten Zeichen beginnt. true oder false (boolean)
endsWith() Prüft, ob ein String mit einem bestimmten Zeichen endet. true oder false (boolean)
includes() Prüft, ob ein String ein bestimmtes Zeichen oder eine bestimmte Zeichenkette enthält. true oder false (boolean)
charAt() Die Methode charAt() gibt das Zeichen an einer bestimmten Index-Position zurück. Einzelnes Zeichen (String)
toUpperCase() Wandelt alle Zeichen eines Strings in Großbuchstaben um. Ein neuer String, der den modifizierten alten String enthält.
toLowerCase() Wandelt alle Zeichen eines Strings in Kleinbuchstaben um. Ein neuer String, der den modifizierten alten String enthält.
trim() Entfernt Whitespace (Leerzeichen) vom Anfang und Ende. Ein neuer String, der den modifizierten alten String enthält.
substring() Extrahiert eine Zeichenfolge eines Strings zwischen zwei festgelegten Indices Ein neuer String, der den modifizierten alten String enthält.
substr() Extrahiert eine Zeichenfolge eines Strings beginnend mit einer festgelegten Startposition und einer festgelegten Länge Ein neuer String, der den modifizierten alten String enthält.
replace() Ersetzt ein bestimmtes Zeichen innerhalb eines Strings mit einem anderen. Ein neuer String, der den modifizierten alten String enthält.
split() ""Zerstückelt" eine Zeichenkette in ein Array von Einzelstrings Ein Array von Strings

Wenn wir die Eigenschaft und Methoden genauer ansehen, erkennen wir, dass sie unterschiedliche Rückgabewerte liefern. Hiernach lassen sich die einzelnen Methoden auch kategorisieren:

Rückgabewert: Ganzzahl

  • length
  • indexOf()
  • lastIndexOf()
var s = "Space bat";

console.log(s.length); // 9
console.log(s.indexOf("a")); // 2
console.log(s.lastIndexOf("a")); // 7

Wenn indexOf() und lastIndexOf() keinen Treffer landen (z.B. kommt das Zeichen "x" in "Space bat" nicht vor), wird der Wert -1 zurückgeliefert:

console.log(s.indexOf("x")); // -1
console.log(s.lastIndexOf("x")); // -1

Rückgabewert: true oder false

  • startsWith()
  • endsWith()
  • includes()
var s = "Space bat";

console.log(s.startsWith("S")); // true
console.log(s.endsWith("t")); // true
console.log(s.includes("ace")); // true

Erfolgt die Suche ergebnislos, wird entsprechend false zurückgeliefert:

console.log(s.startsWith("p")); // false
console.log(s.endsWith("S")); // false
console.log(s.includes("speck")); // false

Rückgabewert: einzelnes Zeichen

Die Methode charAt() gibt das Zeichen zurück, das sich auf der angegebenen Index-Position befindet:

var s = "Space bat";
console.log(s.charAt(3)); // c

Rückgabewert: Neuer String

Wenn wir Strings verändern möchten, hat dies keine Auswirkungen auf das Original. Stattdessen wird ein ganz neuer String zurückgeliefert, der die entsprechenden Modifikationen beinhaltet:

var s_original = " Space bat ";

var s1 = s_original.toUpperCase(); // " SPACE BAT "
var s2 = s_original.toLowerCase(); // " space bat "
var s3 = s_original.trim(); // "Space bat"

console.log(s_original); // " Space bat " (unverändert!)

Das Gleiche gilt für die Methoden substring(), substr() und replace():

var s_original = "Space bat";

var s1 = s_original.substring(6, 9); // "bat"
var s2 = s_original.substr(6, 3); // "bat"

console.log(s_original); // "Space bat" (unverändert!)

Die Methode substring() extrahiert aus einem bestehenden String einen Teil-String. Die Methode fordert zwei Parameter: Mit dem ersten legen wir die Startposition fest und mit dem zweiten die Enposition, bis zu der "ausgeschnitten" werden soll (exklusive!).

Die sehr verwandte Methode substr() funktioniert ähnlich. Der Unterschied ist, dass der zweite Parameter die Länge des Teil-Strings angibt. Wird dieser ausgelassen, wird die Range bis zum Ende des Strings ermittelt.

Die Methode replace() sucht einen bestimmten Teilstring (1. Parameter) und ersetzt ihn mit einem anderen (2. Parameter):

var s_original = "Space bat";
var s1 = s_original.replace("bat", "mouse"); // "Space mouse"
console.log(s_original); // "Space bat" (unverändert!)

Rückgabewert: Array

Die Methode split() wird verwendet, um einen String in Teile zu "stückeln". Diese Einzelteile werden sind dann einzelne Elemente eines zurückgelieferten Arrays.

var s_original = "space bat is serious";
var array = s_original.split(" "); // ["space", "bat", "is", "serious"] (4)

Diese Methode ist in vielen Situationen sehr praktisch. Sie fordert übrigens einen Parameter, den sog. Separator. Mit diesem Zeichen legen wir fest, an welchen Stellen der String aufgespalten werden soll (in unserem Beispiel bei jedem Leerzeichen).

Übungen

einfach

Ersetze im String "Göthe" das Zeichen ö mit oe und gib das Ergebnis auf der Konsole aus.

var str = "Göthe";
var strNeu = str.replace("ö", "oe");
console.log(strNeu); // Goethe
Lösung ein-/ausblenden

mittel

Erstellen Sie ein Planet-Objekt mithilfe der Literal-Schreibweise und weisen Sie es einer Referenzvariablen zu. Das Objekt soll folgende Eigenschaften und Werte haben: name: "Mars", bewohnt: false, durchmesserInKm: 6790. Das Objekt hat eine Methode namens infos(), die beim Aufruf die Eigenschaftswerte auf der Konsole ausgibt.

Erstellen Sie ein Planet-Objekt mithilfe der Literal-Schreibweise und weisen Sie es einer Referenzvariablen zu. Das Objekt soll folgende Eigenschaften und Werte haben: name: "Mars", bewohnt: false, durchmesserInKm: 6790. Das Objekt hat eine Methode namens infos(), die beim Aufruf die Eigenschaftswerte auf der Konsole ausgibt.

Rufen Sie anschließend die Methodes infos() auf dem Objekt auf.

Lösung ein-/ausblenden

schwer

Was wird mit folgendem Code in der Konsole angezeigt?

var str = "This is Sparta!";
str.substring(8, str.length-1);
str.split(" ");
console.log(str[0]);

A. T
B. Sparta!
C. This is Sparta!
D. nichts, da Fehler im Code.

Lösung ein-/ausblenden

Java lernen

text text

PHP Lernen

zur PHP

JavaScript lernen

move nove move

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2023 Stefan E. Heller

Impressum | Datenschutz | Changelog

Falconbyte Youtube Falconbyte GitHub facebook programmieren lernen twitter programmieren lernen discord programmieren lernen