Cum se utilizează literele de șablon ES6 în JavaScript
În programare, termenul “literal” se referă la notarea valorilor în cod. De exemplu, notăm o valoare de șir cu a string literal care sunt caractere închise în ghilimele duble sau simple ("Foo", 'bar', "Acesta este un șir!").
Template literals au fost introduse în ECMAScript 6. Acestea funcționează destul de asemănător cu literalul de șir; ei produc valorile șablonului și valorile șablonului brut, ambele fiind șiruri de caractere.
Cu toate acestea, spre deosebire de literalul de șir, literalul șablonului poate produce valori care sunt corzi multi-căptușite, ceva ce puteți obține într-un literal șir numai prin adăugarea de caractere noi (\ n) la ea.
Șabloanele literale pot, de asemenea creați șiruri de caractere cu alte valori (derivate din expresii) pentru care ar trebui să utilizați plus operator într-un literal șir ("ID-ul dvs. este:" + idNo; Unde nu stiu este o expresie variabilă cu o valoare numerică).
Toate aceste caracteristici fac ca literalul șablonului să fie mai preferat creați valorile șirului.
Sintaxa literalurilor de șabloane
Delimitatorul unui literal șablon este backtick ' caracter (de asemenea, știu ca caracter retrovoc sau simbol accent grav). O expresie în literal (a cărei valoare este evaluat în timpul execuției și inclusă în valoarea finală produsă de literal) este inclusă în acolade cu precedent semn de dolar $.
'string $ someExpression mai multe șir de caractere'
Aici sunt câteva exemple de literali șablon producând neschimbat, substituit (expresii înlocuite cu valorile evaluate) și multi-căptușită siruri de caractere.
console.log ( 'bună'); // hello var nume = "Joan"; console.log ('salut $ name'); // hello Joan console.log ("Dragă Joan, Bun venit"); // Dragă Joan, // Bine ai venit. Escaping & valoroase șablon valori
Într - un literal șablon, ' (Backtick), \ (înapoi), și $ (semnul dolarului) ar trebui să fie scăpat folosind caracter de evacuare \ dacă acestea urmează să fie incluse în valoarea șablonului.
În mod implicit, toate secvențele de evacuare dintr-un șablon literal sunt ignorate. Dacă doriți să îl includeți în ieșire, trebuie să îl utilizați valoarea șablonului brut.
console.log ('cod inline in markup: \' code \ "); // cod inline in marcare: 'code' var name =" Joan "; console.log ('hello \ $ name / hello $ name .console.log (String.raw'hello \ $ name.); // hello \ $ name. String.raw metodă afișează valorile șablonului brut (formularul brut al unui șablon literal). În codul de mai sus, apelul funcției din brut metoda este menționată ca “etichetat șablon”.
Taguri șabloane
Un șablon etichetat este a apel Unde, în locul parantezelor obișnuite (cu parametri opționali) în afară de numele funcției, există un șablon literal din care funcția își are argumentele.
Deci, în loc de a apela o funcție ca aceasta:
foo (ArgumentsForFoo);
Se cheamă astfel:
foo'ATemplateStringProvidingArgumentsForFoo ";
Functia foo este numit a tag-ul. Primul său argument primit din literalul șablon este un mulțime numit obiect șablon.
Obiectul șablonului (un șir) se menține toate valorile șirului interpretată din literal șablon și are a brut proprietate (o altă matrice) pe care o deține toate valorile șirului brut (ne-scăpat) interpretate de la același literal.
În urma obiectului șablon, argumentele funcției de tag includ toate evaluat valori externe prezente în acel literal (cele cuprinse în bretelele curl $ ).
În codul de mai jos, foo este creată funcția să își exprime argumentele. Funcția este apoi apelată în stilul șablonului marcat, cu un literal șablon care poartă două expresii (Nume și id).
var nume = "Ioan"; var id = 478; foo'hello $ name. ID-ul dvs. este: $ id. '; funcția foo () console.log (argumente [0]); // array ["hello", "idul tău este:", "." ] console.log (argumente [1]); // John console.log (argumente [2]); // 478
Primul argument rezultat este obiect șablon purtând toate șirurile interpretate din literal șablon, al doilea și al treilea argument sunt valorile evaluate a expresiilor, Nume și id.
brut proprietate
Așa cum am menționat mai sus, obiectul șablon are un a proprietatea numită brut care este o matrice care conține toate valorile șirului brut (ne-scăpat) interpretat de la literal. Acesta este modul în care puteți accesa brut proprietate:
var nume1 = "Ioan", nume2 = "Joan"; foo'hello \ $ name1, $ name2, cum sunteți amândoi? '; funcția foo () console.log (argumente [0]); // Array ["hello $ name1", ", cum sunteți amândoi?"] Console.log (argumente [0] .raw); // Array ["hello \ $ name1", "," cum sunteți amândoi? "] Console.log (argumente [1]); // Joan
Utilizați cazuri de șabloane etichetate
Șabloanele etichetate sunt utile atunci când este necesar rupe un șir în părți separate, cum ar fi adesea cazul într-o adresă URL sau în parsarea unei limbi. Veți găsi o colecție de ați marcat exemple de șablon aici.
Altele decât IE, literele șablon sunt suportate în toate browserele importante.
Mai jos, puteți găsi câteva exemple de funcții de etichete cu semnături diferite care reprezintă argumentele:
var nume = "Ioan"; foo'hello $ name, cum ești amândoi? '; bar'hello $ name, cum sunteți amândoi? '; funcția foo (... args) console.log (args); // Array [Array ["hello", "how are you both?"], "John"] barul de funcții (strVals, ... exprVals) console.log (strVals); // Array ["hello", "cum sunteți amândoi?" ] console.log (exprVals); // Array ["John"]
În bar funcție, primul parametru (strVals) este obiect șablon iar cea de-a doua (care utilizează sintaxa răspândită) este o matrice care s-a adunat toate valorile expresiei evaluate din literalul șablon trecut la funcție.
Puneți șirul împreună
Dacă dorești obține întreaga sentință (derivat din literal) în interiorul funcției de tag, concatenarea tuturor valorilor a matricelor care poartă șirul șablonului și valorile expresiei evaluate. Asa:
funcția foo (strs, ... exprs) // dacă există expresii incluse în literal dacă (exprs.length! == 0) var n = strs.length - 1, rezultat = "; pentru (var i = 0 ; i < n; i++) result += strs[i] + exprs[i]; result += strs[n]; console.log(result); //"Hello John." // if there are no expressions included in the literal else console.log(strs[0]); name = 'John'; foo'Hello $name.';
RTS array hold toate corzile găsite în literal și exprs deține toate valorile expresiei evaluate de la literal.
Dacă există o singură valoare de expresie, concatenați fiecare valoare a matricei RTS (cu excepția ultimului) cu aceeași valoare a indexului exprs. Apoi, la sfârșit, adăugați ultima valoare a RTS matricei la șirul concatenat, formând o propoziție completă pe aici.
