JavaScript-Variablen in Strings einfügen

Um den aktuellen Wert einer Variablen in einen JavaScript-String einzusetzen, verwenden Sie ein Template-Literal: Schreiben Sie den Text zwischen Backticks und fügen Sie an der gewünschten Stelle exakt `${variableName}` ein. Ersetzen Sie variableName durch den Namen Ihrer Variablen; JavaScript setzt dann ihren aktuellen Wert ein. Für die meisten Strings ist ein Template-Literal die einfachste Lösung. Platzhalter in der Konsole eignen sich für Protokollausgaben, während eine Formatierungsbibliothek sinnvoll sein kann, wenn ihre Funktionen eine zusätzliche Abhängigkeit rechtfertigen.

Template-Literale verwenden, um Variablen in JavaScript-Strings einzufügen

Template-Literale verwenden Backticks statt einfacher oder doppelter Anführungszeichen. JavaScript wertet den Ausdruck zwischen ${ und } aus und wandelt sein Ergebnis in einen String um. Sie können den fertigen String einer Variablen zuweisen, aus einer Funktion zurückgeben oder an eine andere Funktion übergeben. In einem String in Anführungszeichen wie "Hello, ${name}" bleibt die Interpolationssyntax wörtlicher Text; einfache und doppelte Anführungszeichen setzen keine Variablenwerte ein.

Dieses Beispiel erstellt eine Begrüßung, berechnet einen Gesamtbetrag und weist den fertigen Text message zu:

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

Der Ausdruck ${price + 3} wird zuerst ausgewertet und ergibt 15; das Dollarzeichen direkt davor ist gewöhnlicher Text. Ausdrücke können Rechenoperationen, Eigenschaftszugriffe oder Funktionsaufrufe enthalten. Halten Sie sie so kurz, dass der resultierende Satz gut verständlich bleibt. Ein Template-Literal kann sich über mehrere Zeilen erstrecken, und Anführungszeichen darin müssen nicht maskiert werden. Für die Zeichenfolge ${ als wörtlichen Text maskieren Sie das Dollarzeichen mit \${; einen Backtick maskieren Sie mit einem umgekehrten Schrägstrich. Ergibt ein Ausdruck ein Objekt, verwendet JavaScript dessen String-Konvertierung. Das muss nicht die gewünschte Darstellung sein; wandeln Sie Objektdaten bei Bedarf ausdrücklich in ein lesbares Format um. Interpolation erzeugt einfachen Text und keine gegen HTML-Injection geschützte Ausgabe. Verwenden Sie beim Anzeigen nicht vertrauenswürdiger Werte auf einer Webseite eine für den jeweiligen Kontext geeignete sichere DOM-API.

Grundlegende Formatierung verwenden, um Variablen in JavaScript-Strings einzufügen

Für Diagnoseausgaben kann console.log() eine Nachricht anhand von Platzhaltern und den nachfolgenden Argumenten formatieren. In diesem Beispiel formatiert %s den Namen und %d die Punktzahl; die Argumente stehen in der passenden Reihenfolge:

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

Die Unterstützung und Umwandlung von Platzhaltern hängt von der jeweiligen Konsolenimplementierung ab. Das ist daher eine praktische Hilfe für Protokollausgaben, aber keine portable API zum Erstellen von Strings. console.log() gibt Diagnoseausgaben aus und liefert die formatierte Nachricht nicht zur Zuweisung an eine Variable oder zum Einfügen in eine HTML-Seite zurück. Wenn Sie einen String-Wert benötigen, verwenden Sie ein Template-Literal oder eine Formatierungsbibliothek. Achten Sie darauf, die Argumente in derselben Reihenfolge wie die zugehörigen Platzhalter anzugeben; Konsolen können zusätzliche Werte oder nicht zugeordnete Platzhalter unterschiedlich darstellen.

sprintf() verwenden, um Variablen in JavaScript-Strings einzufügen

sprintf-js ist eine optionale Bibliothek, deren Funktion sprintf() einen String zurückgibt. In einem Projekt, in dem das Paket installiert ist und CommonJS zur Verfügung steht, können Sie es mit const { sprintf } = require("sprintf-js"); laden und mit const message = sprintf("%s has %d items", name, count); einen Wert erzeugen. Diese Zeilen veranschaulichen die API; Installation und Import hängen von der Umgebung Ihres Projekts ab. Beachten Sie bei Browser- oder Modulprojekten die Einrichtungsanleitung des verlinkten Projekts.

sprintf() verarbeitet Formatangaben und die übergebenen Argumente; JavaScript-Ausdrücke innerhalb des Formatstrings wertet die Funktion nicht aus. Jede Formatangabe verwendet ein entsprechendes Argument. Die Bibliothek ist dann eine gute Wahl, wenn ihre Formatierungsfunktionen bei wiederholter oder komplexerer Formatierung helfen und die zusätzliche Abhängigkeit rechtfertigen. Die Projektdokumentation beschreibt verfügbare Formatangaben und Einrichtungsoptionen. Für einen einzelnen kurzen Satz mit einer Variablen ist die eingebaute Syntax für Template-Literale meist einfacher.

Fazit

Verwenden Sie Template-Literale für gewöhnliche Strings, Variablenwerte und eingebettete JavaScript-Ausdrücke. Platzhalter in console.log() eignen sich für Diagnoseausgaben; bedenken Sie dabei, dass ihr Verhalten je nach Implementierung variieren kann und der Aufruf keinen wiederverwendbaren formatierten String erzeugt. Ziehen Sie sprintf-js in Betracht, wenn seine Formatierungsfunktionen nützlich genug sind, um die zusätzliche Abhängigkeit zu rechtfertigen. Für einfache Interpolation sind Backticks mit ${...} meist die klarste Möglichkeit, den aktuellen Wert einer Variablen in einen JavaScript-String einzusetzen.