ECMAScript 6 bietet einen neuen Typ von Zeichenfolgenliteral, bei dem der Backtick als Trennzeichen verwendet wird. Mit diesen Literalen können grundlegende Zeichenfolgeninterpolationsausdrücke eingebettet werden, die dann automatisch analysiert und ausgewertet werden.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
Wie Sie sehen können, haben wir `eine Reihe von Zeichen verwendet, die als Zeichenfolgenliteral interpretiert ${..}werden. Alle Ausdrücke des Formulars werden jedoch sofort analysiert und inline ausgewertet.
Ein wirklich schöner Vorteil interpolierter String-Literale ist, dass sie sich über mehrere Zeilen verteilen dürfen:
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
// to come to the aid of their
// country!
Interpolierte Ausdrücke
Jeder gültige Ausdruck darf ${..}in einem interpolierten Zeichenfolgenliteral enthalten sein, einschließlich Funktionsaufrufen, Inline-Funktionsausdrucksaufrufen und sogar anderen interpolierten Zeichenfolgenliteralen!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
Hier war das innere `${who}s`interpolierte String-Literal für uns ein wenig angenehmer, wenn wir die whoVariable mit dem "s"String kombinierten , im Gegensatz zu who + "s". Um eine Notiz zu behalten, wird ein interpoliertes Zeichenfolgenliteral nur lexikalisch dort angezeigt, wo es angezeigt wird, und in keiner Weise dynamisch:
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
Die Verwendung des Vorlagenliteral für den HTML-Code ist definitiv besser lesbar, da der Ärger verringert wird.
Der einfache alte Weg:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
Mit ECMAScript 6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Ihre Zeichenfolge kann mehrere Zeilen umfassen.
- Sie müssen Anführungszeichen nicht umgehen.
- Sie können Gruppierungen wie: ""> "vermeiden.
- Sie müssen den Plus-Operator nicht verwenden.
Verschlagwortet mit Vorlagenliterale
Wir können auch eine Vorlagenzeichenfolge markieren. Wenn eine Vorlagenzeichenfolge markiert wird, werden die Literale und Ersetzungen an die 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 = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Wir können hier den Spread-Operator verwenden, um mehrere Werte zu übergeben. Das erste Argument - wir haben es Strings genannt - ist ein Array aller einfachen Strings (das Zeug zwischen interpolierten Ausdrücken).
Wir sammeln dann alle nachfolgenden Argumente in ein Array mit Namen Werte bis unter Verwendung der ... gather/rest operator, obwohl man kann natürlich haben sie als einzelne benannte Parameter links ab und folgen den Saiten Parameter wie wir oben haben ( value1, value2usw.).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Die in unserem Wertearray gesammelten Argumente sind die Ergebnisse der bereits ausgewerteten Interpolationsausdrücke, die im Zeichenfolgenliteral gefunden wurden. Ein mit Tags versehenes String-Literal ähnelt einem Verarbeitungsschritt, nachdem die Interpolationen ausgewertet wurden, jedoch bevor der endgültige String-Wert kompiliert wurde, sodass Sie mehr Kontrolle über das Generieren des Strings aus dem Literal haben. Schauen wir uns ein Beispiel für die Erstellung wiederverwendbarer Vorlagen an.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
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 Saiten
Unsere Tag-Funktionen erhalten ein erstes Argument, das wir als Strings bezeichnet haben. Dabei handelt es sich um ein Array. Es sind jedoch noch einige weitere Daten enthalten: die unverarbeiteten Rohversionen aller Zeichenfolgen. Sie können mit der .rawEigenschaft wie folgt auf diese Rohzeichenfolgenwerte zugreifen :
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Wie Sie sehen können, \nbehält die Rohversion der Zeichenfolge die maskierte Sequenz bei, während die verarbeitete Version der Zeichenfolge sie wie eine echte neue Zeile behandelt. ECMAScript 6 verfügt über eine integrierte Funktion, die als String-Literal-Tag verwendet werden kann : String.raw(..). Es werden einfach die Rohversionen der Zeichenfolgen durchlaufen:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"