Litere de șablon JavaScript (șiruri de șabloane)

Cuprins

Șablon Literal pentru șiruri
Șiruri cu mai multe linii folosind litere de șablon
Expresie Interpolare
Șabloane etichetate

În acest tutorial, veți afla despre Litere de șablon JavaScript (șiruri de șabloane) cu ajutorul exemplelor.

Literalele șablonului (șiruri șablon) vă permit să utilizați șiruri sau expresii încorporate sub forma unui șir. Ele sunt închise în backticks ``. De exemplu,

 const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!

Notă : literalul șablonului a fost introdus în 2015 (cunoscut și ca ECMAScript 6 sau ES6 sau ECMAScript 2015). Este posibil ca unele browsere să nu accepte utilizarea literelor șablon. Accesați asistența JavaScript Template Literal pentru a afla mai multe.

Șablon Literal pentru șiruri

În versiunile anterioare de JavaScript, ați utiliza un ghilimel simplu ''sau un ghilimel dublu ""pentru șiruri. De exemplu,

 const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error

Pentru a utiliza aceleași ghilimele în interiorul șirului, puteți utiliza caracterul de evacuare .

 // escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code

În loc să utilizați caractere de evacuare, puteți utiliza literele șablonului. De exemplu,

 const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;

După cum puteți vedea, literele șablonului nu numai că facilitează includerea cotațiilor, ci și fac codul nostru să pară mai curat.

Șiruri cu mai multe linii folosind litere de șablon

Literalele șablon facilitează, de asemenea, scrierea șirurilor multiliniu. De exemplu,

Folosind literele șablonului, puteți înlocui

 // using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)

 const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)

Rezultatul ambelor programe va fi același.

 Acesta este un mesaj lung care se întinde pe mai multe linii din cod.

Expresie Interpolare

Înainte de JavaScript ES6, ați folosi +operatorul pentru a concatena variabile și expresii într-un șir. De exemplu,

 const name = 'Jack'; console.log('Hello ' + name); // Hello Jack

Cu literele șablon, este puțin mai ușor să includeți variabile și expresii în interiorul unui șir. Pentru aceasta, folosim $(… )sintaxa.

 const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)

Ieșire

 Salut Jack Suma de 4 + 5 este 9 Foarte mare

Procesul de atribuire a variabilelor și expresiilor în interiorul șablonului literal este cunoscut sub numele de interpolare.

Șabloane etichetate

În mod normal, ați folosi o funcție pentru a transmite argumente. De exemplu,

 function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);

Cu toate acestea, puteți crea șabloane etichetate (care se comportă ca o funcție) folosind literalele șablonului. Utilizați etichete care vă permit să analizați literele șablonului cu o funcție.

Șablonul etichetat este scris ca o definiție a funcției. Cu toate acestea, nu treceți paranteze ()când apelați literalul. De exemplu,

 function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);

Ieșire

 („Hello Jack”)

O serie de valori de șir sunt transmise ca primul argument al unei funcții de etichetă. De asemenea, puteți transmite valorile și expresiile ca argumente rămase. De exemplu,

 const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);

Ieșire