Zeichen zu String in JavaScript hinzufügen

JavaScript-Strings sind unveränderlich. Daher lässt sich ein Zeichen in einem vorhandenen String nicht ändern. Um Text hinzuzufügen, kombinieren Sie den ursprünglichen String mit dem neuen Text und verwenden den resultierenden String – entweder in einer neuen Variable oder indem Sie ihn der ursprünglichen Variable zuweisen. Für einfache Ergänzungen eignen sich + oder ein Template Literal. Mit der Methode concat() lassen sich Strings verketten; zum Einfügen an einer bestimmten Position können Sie String-Slicing oder ein Array verwenden.

Zeichen am Anfang oder Ende eines Strings hinzufügen

Setzen Sie den neuen Text vor den vorhandenen String, um ihn am Anfang hinzuzufügen, oder dahinter, um ihn ans Ende anzuhängen. Zum Beispiel ergibt "H" + "ello" den String "Hello", während "Hello" + "!" zu "Hello!" führt. Der Operator + wertet von links nach rechts aus. Daher bestimmt die Reihenfolge der Operanden, an welcher Stelle der Text erscheint.

Führen Sie dieses Beispiel aus:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const existingString = "ello";
const charToAdd = "H";
const newString = charToAdd + existingString;
console.log(newString);

Hello

Um Text anzuhängen, vertauschen Sie die Operanden: existingString + charToAdd. Soll die Variable auf das Ergebnis verweisen, weisen Sie ihr den neuen String wieder zu: Für existingString = existingString + charToAdd muss existingString mit let statt mit const deklariert sein.

Den Operator + und Template Literals verwenden

Der Operator + eignet sich gut, um wenige Werte zu verketten. Template Literals sind eine weitere gut lesbare Möglichkeit, besonders wenn ein String mehrere Variablen oder Ausdrücke enthält. Schreiben Sie ein Template Literal zwischen Backticks und setzen Sie jeden Wert in ${} ein. Zum Beispiel verbindet `${firstName} ${lastName}` zwei Variablen mit einem Leerzeichen dazwischen. Um Text am Anfang oder Ende hinzuzufügen, setzen Sie den jeweiligen Ausdruck an die passende Stelle im Template Literal.

Beide Varianten erzeugen einen neuen String; die ursprünglichen Strings bleiben unverändert. Wählen Sie die Schreibweise, bei der die gewünschte Reihenfolge am leichtesten zu erkennen ist. Bei mehreren Werten mit einem festen Trennzeichen macht ein Template Literal dieses direkt im Ergebnis sichtbar.

Strings mit concat() verketten

Die Methode concat() gibt einen neuen String zurück, der zuerst den aufrufenden String und danach jedes übergebene Argument enthält. Der aufrufende String steht also am Anfang des Ergebnisses: "Hello".concat("!") hängt ein Ausrufezeichen an, während "H".concat("ello") den Text am Anfang von "ello" ergänzt, indem "H" den Methodenaufruf übernimmt. Die Methode verändert keinen der beiden Strings. Weitere API-Details finden Sie in der JavaScript-Referenz zu concat(). Diese Referenz ist nur auf Englisch verfügbar, da keine deutsche Zielseite vorhanden ist.

Wenn Sie Werte aus einem Array hinzufügen, beginnen Sie mit dem String und hängen die Werte der Reihe nach an. Eine Schleife, die für jedes Element in characters result = result.concat(character) ausführt, erstellt beispielsweise einen Ergebnis-String. Initialisieren Sie result vor der Schleife mit dem Ausgangstext. Bei vielen Textteilen kann es übersichtlicher sein, die Werte in einem Array zu sammeln und einmal join("") aufzurufen, statt den String wiederholt neu aufzubauen.

Zeichen an einer bestimmten Position einfügen

Um Text am Index position einzufügen, verbinden Sie den Teil vor diesem Index, den einzufügenden Text und den Teil ab diesem Index. Mit slice() lautet der Ausdruck original.slice(0, position) + inserted + original.slice(position). Der erste Aufruf liefert die Zeichen bis zum Index, ohne das Zeichen an dieser Position einzuschließen; der zweite liefert den Rest. JavaScript-String-Indizes zählen UTF-16-Codeeinheiten. Bei Emojis und manchen anderen Unicode-Zeichen stimmen Indizes deshalb möglicherweise nicht mit den Zeichen überein, die Menschen wahrnehmen.

Dasselbe Muster lässt sich mit substring() schreiben: original.substring(0, position) + inserted + original.substring(position). Bei nicht negativen Indizes innerhalb des Strings liefert die Methode den Bereich zwischen den beiden Argumenten; mit einem Argument liefert sie den Rest des Strings. slice() unterstützt auch negative Indizes. substring() behandelt negative Argumente dagegen als null und vertauscht die Argumente, wenn das erste größer als das zweite ist. Wählen Sie die Methode passend zum benötigten Indexverhalten.

Einen String aus einem Array erstellen

Wenn sich das Einfügen leichter als Änderung eines Arrays beschreiben lässt, teilen Sie den String in Elemente auf, fügen mit splice() ein Element ein und verbinden das Array anschließend wieder zu einem String. Zum Beispiel erstellt const parts = original.split("") ein Array aus UTF-16-Codeeinheiten. parts.splice(position, 0, inserted) fügt ein Element ein, ohne eines zu entfernen, und parts.join("") erstellt den resultierenden String. Die Position ist ein nullbasierter Array-Index: 0 fügt vor dem ersten Element ein, parts.length hängt das Element hinter dem letzten an.

Diese Methode ist nützlich, wenn Sie ohnehin eine Sammlung von Zeichen bearbeiten oder mehrere Array-Operationen ausführen müssen. Für Text mit Zeichen außerhalb der Basic Multilingual Plane iteriert Array.from(original) über Unicode-Codepunkte statt über UTF-16-Codeeinheiten. Weder split("") noch Array.from() gruppiert kombinierende Zeichen zu Graphemen, die Menschen als einzelnes Zeichen wahrnehmen. Wenn sich die Position danach richten muss, was eine Person als ein Zeichen sieht, verwenden Sie eine graphemorientierte Methode.