Heim > Web-Frontend > js-Tutorial > Hauptteil

Die spezifische Verwendung von Vorlagenzeichenfolgen in ES6

WBOY
Freigeben: 2022-08-08 11:45:58
nach vorne
1722 Leute haben es durchsucht

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" 
    );
Nach dem Login kopieren

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`
    );
Nach dem Login kopieren

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.`
Nach dem Login kopieren
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.`);
Nach dem Login kopieren

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}`);
Nach dem Login kopieren
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()}`);
Nach dem Login kopieren

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()}`);
Nach dem Login kopieren

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()}`);
Nach dem Login kopieren

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(`你想说什么?嗯,${"其实我不是变量~"}`);
Nach dem Login kopieren

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"));
Nach dem Login kopieren
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!

Verwandte Etiketten:
es6
Quelle:jb51.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!