Heim  >  Artikel  >  Web-Frontend  >  Die spezifische Verwendung von Vorlagenzeichenfolgen in ES6

Die spezifische Verwendung von Vorlagenzeichenfolgen in ES6

WBOY
WBOYnach vorne
2022-08-08 11:45:581694Durchsuche

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er führt hauptsächlich in die Analyse des relevanten Inhalts von Vorlagenzeichenfolgen anhand des Codes ein alle.

Die spezifische Verwendung von Vorlagenzeichenfolgen in ES6

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend

Ich habe kürzlich ES6-Vorlagenzeichenfolgen in meinem Projekt verwendet, die hier zusammengefasst sind.

1. Bisher konnten wir auch JavaScript verwenden, um Vorlagenzeichenfolgen auszugeben, normalerweise wie folgt:

$("#result").append(
    "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
    );

Aber wir können sehen, dass ein solch traditioneller Ansatz eine große Anzahl von „“ (doppelten Anführungszeichen) und + erfordert, die zusammengefügt werden müssen um die Vorlage zu bekommen, die wir brauchen. Aber das ist sehr unbequem.

So stellt ES6 Vorlagenzeichenfolgen bereit, die mit ` (Backtick) markiert sind, und Variablen werden mit ${} umschlossen. Das obige Beispiel kann mit Vorlagenzeichenfolgen wie folgt geschrieben werden:

$("#result").append(
  `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
    );

Dieser Ansatz ist viel einfacher. Wir müssen nicht mehr viele „“ und + verwenden, um Zeichenfolgen und Variablen zu verbinden.

2. Natürlich können Vorlagenzeichenfolgen Variablen einführen, es ist aber auch möglich, keine Variablen zu verwenden. Wie unten gezeigt: „Ich bin ein Mann.“ :

var name="zzw";
` ${name},no matter what you do,
 I trust you.`
4. Da der Backtick die Kennung der Vorlagenzeichenfolge ist, müssen wir ihn natürlich maskieren, wenn wir ihn in der Zeichenfolge verwenden müssen, wie unten gezeigt:

`Egal, was Sie tun ,

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( `No matter\` what you do,
 I trust you.`);

Das Ausgabeergebnis lautet 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: Die Vorlagenzeichenfolge kann auch die Funktion aufrufen:

function string(){
  return "zzw likes es6!";
}
console.log(`你想说什么?嗯,${string()}`);

Das Ergebnis ist wie folgt:

Wenn das Ergebnis von Da die Funktion kein String ist, wird sie nach den allgemeinen Regeln in einen String umgewandelt:

function string(){
    return 666;
  }
  console.log(`你想说什么? 嗯,${string()}`);

Das Ergebnis ist wie folgt:

Hier wird tatsächlich die Zahl 666 in einen String 666 umgewandelt.

8. Wenn in ${} die Variablen in nicht benannt sind, wird ein Fehler gemeldet:

console.log(`你想说什么? 嗯,${string()}`);

Im obigen Code ist die Funktion string() nicht deklariert, daher wird ein Fehler gemeldet:

9. Tatsächlich können wir auch eine Zeichenfolge eingeben:

console.log(`你想说什么?嗯,${"其实我不是变量~"}`);

Das Ergebnis lautet wie folgt:

10 String selbst, können Sie ihn so schreiben:

let str="return"+"`Hello! ${name}`";
let func=new Function("name",str);
 console.log(func("zzw"));

Das Ergebnis ist wie folgt:

【Verwandte Empfehlungen: Javascript-Video-Tutorial

,

Web-Frontend

Das obige ist der detaillierte Inhalt vonDie spezifische Verwendung von Vorlagenzeichenfolgen in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen