Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie ES6-Vorlagenzeichenfolgen

php中世界最好的语言
Freigeben: 2018-05-29 10:12:24
Original
1419 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie ES6-Vorlagen Strings verwenden und welche Vorsichtsmaßnahmen für die Verwendung von ES6-Vorlagenstrings gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

1. Früher konnten wir auch JavaScript verwenden, um einen Vorlagenstring auszugeben, normalerweise so:

$("#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 sehen: Solch ein traditioneller Ansatz erfordert die Verwendung von A Viele „“ (doppelte Anführungszeichen) und + müssen zusammengefügt werden, um die Vorlage zu erhalten, die wir benötigen. Aber das ist sehr unpraktisch.

So stellt ES6 Vorlagenzeichenfolgen bereit, die mit ` (Backtick) markiert sind, und Variablen, die mit ${} umschlossen sind. 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 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 du tust,

Ich vertraue dir.`   

3. Wir können auch zuerst die Variable definieren und dann die Variable in die Vorlagenzeichenfolge einbetten:

var name="zzw";
` ${name},no matter what you do,
 I trust you.`
Nach dem Login kopieren

4 Offensichtlich, da der Backtick die Kennung der Vorlagenzeichenfolge ist , wenn wir Backticks in einer Zeichenfolge verwenden möchten, müssen wir sie maskieren, wie unten gezeigt:

`Egal was du tust,
Ich vertraue dir.`

5. Hinweis: Wenn Sie Vorlagenzeichenfolgen zur Darstellung mehrzeiliger Zeichenfolgen verwenden, werden alle Leerzeichen und Einzüge in der Ausgabe gespeichert! !

console.log( `No matter\` what you do,
 I trust you.`);
Nach dem Login kopieren

Das Ausgabeergebnis ist wie folgt:

6 Sie können einen beliebigen JavaScriptAusdruck können Sie auch Operationen ausführen und Objekteigenschaften referenzieren.

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 ist: Der Template-String kann auch Funktionen aufrufen:

function string(){
  return "zzw likes es6!";
}
console.log(`你想说什么?嗯,${string()}`);
Nach dem Login kopieren
Ergebnis Wie unten gezeigt:

Wenn das Ergebnis der Funktion außerdem keine Zeichenfolge ist, wird es gemäß den allgemeinen Regeln in eine Zeichenfolge umgewandelt:

function string(){
    return 666;
  }
  console.log(`你想说什么? 嗯,${string()}`);
Nach dem Login kopieren
Das Ergebnis sieht wie folgt aus:

Hier wird die Zahl 666 tatsächlich in die Zeichenfolge 666 umgewandelt.

8 Variable in ${} Wenn sie nicht benannt ist, 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 in ${} eingeben, und das Wissensergebnis gibt immer noch eine Zeichenfolge zurück:

console.log(`你想说什么?嗯,${"其实我不是变量~"}`);
Nach dem Login kopieren
Das Ergebnis ist wie folgt:

10. Wenn Sie den Vorlagenstring selbst zitieren möchten, 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:

Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie benutzerdefinierte Mehrfachauswahlereignisse in WeChat-Miniprogrammen

So erstellen Sie- reagieren – Die App wurde so geändert, dass sie mehrere Seiten unterstützt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ES6-Vorlagenzeichenfolgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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