JavaScript String Format - Verwendung der String-Interpolation in JS

Durch Hinzufügen von Vorlagenliteralen in ECMAScript 6 (ES6) können Zeichenfolgen in JavaScript interpoliert werden.

In einfacheren Worten können wir Platzhalter verwenden, um Variablen in eine Zeichenfolge einzufügen. Ein Beispiel für die Zeichenfolgeninterpolation mithilfe von Vorlagenliteralen finden Sie im folgenden Snippet:

const age = 4.5; const earthAge = `Earth is estimated to be ${age} billion years old.`; console.log(earthAge); 

Zunächst werden Sie sehen, dass wir Backticks für Vorlagenliterale verwenden. Außerdem haben wir das Format ${placeholder}, mit dem wir einen dynamischen Wert in die Zeichenfolge einfügen können. Alles, was sich darin ${}befindet, wird als JavaScript ausgewertet.

Zum Beispiel könnten wir schreiben Earth is estimated to be ${age + 10} billion years old., und es würde so funktionieren, als ob wir es tun würden const age = 4.5 + 10;.

Wie haben wir das vorher gemacht?

Vor Vorlagenliteralen hätten wir es so gemacht:

const earthAge = "Earth is estimated to be " + age + " billion years old."; 

Wie Sie sehen können, haben wir bereits viele Anführungszeichen für eine einfache Zeichenfolge. Stellen Sie sich vor, wir müssen eine Handvoll Variablen einfügen. Es kann sich schnell in eine komplexe Zeichenfolge verwandeln, die nicht sehr gut lesbar ist. Somit machen Vorlagenliterale Zeichenfolgen sauberer und lesbarer.

Dies ist jedoch nur ein Fall. Sehen wir uns weitere Anwendungsfälle für Vorlagenliterale an.

Mehrzeilige Zeichenfolgen

Eine weitere praktische Verwendung von Vorlagenzeichenfolgen sind mehrzeilige Zeichenfolgen. Vor Vorlagenliteralen haben wir wie in \nfür neue Zeilen verwendet console.log('line 1\n' + 'line 2').

Für zwei Zeilen ist dies möglicherweise in Ordnung. Aber stellen Sie sich vor, wir wollen fünf Zeilen. Auch hier wird die Zeichenfolge unnötig komplex.

const earthAge = `Earth is estimated to be ${age} billion years old. Scientists have scoured the Earth searching for the oldest rocks to radiometrically date. In northwestern Canada, they discovered rocks about 4.03 billion years old. `; 

Das obige Snippet zeigt einmal mehr, wie einfach und sauber es wird, mehrzeilige Zeichenfolgen mit Vorlagenliteralen zu schreiben.

Versuchen Sie als Übung, die obige Zeichenfolge so zu konvertieren, dass Verkettung und neue Zeile verwendet werden \n.

Ausdrücke

Mit Vorlagenliteralen können wir auch Ausdrücke in den Zeichenfolgen verwenden. Was bedeutet das?

Zum Beispiel könnten wir mathematische Ausdrücke wie das Multiplizieren von zwei Zahlen verwenden. Das folgende Snippet zeigt genau das:

const firstNumber = 10; const secondNumber = 39; const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`; console.log(result); 

Ohne Vorlagenliterale müssten wir so etwas tun:

const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + "."; 

Das Schreiben einer Zeichenfolge wie oben kann schnell komplex und verwirrend werden. Wie wir immer wieder sehen, machen Vorlagenliterale das Einbetten von Ausdrücken in die Zeichenfolge einfacher und eleganter.

Ternärer Operator

Mit der String-Interpolation können wir sogar einen ternären Operator innerhalb eines Strings verwenden. Auf diese Weise können wir den Wert einer Variablen überprüfen und abhängig von diesem Wert verschiedene Dinge anzeigen.

Schauen wir uns das folgende Beispiel an:

const drinks = 4.99; const food = 6.65; const total = drinks + food; const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.` console.log(result); 

Im obigen Beispiel prüfen wir beispielsweise, ob der Gesamtbetrag mehr als zehn Dollar beträgt.

Wenn der Betrag mehr als zehn beträgt, teilen wir dem Benutzer mit, dass die Kartenzahlung abgelehnt wird. Andernfalls wird die Kartenzahlung akzeptiert. Wie Sie sehen können, können wir durch String-Interpolation coole Dinge mit Strings machen.

Fazit

Durch das Hinzufügen von Vorlagenliteralen in ES6 können wir bessere, kürzere und klarere Zeichenfolgen schreiben. Es gibt uns auch die Möglichkeit, Variablen und Ausdrücke in jede Zeichenfolge einzufügen. Im Wesentlichen wird alles, was Sie in die geschweiften Klammern ( ${}) schreiben, als JavaScript behandelt.

Daher können wir Vorlagenliterale verwenden, um:

  • Schreiben Sie mehrzeilige Zeichenfolgen
  • Ausdrücke einbetten
  • Schreiben Sie Zeichenfolgen mit dem ternären Operator

Wenn Ihnen gefällt, was ich schreibe, werden Sie wahrscheinlich lieben, was ich per E-Mail schicke. Ziehen Sie in Betracht, meine Mailingliste zu abonnieren. Wenn Sie kein Fan von Newslettern sind , können wir jederzeit auf Twitter in Kontakt bleiben .