Einführung in die Verwendung von Vorlagenzeichenfolgen in ES6 (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von Vorlagenzeichenfolgen in ES6. Ich hoffe, dass er Ihnen als Referenz dienen wird.

Überblick

Nach dem Aufkommen von Vorlagenzeichenfolgen kann die Debatte darüber, ob einfache Anführungszeichen oder doppelte Anführungszeichen besser sind, aus der Phase der Geschichte entfernt werden. ` sind die besten !

Syntax

Einzeiliger Text

`string text`

Mehrere Textzeilen

`string text line 1
 string text line 2`

Inline-Ausdrücke

`string text ${expression} string text`

Tag-Syntax (nicht besonders beliebt it)

tag `string text ${expression} string text`

Einzeiliger Text

Kümmern Sie sich überhaupt nicht um einfache Anführungszeichen und doppelte Anführungszeichen ` Das, was Sie gewinnen, muss verloren gehen

let single=`string text, '' ""\`` // "string text, '' ""`"

Bei mehrzeiligem Text besteht kein Grund zur Sorge über das Codierungskonvertierungsproblem von Zeilenumbrüchen

kann auch verschwindenn

let multip=`string text line 1
 string text line 2`
 // "string text line 1
 //  string text line 2"

rrree

Ausdruck

Das ist das größte Die Rolle von Template-Strings ist sehr nützlich.

Bessere Lesbarkeit und weniger fehleranfälliges String-Spleißen

所以我们可以这么写代码
"
let dom=`
    我要换行
    我还要换行
`
"
虽然好像没什么卵用

Sie kann Ausdrücke einbetten. Ausdrücke können auch komplex sein, werden jedoch nicht empfohlen. Der erste Parameter

der Originalzeichenfolge

speichert die Originalzeichenfolge

let name='jack',age=23
let summary=`my name is ${name}, age is ${age}`
console.log(summary) // "my name is jack, age is 23"

Der Effekt bei Verwendung von

beträgt zwei Zeichen.

let name='jack',age=23
let summary='my name is ' + name + ', age is ' + age
console.log(summary) // "my name is jack, age is 23"

babel escape

Quellcode

let num1 = 1, num2 = 2
`${num1} + ${num2} = ${num1 + num2}` // '1 + 2 = 3'

Übersetzt

let inner=`${`${'1'}`}` // 1

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Vorlagenzeichenfolgen in ES6 (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!