String – length, trim, split und mehr

Kompakte Übersicht der wichtigsten String-Methoden in JavaScript, darunter eine Handvoll, die man ständig braucht und kennen sollte.

Javascript string, Methoden, Eigenschaften, Constructor

Länge eines Strings str.length

Eigentlich haben primitive Datentypen wie "Hallo Welt" oder "Hanna Meier" keine Methoden und keine Eigenschaften. Aber Javascript konvertiert zwischen String-Primitives und String-Objekten, so dass einem einfachen String wie const = "Hallo Welt" die Eigenschaften des String-Objekts zur Verfügung stehen.

           1234567890
const l = "Hallo Welt".length; // 10

Index – Position von Zeichen im String

[index]

Zeichen an einer bestimmten Position

"Lavendel"[0]
"L"
.at(index)

Zeichen an einer bestimmten Position, moderner als [index], erlaubt negative Indizes

"Lavendel"[-1]
"l"
.indexOf("na")

Position eines Zeichens / einer Zeichenfolge im String

"Lavendel".indexOf("ende")
3

ermittelt die letzte Position einer Zeichenkette in einem String

"Lavendel".lastIndexOf("n")
4

character – das Zeichen – am angegebenen Index, an bestimmter Position

"Lavendel".charAt(1)
"a"

Gibt eine Zahl als Unicode-Wert des Zeichens am angegebenen Index.

"Dicker 𓆏".charCodeAt(7);
55308

Gibt eine Ganzzahl als Unicode-Wert des Zeichens am angegebenen Index zurück

"Dicker 𓆏".codePointAt(7);
78223

Strings sortieren

.sort() ist keine String-Methode in JavaScript, sondern von Arrays. Ein String in JavaScript ist immutuable (unveränderlich), es gibt also kein string.sort(). localeCompare hingegen ist tatsächlich eine String-Methode, die beim Vergleichen von Strings hilft.

vergleicht die Sortierung zweier Strings und bezieht die Sprache des Browsers dabei ein.

"Ärger".localeCompare ("Argwohn")
"-1 (Ärger vor Argwohn)

Suchen und Ersetzen in Strings

Liegt ein Suchmuster (pattern) im einem String

"Banane".match(/na/g)
["na","na"]

Alle Treffer eine Suche nach einem Suchmuster

[... "Banane".matchAll(/na/g)]
Iterator mit Matches

Suche nach einem Suchmuster (Pattern) im String

"Banane".search(/na/)
2

Ersetzt einen Teil des Strings durch eine neue Zeichenfolge

"Banane".replace("na","xx")
"Baxxne"

Ersetzt alle Vorkommen eines Substrings durch eine neue Zeichenfolge

"Banane".replaceAll("na","xx")
"Baxxxxe"
.includes("na")

Enthält der String eine bestimmte Zeichenfolge

"Banane".includes("na")
true
.startsWith("Ba")

Beginnt der String mit einer bestimmten Zeichenfolge

"Banane".startsWith("Ba")
true
.endsWith("ne")

Endet der String mit einer bestimmten Zeichenfolge

"Banane".endsWith("ne")
true

Teile von Zeichenketten – Substrings manipulieren

Extrahiert dem String eine Zeichenfolge von Position x bis Position y

"Banane".slice(1,3)
"an"

Substring, Fragment der Zeichenkette von Position start bis Position end (exklusiv)

"Banane".substring(1,3)
"an"

Extrahiert ein Fragment aus einer Zeichenkette von Position start für length Zeichen

"Banane".substr(1,3)
"ana"

hängt eine Zeichenkette str an die Zeichenkette.

"Sonnen".concat("schein")
"Sonnenschein"

Weißraum, Leerzeichen am Anfang / Ende des Strings ausschneiden

" Hi ".trim()
"Hi"
.repeat(3)

Wiederholt einen Teil der Zeichenkette für eine bestimmt Anzahl von Malen

"ha".repeat(3)
"hahaha"

Aufspalten des Strings in einzelne Zeichen

"a,b,c".split(",")
["a","b","c"]
.padStart(5,"0")

String von der linken Seite aus mit Zeichen auffüllen

"7".padStart(5,"0")
"00007"
.padEnd(5,"0")

String von der rechten Seite aus mit Zeichen auffüllen

"7".padEnd(5,"0")
"70000"

Strings Groß-/Kleinschreibung – Normalisieren und Vergleichen in Suchfunktionen

.toLowerCase ()

konvertiert den String in Kleinbuchstaben

"WordPress".toLowerCase()
"wordpress"
.toUpperCase ()

konvertiert den String in Großbuchstaben

"WordPress".toUpperCase()
"WORDPRESS
.toLocaleLowerCase ()

konvertiert den String (unter Beachtung der Sonderzeichen der Sprache) in Kleinbuchstaben

"WordPress".toLocaleLowerCase ()
"wordpress
.toLocaleLowerCase ()

konvertiert den String (unter Beachtung der Sonderzeichen der Sprache) in Kleinbuchstaben

"WordPress".toLocaleUpperCase ()
"WORDPRESS

Alle String-Eigenschaften dieses Browsers

Object.getOwnPropertyNames() gibt ein Array aller Eigenschaften eines Objekts zurück.

const props = Object.getOwnPropertyNames(String.prototype);

String-Constructor

Strings können also nicht nur durch die Zuweisung eines String-Literals an einen Variablennamen definiert werden, sondern auch durch den String-Konstruktor.

const simpleString = 'Hallo Welt!';             // Literale Schreibweise
let objectString = new String('Hallo Welt!');   // String-Konstruktor
let objectString = new String('');              // String-Konstruktor

Allerdings ist die literale Schreibweise der Normalfall und der String-Konstruktor bleib eher besonderen Anwendungen vorbehalten. Der String-Konstruktor wird eingesetzt, wenn sicher gestellt werden soll, dass tatsächlich ein String erstellt wird oder wenn das String-Objekt durch eigene Methoden erweitert werden soll.

String ist der Prototyp für Zeichenketten und wickelt sich um den primitiven Datentyp string. Wrapper sind Objekte, die denselben Namen haben wie der Datentyp, den sie darstellen. Für jeden primitiven Datentyp – string, number und boolean – gibt es ein String-Objekt, ein Number-Objekt bzw. ein Boolean-Objekt. Wrapper stellen die Eigenschaften und Methoden, die für das Objekt definiert sind, dem primitiven Datentyp zur Verfügung und so können primitive Strings als Objekte behandelt werden.

Alle Eigenschaften des String-Objekts (z.B. String.length) können mit dem literalen Wert benutzt werden, weil JavaScript automatisch den literalen String in ein temporäres String-Objekt umwandelt, die Methode aufruft und dann das temporäre String-Objekt löscht.

Suchen auf mediaevent.de