ES6Es wird eine neue Art von Zeichenfolgenliteral entwickelt, bei der das `Back-Tick als Trennzeichen verwendet wird. Mit diesen Literalen können grundlegende Zeichenfolgeninterpolationsausdrücke eingebettet werden, die dann automatisch analysiert und ausgewertet werden.
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
Wie Sie sehen können, haben wir das ..`` um 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 );
Interpolierte Ausdrücke
Jeder gültige Ausdruck darf ${..}in einer interpolierten Zeichenfolge enthalten sein lit‐ eral, einschließlich Funktionsaufrufen, Inline-Funktionsausdrucksaufrufen und sogar anderen interpo‐ lated string literals!
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 );
Hier war das innere interpolierte $ {who} s``-String-Literal für uns ein wenig angenehmer, wenn wir die who-Variable mit dem "s"String kombinierten , im Gegensatz zu who + "s". Um eine Notiz zu behalten, ist ein interpoliertes String-Literal genau dort, lexically scopedwo es erscheint, dynamically scopedin keiner Weise
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar();
Die Verwendung des template literalfü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 ES6:
`<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 templateZeichenfolge markieren . Wenn eine templateZeichenfolge markiert wird, werden die literalsErsetzungen und an die Funktion übergeben, die den resultierenden Wert zurückgibt.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`;
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
Wir können den spreadOperator hier 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 einem Array namens values mit dem ... gather/rest operator, obwohl Sie sie natürlich als einzelne benannte Parameter belassen könnten, die dem string-Parameter folgen, wie wir es oben getan haben (value1, value2 etc).
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
Das argument(s)in unserem Wertearray gesammelte Ergebnis sind die Ergebnisse der bereits ausgewerteten Interpolationsausdrücke, die im Zeichenfolgenliteral enthalten sind. A tagged string literalist wie ein Verarbeitungsschritt, nachdem die Interpolationen ausgewertet wurden, aber bevor der endgültige Zeichenfolgenwert kompiliert wurde, sodass Sie mehr Kontrolle über das Generieren der Zeichenfolge aus dem Literal haben. Schauen wir uns ein Beispiel für die Erstellung eines re-usable templates.
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 aufgerufen stringshaben array. Es sind jedoch noch einige weitere Daten enthalten: die unverarbeiteten Rohversionen aller Zeichenfolgen. Sie können mit der .rawEigenschaft wie folgt auf diese unformatierten Zeichenfolgenwerte zugreifen :
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
Wie Sie sehen können, rawbehält die Version der Zeichenfolge die maskierte \ n-Sequenz bei, während die verarbeitete Version der Zeichenfolge sie wie eine echte neue Zeile behandelt. ES6kommt mit einer eingebauten Funktion, die als String-Literal-Tag verwendet werden kann : String.raw(..). Es geht einfach durch die Rohversionen von strings:
console.log( `Hello\nWorld` );
console.log( String.raw`Hello\nWorld` );