Zum Inhalt springen

JavaScript-Strings

In JavaScript werden Strings zum Speichern und Bearbeiten von Text verwendet. Für ein einzelnes Zeichen gibt es keinen eigenen Typ. Das interne Format von Strings ist immer UTF-16.

Ein String stellt null oder mehr Zeichen dar, die in Anführungszeichen geschrieben werden.

Beliebte String-Funktionen

FunctionDescription
charAt(index)Gibt das Zeichen am angegebenen Index zurück.
charCodeAt(index)Gibt den Unicode des Zeichens am angegebenen Index zurück.
concat(...strings)Verknüpft die String-Argumente mit dem aufrufenden String und gibt einen neuen String zurück.
includes(searchString, position)Bestimmt, ob der aufrufende String searchString enthält.
indexOf(searchValue, fromIndex)Gibt den Index des ersten Vorkommens von searchValue im String zurück, beginnend mit der Suche bei fromIndex. Gibt -1 zurück, wenn der Wert nicht gefunden wird.
lastIndexOf(searchValue, fromIndex)Gibt den Index des letzten Vorkommens von searchValue innerhalb des aufrufenden Strings zurück und sucht rückwärts ab fromIndex. Gibt -1 zurück, wenn der Wert nicht gefunden wird.
match(regexp)Ruft die Treffer ab, wenn ein String mit einem regulären Ausdruck abgeglichen wird.
matchAll(regexp)Gibt einen Iterator über alle Ergebnisse zurück, die mit einem regulären Ausdruck auf einen String passen, einschließlich Capturing Groups.
repeat(count)Gibt einen neuen String zurück, der aus dem aufrufenden String besteht, der count-mal wiederholt wurde.
replace(searchFor, replaceWith)Ersetzt die erste Übereinstimmung einer Teilzeichenkette oder eines Musters durch einen Ersatzstring.
replaceAll(searchFor, replaceWith)Ersetzt alle Übereinstimmungen einer Teilzeichenkette oder eines Musters durch einen Ersatzstring.
search(regexp)Durchsucht den String nach einer Übereinstimmung mit einem regulären Ausdruck und gibt den Index der Übereinstimmung zurück.
slice(startIndex, endIndex)Extrahiert einen Abschnitt eines Strings und gibt ihn als neuen String zurück, ohne den ursprünglichen String zu verändern.
split(separator, limit)Teilt einen String in eine geordnete Liste von Teilzeichenketten auf, legt diese Teilzeichenketten in ein Array und gibt das Array zurück. Die Aufteilung erfolgt durch die Suche nach einem Muster; das Muster wird als erster Parameter beim Aufruf der Methode übergeben.
startsWith(searchString, position)Bestimmt, ob der aufrufende String mit den Zeichen von searchString beginnt.
substring(startIndex, endIndex)Gibt den Teil des Strings zwischen dem Start- und dem Endindex oder bis zum Ende des Strings zurück.
toLowerCase()Gibt den Wert des aufrufenden Strings in Kleinbuchstaben umgewandelt zurück.
toUpperCase()Gibt den Wert des aufrufenden Strings in Großbuchstaben umgewandelt zurück.
trim()Entfernt Leerzeichen an beiden Enden des Strings.
trimStart() or trimLeft()Entfernt Leerzeichen vom Anfang des Strings.
trimEnd() or trimRight()Entfernt Leerzeichen vom Ende des Strings.
valueOf()Gibt den primitiven Wert eines String-Objekts zurück.

Über Anführungszeichen

Wir können einfache Anführungszeichen, doppelte Anführungszeichen und Backticks unterscheiden:

strings in javascript

makefile
let single = 'single-quoted';
let double = "double-quoted"; 
let backticks = `backticks`;

Doppelte und einfache Anführungszeichen sind gleich. Backticks sind jedoch anders. Sie können sie verwenden, um einen beliebigen Ausdruck in den String einzubetten, indem Sie ihn wie folgt in ${…} einschließen:

Strings in javascript

Output appears here after Run.

Einer der wichtigsten Vorteile von Backticks ist, dass sie es ermöglichen, dass sich ein String über mehrere Zeilen erstreckt, wie hier:

Strings in javascript

Output appears here after Run.

Beachten Sie jedoch, dass einfache und doppelte Anführungszeichen in diesem Fall nicht funktionieren. Wenn Sie versuchen, damit mehrere Zeilen zu schreiben, tritt ein Fehler auf:

strings in javascript

makefile
let guestList = "Guests: // Error: Unexpected token ILLEGAL 
* John ";

Einfache und doppelte Anführungszeichen gab es schon vor den Backticks. Daher sind Backticks funktionaler.

Sie können auch vor dem ersten Backtick eine „Template-Funktion“ angeben. Die Syntax sieht dann so aus:

strings in javascript

makefile
func `string`

In der Regel wird die Funktion func automatisch aufgerufen. Sie erhält sowohl den String als auch eingebettete Ausdrücke und verarbeitet sie. Mit dieser Funktion können Sie schnell eigenes Templating implementieren. In der Praxis verwenden Entwickler sie jedoch selten.

Sonderzeichen

Sie können mehrzeilige Strings mit doppelten und einfachen Anführungszeichen mithilfe von \n erstellen, etwa so:

Strings in javascript

Output appears here after Run.

Es gibt noch weitere, weniger gebräuchliche Sonderzeichen.

Einige davon finden Sie in der folgenden Liste:

  • \', \" diese Sonderzeichen werden für Anführungszeichen verwendet
  • \r - Wagenrücklauf. Dieses Zeichen wird heute allein verwendet. Eine Kombination aus zwei Zeichen \r\n wird zur Darstellung eines Zeilenumbruchs in Windows-Textdateien verwendet.
  • \\ - Backslash
  • \t - Tabulator
  • \xXX - Unicode-Zeichen mit einem bestimmten hexadezimalen Unicode XX
  • \uXXXX - dies ist ein Unicode-Symbol mit dem Hex-Code XXXX in UTF-16-Kodierung. Es muss genau 4 Ziffern enthalten.

Hier sind Beispiele mit Unicodes:

Unicode strings in javascript

Output appears here after Run.

Beachten Sie, dass alle Sonderzeichen mit einem Backslash beginnen. Er ist auch als „Escape-Zeichen“ bekannt.

Sie können ihn auch verwenden, wenn Sie ein Anführungszeichen in den String einfügen möchten.

Hier ist ein Beispiel:

Strings in javascript

Output appears here after Run.

Beachten Sie außerdem, dass der Backslash hauptsächlich dazu dient, die Lesbarkeit des Strings für JavaScript zu korrigieren, woraufhin er verschwindet. Im Speicher des Strings finden Sie kein \ . Wenn Sie jedoch einen tatsächlichen Backslash im String anzeigen möchten, sollten Sie ihn verdoppeln, wie in diesem Beispiel:

Strings in javascript

Output appears here after Run.

Die String-Länge

Die Eigenschaft length wird verwendet, um die Länge eines Strings zu ermitteln:

Strings length in javascript

Output appears here after Run.

Beachten Sie, dass \n ein Sonderzeichen ist. Daher sollte die Länge 7 sein.

Manchmal vertippen sich Entwickler bei dieser Eigenschaft und schreiben str.length() statt einfach str.length. Das funktioniert nicht.

Auf Zeichen zugreifen

Eckige Klammern [pos] werden hauptsächlich verwendet, um ein Zeichen an einer Position [pos] zu erhalten. Das können Sie auch mit der Methode str.charAt(pos) tun. Das allererste Zeichen beginnt bei null:

Character at a position strings in javascript

Output appears here after Run.

Moderne Entwickler bevorzugen die eckigen Klammern, während charAt selten verwendet wird

Strings sind unveränderlich

Es ist nicht möglich, Strings in JavaScript zu ändern. Sehen Sie sich dieses Beispiel an, um sicherzugehen, dass es nicht funktioniert:

Change character at a position strings in javascript

Output appears here after Run.

Üblich ist es, einen komplett neuen String zu erstellen und ihn statt des alten str zuzuweisen, etwa so:

Character at a position strings in javascript

Output appears here after Run.

Groß-/Kleinschreibung ändern

Wir können zwei Methoden zum Ändern der Groß-/Kleinschreibung unterscheiden. Hier sind sie:

toUpperCase change strings in javascript

Output appears here after Run.

Wenn in einem anderen Fall nur ein einzelnes Zeichen klein geschrieben werden soll, verwenden Sie diese Methode:

toLowerCase change strings in javascript

Output appears here after Run.

Nach einer Teilzeichenkette suchen

Lassen Sie uns die Möglichkeiten entdecken, innerhalb eines Strings nach einer Teilzeichenkette zu suchen.

str.indexOf

Dies ist die erste Methode, die zum Suchen nach dem substr in str verwendet wird. Sie beginnt an der bestimmten Position pos und gibt diese Position zurück, sobald die Übereinstimmung gefunden wurde, oder -1, falls nichts gefunden wird.

Sehen wir uns das folgende Beispiel an:

Index strings in javascript

Output appears here after Run.

str.lastIndexOf(substr, position)

Diese Methode sucht vom Ende eines Strings zum Anfang. Die Vorkommen werden in umgekehrter Reihenfolge aufgelistet.

Beachten Sie eine kleine Schwierigkeit mit indexOf innerhalb der if-Prüfung. Es kann nicht auf diese Weise in if verwendet werden:

Index strings in javascript

Output appears here after Run.

Daher muss auf -1 geprüft werden, wie folgt:

Index strings in javascript

Output appears here after Run.

Includes, startsWith, endsWith

Die modernere Methode str.includes(substr, pos) kann abhängig davon, ob substr in str vorhanden ist, true/false zurückgeben.

Verhalten Sie sich wie im Beispiel, wenn Sie nur prüfen müssen, ob eine Übereinstimmung vorhanden ist, ohne gleichzeitig ihre Position zu benötigen:

Includes strings in javascript

Output appears here after Run.

Das zweite Argument von str.includes ist die Position, ab der Sie mit der Suche beginnen. Hier ist ein Beispiel:

Includes strings in javascript

Output appears here after Run.

Eine Teilzeichenkette erhalten

JavaScript enthält drei Methoden, um eine Teilzeichenkette zu erhalten: substring, substr und slice.

str.slice(start [, end])

Diese Methode wird verwendet, um den Teil des Strings von start bis end zurückzugeben.

Zum Beispiel:

The slice method in javascript strings

Output appears here after Run.

Wenn ein zweites Argument fehlt, läuft slice bis zum Ende, wie hier:

Slice in javascript strings

Output appears here after Run.

Für start/end können Sie auch negative Werte verwenden.

Zum Beispiel:

The slice in javascript strings

Output appears here after Run.

str.substring(start [, end])

Diese Methode wird verwendet, um den Teil des Strings zwischen dem start und dem end zurückzugeben.

Sie ähnelt stark slice. Der auffälligste Unterschied besteht darin, dass bei dieser Methode der start größer als der end sein kann.

Zum Beispiel:

The substring in javascript strings

Output appears here after Run.

str.substr(start [, length])

Diese Methode gibt den Teil des Strings ab dem start mit einer bestimmten Länge zurück. Sie unterscheidet sich von den vorherigen Methoden. Mit dieser Methode können Sie die length statt der Endposition angeben.

Zum Beispiel:

The substr in javascript strings

Output appears here after Run.

Das erste Argument kann negativ sein, um vom Ende aus zu zählen:

The substr in javascript strings

Output appears here after Run.

Vergleich von Strings

Es ist wichtig zu wissen, dass Strings Zeichen für Zeichen in alphabetischer Reihenfolge verglichen werden sollten.

Außerdem sollten Sie die folgenden Eigenschaften berücksichtigen:

  1. Ein Kleinbuchstabe ist größer als ein Großbuchstabe, so wie hier:

Comparison in javascript strings

Output appears here after Run.
  1. Buchstaben mit diakritischen Zeichen gelten als „nicht in der richtigen Reihenfolge“. Zum Beispiel:

Comparison in javascript strings

Output appears here after Run.

Nun wollen wir uns die interne Darstellung von Strings in JavaScript ansehen.

In JavaScript kodieren wir alle Strings mit UTF-16. Das bedeutet, dass jedes Zeichen einen entsprechenden numerischen Code hat.

str.codePointAt(pos)

Es wird verwendet, um den Code für das Zeichen an der Position pos : zurückzugeben:

Return the code for the character at position javascript string

Output appears here after Run.

String.fromCodePoint(code)

Erzeugt ein Zeichen anhand des numerischen Codes:

Character's numeric code javascript string

Output appears here after Run.

Unicode-Zeichen können auch über ihre Codes hinzugefügt werden, indem man \u gefolgt vom Hex-Code verwendet.

Zum Beispiel:

Unicode characters javascript string

Output appears here after Run.

Schauen wir uns die Zeichen mit den Codes 65..220 an und bilden daraus einen String:

Unicode characters javascript string

Output appears here after Run.

Hier können Sie sehen, dass zuerst die Großbuchstaben kommen, dann mehrere Sonderzeichen und schließlich Ö am Ende der Ausgabe.

Practice

What are some characteristics or functions of strings in JavaScript as described in the article?

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.