suchen

Heim >Web-Frontend >js-Tutorial >Beispielfreigabe für ES6-Vorlagenzeichenfolgen

Beispielfreigabe für ES6-Vorlagenzeichenfolgen

小云云
小云云Original
2018-01-26 16:44:121809Durchsuche

Eine neue Art von String-Literal-Syntax, die in ES6 eingeführt wurde – Template-String. Technisch gesehen ist eine Vorlagenzeichenfolge ein Zeichenfolgenliteral, das Ausdrücke in ein Zeichenfolgenliteral einbettet. Einfach ausgedrückt handelt es sich um einen String mit zusätzlicher Variablenfunktion.

ES6 stellt uns Vorlagenzeichenfolgen zur Verfügung und die Syntax verwendet Backticks. Vorlagenzeichenfolgen haben die folgenden drei Vorteile:

  • Mehrzeiliger Text

  • Einfügung von Variablen in Zeichenfolgen

  • Ausdrücke in Zeichenfolgen einfügen

Grundlegende Syntax

Die Deklaration von Vorlagenzeichenfolgen ist dieselbe wie die von ES5-Zeichenfolgen. 

// ES5
var name = 'xixi';
console.log(name);// xixi

// ES6
let name4ES6 = `一步`;
console.log(name4ES6);// 一步

Mehrzeiliger Text

In der Zeit, als Jquery populär war, haben wir häufig HTML-Fragmente gespleißt und dann Knoten ersetzt. Schreiben Sie einen ES5-Code, den jeder erleben kann: 

var str = '<html>'
+ '<p>啦拉拉</p>'
+ '<p>xixixi</p>'
+ '</html>';
console.log(str);// <html><p>啦拉拉</p><p>xixixi</p></html>

ES6 unterstützt mehrzeiligen Text und der obige Code ist viel einfacher zu implementieren. 

let str4ES6 = `<html>
 <p>啦拉拉</p>
 <p>xixixix</p>
</html>`;

console.log(str4ES6);

Sie können Variablen oder Ausdrücke einfügen

// ES5
var name = 'xixi';
var age = 27;
var info = 'my name is ' + name + ' , age is ' + age + '.';
console.log(info);// my name is xixi , age is 27.

ES6-Vorlagenzeichenfolgen sind viel einfacher zu implementieren. Die Schlüsselsyntax lautet ${}, in die jeder beliebige js-Ausdruck eingefügt werden kann. 

let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

Zusammenfassung

ES6-Vorlagenzeichenfolge ist so einfach und benutzerfreundlich.

Verwandte Empfehlungen:

Detaillierte Erläuterung der gegenseitigen Konvertierung zwischen JS-Zahlen und Strings

Eine Sammlung häufig verwendeter Methoden zum Abfangen von Strings in JS

So verbinden Sie Ajax-JSON und String mithilfe von JQuery

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

json jquery ajax html es6 字符串 JS
Stellungnahme：
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
Vorheriger Artikel：Ausführliche Erläuterung des Beispiels für die Registerkartenbeschriftung von jqueryUINächster Artikel：Ausführliche Erläuterung des Beispiels für die Registerkartenbeschriftung von jqueryUI

In Verbindung stehende Artikel

Mehr sehen