ECMAScript 6 kommt mit einer neuen Art von Zeichenfolgenliteral, wobei der Backtick als Begrenzer verwendet wird. Diese Literale erlauben es grundlegende Zeichenfolgeninterpolationsausdrücke einzubetten, die dann automatisch analysiert und ausgewertet werden.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "My name is " + person.name + ",\n" +
"I am " + person.age + " old\n" +
"\"" + person.greeting + "\" is what I usually say";
let newHtmlStr =
`My name is ${person.name},
I am ${person.age} old
Wie Sie sehen können, haben wir die ` um eine Reihe von Zeichen verwendet, die als Zeichenfolgenliterale interpretiert werden, aber jede Ausdrucksform von ${..} wird inline automatisch analysiert und ausgewertet.
Ein wirklich schöner Vorteil von interpolierten Zeichenfolgenliteralen besteht darin, dass sie über mehrere Zeilen aufgespalten werden können:
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men like RajiniKanth
// to come to the aid of their
// country!
Interpolierte Ausdrücke
Jeder gültige Ausdruck ist erlaubt, innerhalb von ${..} in einem interpolierten Zeichenfolgenliteral zu erscheinen, einschließlich Funktionsaufrufen, Inline-Funktionsausdruckaufrufen und sogar anderen interpolierten Zeichenfolgenliteralen!
function upper(s) {
return s.toUpperCase();
}
var who = "Leser"
var text =
`Ein sehr ${upper("herzlich")} Willkommen
an euch alle ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
Hier war das innere interpolierte Zeichenfolgenliteral `${who}s` für uns eine etwas angenehmere Bequemlichkeit, wenn wir die Variable who mit der Zeichenfolge "s" kombinieren, im Gegensatz zu who + "s". Beachten Sie auch, dass ein interpoliertes Zeichenfolgenliteral nur lexikalisch in dem Bereich eingestuft wird, in dem es erscheint, nicht dynamisch eingestuft in irgendeiner Weise:
(z. B. unten: eine name-Variable wird mit dem Wert interpoliert, der im Bereich gehalten wird, in dem das Vorlagenliteral definiert ist; eine andere Wertzuweisung im Bereich der Funktion foo hat keinen Effekt)
_function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(Hallo von ${name}!);
}
var name = "global";
bar(); // "Hallo von bar!"
Die Verwendung des Vorlagenliteral für das HTML ist definitiv lesbarer und reduziert die Unannehmlichkeiten.
Der alte Weg:
'' +
'' + content + '' +
'Gehen wir'
'';
Mit ECMAScript 6:
`
${content}
Lass uns gehen
`
- Ihre Zeichenfolge kann über mehrere Zeilen gehen.
- Sie müssen keine Anführungszeichenzeichen escapen.
- Sie können Gruppierungen wie: '">'
- Sie müssen nicht den Plusoperator verwenden.
Getaggte Vorlagenliterale
Wir können auch eine Vorlagezeichenfolge taggen, wenn eine Vorlagezeichenfolge getaggt wird, werden die Literale und Substitutionen an eine Funktion übergeben, die den resultierenden Wert zurückgibt.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`Test`; //["Test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Toll';
myTaggedLiteral`Test ${someText} ${2 + 3}`;
//["Test", ""]
// "Toll"
// 5
Wir können hier auch den Spread Operator verwenden, um mehrere Werte zu übergeben. Das erste Argument - wir nannten es strings - ist ein Array aller einfachen Zeichenfolgen (der Inhalt zwischen allen interpolierten Ausdrücken).
Dann sammeln wir alle nachfolgenden Argumente in einem Array namens Werte mit dem ... sammelnden / Rest-Operator, obwohl Sie sie natürlich als einzelne benannte Parameter nach den Zeichenfolgenparametern lassen könnten, wie wir es oben gemacht haben (Wert1, Wert2, usw.).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Toll';
myTaggedLiteral`Test ${someText} ${2 + 3}`;
//["Test", ""]
// "Toll"
// 5
Die Argumente, die in unserem Werte-Array gesammelt werden, sind die Ergebnisse der bereits ausgewerteten Interpolationsausdrücke im Zeichenfolgenliteral. Ein getaggtes Zeichenfolgenliteral ist wie ein Verarbeitungsschritt nachdem die Interpolationen ausgewertet wurden, aber bevor der endgültige Zeichenfolgenwert kompiliert wird, was Ihnen mehr Kontrolle über die Generierung der Zeichenfolge aus dem Literal ermöglicht. Schauen wir uns ein Beispiel für die Erstellung von wiederverwendbaren Vorlagen an.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`
${'name'} ist ein Schauspieler
Sie können seine Filme bei ${'store'} finden.
`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Rohe Zeichenfolgen
Unsere Tag-Funktionen erhalten ein erstes Argument, das wir Zeichen nennen, das ein Array ist. Aber es gibt einen zusätzlichen Datenanteil: die rohen unverarbeiteten Versionen aller Zeichenfolgen. Sie können auf diese rohen Zeichenfolgenwerte über die Eigenschaft .raw zugreifen, wie folgt:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hallo\nWelt`;
Wie Sie sehen können, bewahrt die rohe Version der Zeichenfolge die escapte \n Sequenz, während die verarbeitete Version der Zeichenfolge es wie eine unmaskierte echte neue Zeile behandelt. ECMAScript 6 kommt mit einer integrierten Funktion, die als Zeichenfolgenliteraltag verwendet werden kann: String.raw(..). Sie leitet einfach die rohen Versionen der Zeichenfolgen weiter:
console.log(`Hallo\nWelt`);
/* "Hello
World" */
console.log(String.raw`Hallo\nWelt`);
// "Hallo\nWelt"_
