Kürzlich habe ich in meinem Projekt ES6-Vorlagenzeichenfolgen verwendet, die hier zusammengefasst sind.
1. Bisher konnten wir auch JavaScript verwenden, um Vorlagenzeichenfolgen auszugeben, normalerweise wie folgt:
$("#result").append(
„Er ist <b>“+Person.Name+“</b>“+“und wir möchten sein „+Person.Alter+“ wissen. Das ist alles.“
); Aber wir können sehen, dass dieser traditionelle Ansatz die Verwendung vieler „“ (doppelte Anführungszeichen) und + erfordert, um die Vorlage zu erhalten, die wir benötigen. Aber das ist sehr unbequem.
Daher stellt ES6 Vorlagenzeichenfolgen bereit, die mit ` (Backtick) gekennzeichnet sind und Variablen mit ${} eingeschlossen sind. Das obige Beispiel kann mit Vorlagenzeichenfolgen wie folgt geschrieben werden:
$("#result").append(
„Er ist <b>${person.name}</b>und wir möchten sein ${person.age} wissen. Das ist alles.“
); Dieser Ansatz ist viel einfacher. Wir müssen nicht mehr viele „“ und + verwenden, um Zeichenfolgen und Variablen zu verbinden.
2. Natürlich können Variablen in die Vorlagenzeichenfolge eingefügt werden, es ist aber auch möglich, keine Variablen zu verwenden. Wie unten gezeigt:
“„Ich bin ein Mann.“
„Egal was Sie tun,
ich vertraue Ihnen.
3. Wir können auch zuerst die Variablen definieren und sie dann in die Vorlagenzeichenfolge einbetten:
var name="zzw";
` ${name},egal was du tust,
Ich vertraue dir.` 4. Da der Backtick die Kennung der Vorlagenzeichenfolge ist, müssen wir ihn natürlich wie folgt maskieren, wenn wir ihn in der Zeichenfolge verwenden müssen:
„Egal`, was du tust,
Ich vertraue dir
.“ 5. Hinweis: Wenn Sie Vorlagenzeichenfolgen zur Darstellung mehrzeiliger Zeichenfolgen verwenden, werden alle Leerzeichen und Einrückungen in der Ausgabe gespeichert! !
console.log( `Egal` was Sie tun, Ich vertraue dir.`);
Die Ausgabe ist wie folgt:
6. Sie können jeden JavaScript-Ausdruck in die geschweiften Klammern in ${} setzen, Operationen ausführen und auf Objekteigenschaften verweisen.
var x=88;
var y=100;
console.log(`x=${++x},y=${x+y}`); Das Ergebnis ist wie folgt:
7. Noch leistungsfähiger: Der Template-String kann auch Funktionen aufrufen:
function string(){
return „zzw likes es6!“;
}
console.log(`Was möchten Sie sagen? Nun, ${string()}`) ;
Wenn das Ergebnis der Funktion außerdem kein String ist, wird es gemäß den allgemeinen Regeln in einen String konvertiert:
function string(){
Rückkehr 666;
}
console.log(`Was möchten Sie sagen? Nun, ${string()}`) ;
Hier wird die Zahl 666 tatsächlich in die Zeichenfolge 666 umgewandelt.
8. Wenn die Variable in ${} nicht benannt ist, wird ein Fehler gemeldet:
console.log(`Was möchten Sie sagen? Nun, ${string( )}`); Im obigen Code ist die Funktion string() nicht deklariert, daher wird ein Fehler gemeldet:
9. Tatsächlich können wir auch eine Zeichenfolge in ${} eingeben, und das Wissensergebnis gibt immer noch eine Zeichenfolge zurück:
console.log(`Was möchten Sie sagen? Nun, ${"Eigentlich bin ich keine Variable ~"}`) ; Das Ergebnis ist wie folgt:
10. Wenn Sie auf die Vorlagenzeichenfolge selbst verweisen möchten, können Sie sie wie folgt schreiben:
let str="return"+"`Hello! ${name}`";
let func=new Function("name",str);
console.log(func("zzw")); Die Ergebnisse sind wie folgt:
