Beispielfreigabe für ES6-Vorlagenzeichenfolgen-js-Tutorial-php.cn

Beispielfreigabe für ES6-Vorlagenzeichenfolgen

小云云

Freigeben： 2018-01-26 16:44:12

Original

1771 Leute haben es durchsucht

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);// 一步

Nach dem Login kopieren

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>

Nach dem Login kopieren

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);

Nach dem Login kopieren

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.

Nach dem Login kopieren

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!

Nach dem Login kopieren

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!