JavaScript Variable in String einfügen

1. Verwendung von Template-Literalen zum Einfügen von Variablen in einen String in JavaScript
2. Verwenden Sie die Standardformatierung, um eine Variable in eine Zeichenkette in JavaScript einzufügen
3. Verwenden Sie sprintf(), um eine Variable in einen String in JavaScript einzufügen
4. Fazit

In diesem Artikel wird beschrieben, wie Sie Variablen in eine Zeichenkette in JavaScript einfügen.

Verwendung von Template-Literalen zum Einfügen von Variablen in einen String in JavaScript

Das Konzept der Vorlagenliterale gibt es schon seit einiger Zeit in JavaScript. Sie wurden früher als VorlagenZeichenketten bezeichnet. Vorlagenliterale wurde in ES6 eingeführt. Es bietet eine einfachere Möglichkeit, Variablen in einen bestimmten Satz einzubetten, als umständliche Zeichenkettenverkettungen zu verwenden. Anstatt Anführungszeichen (doppelte Anführungszeichen oder einfache Anführungszeichen) zu verwenden, verwenden wir Vorlagenliterale, die mit den Backticks (` Zeichen in der Tastatur) definiert wurden. Wir platzieren den String in den Backticks und binden unsere Variablen in den Satz ein. Im Folgenden werden die Verwendungen von Vorlagenliteralen aufgeführt.

Allein das Einfügen einer Zeichenkette in eine Reihe von Backticks macht ihn zu einem String-Wert. Es hat die gleiche Funktionalität wie das Halten des Zeichenkettentextes in doppelten Anführungszeichen ". Der folgende Beispielcode zeigt eine einfache Zeichenkette, die als Vorlagenliteral verwendet wird.

console.log(`Hello World`);

Ausgabe:

Hello World

Wir haben eine normale Saite bereit. Wenn wir den Wert einer Variablen in dieser Zeichenkette anzeigen müssen, müssen wir Variablen einbetten. Beim Einbetten wird die Variable in geschweifte Klammern mit einem Vorzeichen $ eingeschlossen. Die Syntax zum Einbetten des Variablenwerts lautet ${variableName}. Im folgenden Code ist die Variable eggCount in eine übliche Zeichenkette eingebettet, wobei der gesamte Inhalt in Backticks eingekapselt ist.

let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);

Ausgabe:

On easter we decorted 20 easter eggs

Einbetten von Ausdrücken mit Variablen

Im Gegensatz zur bloßen Zeichenkettenverkettung können wir bei Vorlagenliteralen Ausdrücke mit mehr als einer Variablen einschließen, ähnlich wie bei der Codierung in JavaScript mit den Vorlagenliteralen. Wenn wir bestimmte Operationen wie Summieren, Abrufen von TeilZeichenketten, einschließlich Datumsangaben usw. ausführen müssen, können all diese Funktionen und vieles mehr in eine Zeichenkette mit Vorlagenliteralen eingebettet werden. Der folgende Codesatz enthält verschiedene Anwendungsfälle.

let a = 5;
b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);

Ausgabe:

Sum of 5 and 10 is 15

Ein weiteres Beispiel für das Datum lautet wie folgt. Hier verwenden wir keine Variablen, aber die in Vorlagenliteralen enthaltenen Ausdrücke funktionieren für sich. Es sind die Zeichenketten mit JavaScript in Fortsetzung der Notwendigkeit, die doppelten Anführungszeichen oder Backticks immer wieder zu verwenden, wie wir es mit verketteten Sätzen tun würden:

console.log(`The date today is ${new Date().getDate()}-${
    new Date().getMonth() + 1}-${new Date().getFullYear()}`);

Ausgabe:

The date today is 7-4-2021

Bemerkungen

• Vorlagenliterale bieten eine der einfachsten Möglichkeiten, Variablen in einen Satz einzubetten.
• Es bietet auch Unterstützung für das Einfügen von Ausdrücken direkt in die Zeichenkette und überlässt es dem Compiler, die Berechnungen zur Laufzeit aufzulösen.
• Wir können jetzt einfach einfache und doppelte Anführungszeichen in eine Zeichenkette einfügen, ohne Escapezeichen zu verwenden.
• Vorlagenliterale machen das Codieren einfach, präzise, ​​ordentlich und lesbar.
• Der Wert von Vorlagenliteralen kann einer neuen Variablen zugewiesen werden. Es kann als neue Zeichenkette betrachtet werden, die die Werte Ihrer Variablen enthält.

Verwenden Sie die Standardformatierung, um eine Variable in eine Zeichenkette in JavaScript einzufügen

Eine andere Möglichkeit, die Variablenwerte sauber in unsere Zeichenkette einzufügen, ist die Verwendung der in JavaScript unterstützten Grundformatierung. Mit dem JavaScript console.log() können wir Verkettungen vermeiden und Platzhalter in die ZielZeichenkette einfügen. Die zuzuweisenden Werte werden wie unten gezeigt als Argumente übergeben.

let a = 5;
b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a + b));

Ausgabe:

Sum of 5 and 10 is 15.

Diese Auflösung von Variablen in Werte funktioniert nur mit console.log(). Daher können wir es nicht zum Zuweisen zu einer anderen Variablen verwenden und wir können es nicht zum Anzeigen der neuen aufgelösten Zeichenkette in der HTML-Benutzeroberfläche verwenden.

Bemerkungen

• Wir können diese Methode verwenden, während wir mit der Funktion console.log() protokollieren. Daher funktioniert diese Methode nicht zum Zuweisen von Werten zu einer Variablen. Daher sind andere Szenarien als die Protokollierung möglicherweise nicht geeignet.
• Bei Verwendung der Grundformatierung sollten die in der Zeichenkette verwendeten Platzhalter dem Datentyp entsprechen, der als Parameter übergeben wird. Zum Anzeigen eines numerischen Werts sollte der Platzhalter im Satz beispielsweise %d sein, für den Zeichenkettendatentyp ist es %s.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Ausgabe:

Sum of 5 and 10 is 15.

Wenn wir vergessen, den Typ des übergebenen Parameters zu berücksichtigen, liegt eine Typinkongruenz vor. JavaScript versucht, die Variable zu typisieren, und fügt den resultierenden Wert zur Zeichenkette hinzu. Der folgende Code erklärt dieses Phänomen.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);

Ausgabe:

5 of 10 and 15 is NaN.

op1 ist vom Datentyp Number und wir verwenden das %s, um es in die endgültige Zeichenkette einzufügen. Das %s wandelt die Zahl automatisch in einen String-Datentyp um. Diese Konvertierung verläuft reibungslos. Für die Variable operation wird der Wert jedoch einem Platzhalter zugewiesen, der in der Sequenz als nächstes folgt. Dieser Platzhalter ist %d. Daher wird hier ein String-Datentyp in eine Zahl konvertiert. Die Konvertierung findet nicht statt. Daher ist das zurückgegebene Ergebnis NaN, das wir als Endwort der Ausgabe sehen.

Wir können Ausdrücke in den Parametern verwenden, wie wir im Fall von (op1 + op2) gesehen haben. Das JavaScript versteht und löst es entsprechend als Summe auf.

In diesem Fall können wir in der letzten Zeichenkette keine doppelten Anführungszeichen verwenden, ohne die Escape-Zeichen zu verwenden. Wir können jedoch einfache Anführungszeichen verwenden, wenn wir die gesamte Struktur in doppelte Anführungszeichen kapseln. Siehe den folgenden Code.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('\'%s\' of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Ausgabe:

'Sum' of 5 and 10 is 15.

Verwenden Sie sprintf(), um eine Variable in einen String in JavaScript einzufügen

Vor Template Literals in ES6 von JavaScript folgte die Entwicklergemeinde der funktionsreichen Bibliothek von sprintf.js. Die Bibliothek verfügt über eine Methode namens sprintf(). sprintf.js ist eine Open-Source-Bibliothek für JavaScript. Es hat seine Implementierungen für Node.js und Browser. Informationen zu Einrichtung und Konfiguration finden Sie auf der Git-Hub-Seite. sprintf() wird verwendet, um die Variablen in eine Zeichenkette aufzunehmen, ohne die Zeichenkettenverkettung zu verwenden. Die Verwendung ist wie folgt.

let sprintf = require('sprintf-js').sprintf;

let op1 = 5, op2 = 10, operation = 'Sum';
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Ausgabe:

Sum of 5 and 10 is 15.

Es hat verschiedene nützliche Besonderheiten wie folgt.

• Mit der Funktion sprintf() können die Variablen in einer anderen Reihenfolge angegeben werden.
• Wie die Funktionalität von Vorlagenliteralen löst sprintf() in Zeichenketten gekapselte Ausdrücke auf.
• Es unterstützt verschiedene Formate. Abgesehen von der StandardZeichenkette und -nummer unterstützt die Bibliothek sprintf-js Boolesche, binäre Formate usw. für die Ausgabe der Variablenwerte in eine Zeichenkette.
• Darüber hinaus können Sie die Argumente mit der von der Bibliothek bereitgestellten Methode vsprintf() als Array angeben.
• Es ermöglicht auch die Übergabe von Objekten direkt im zweiten Argument und löst die Variablen automatisch auf.

Es gibt viele weitere Funktionen, die diese Bibliothek bietet. Weitere Details finden Sie in der Datei Read.me, die in ihrem GitHub-Link angegeben ist.

Fazit

Wenn Sie die Variablenwerte in Ihre Zeichenkette aufnehmen möchten, ohne die langwierigen Zeichenkettenverkettungen mit den Anführungszeichen + und doppelten Anführungszeichen zu verwenden, sollten Sie sich am besten für Vorlagenliterale entscheiden, die Funktion mit Backticks. Wenn Sie nur zu Protokollierungszwecken Werte in die AusgabeZeichenkette einfügen müssen, ist die Funktion console.log() von JavaScript hilfreich. Die Formatierungsoptionen sind standardmäßig enthalten. Die Bibliothek sprintf.js ist reich an Funktionen und dominiert den Raum, da sie beim Einbetten der Variablenwerte viel mehr bietet als die Vorlagenliterale. Dies ist jedoch mit geringen Kosten verbunden, um sich mit der Bibliothek vertraut zu machen.