Kako koristiti ES6 predložak literala u JavaScriptu
U programiranju, pojam “doslovan” odnosi se na zapis vrijednosti u kodu. Na primjer, vrijednost stringa ne označavamo s string literal koje su znakovi u dvostrukim ili pojedinačnim navodnicima ("Foo", 'bar', "Ovo je niz!").
Literali predložaka su uvedene u ECMAScript 6. Djeluju vrlo slično stringovima; oni proizvode vrijednosti predloška i vrijednosti sirovih predložaka, od kojih su oba žice.
Međutim, za razliku od string literala, literali predložaka mogu proizvesti vrijednosti koje su višeslojni nizovi, nešto što možete postići u literalnom nizu samo pomoću dodavanje novih znakova u retku (\ n) na njega.
Mogu se koristiti i literali predložaka stvoriti nizove s drugim vrijednostima (izvedeno iz izraza) za koje biste morali koristiti plus operator u literalnom nizu ("vaš ID je:" + idNo; gdje idNo je varijabilni izraz s numeričkom vrijednošću).
Sve ove značajke čine predložke literalima poželjnijim stvoriti vrijednosti niza.
Sintaksa literala predložaka
Razdjelnik literalnog obrasca je backtick ' lik (također je poznato kao znak natrag ili znak naglašavanja). Izraz unutar literala (čija je vrijednost tijekom vremena izvođenja i uključeni u konačnu vrijednost koju je proizveo doslovni) kovrčava zagrada s prethodni znak za dolar $.
'niz $ someExpression više nizova'
Ovdje su neke primjeri literatura predložaka proizvodnju nepromijenjen, supstituirani (izrazi zamijenjeni njihovim procijenjenim vrijednostima) i više obložen žice.
console.log ( 'halo'); // hello var name = "Joan"; console.log ('hello $ name'); // hello Joan console.log ('Dragi Joan, dobrodošli.'); // Poštovani Joan, // Dobrodošli. Izlazne i sirove vrijednosti predložaka
U doslovnom obrascu, ' (Backtick), \ (obrnuta kosa crta) i $ znakovi za dolar treba pobjeći koristiti znak za bijeg \ ako se trebaju uključiti u njihovu vrijednost predloška.
Po defaultu, sve izlazne sekvence u literaturi predložaka su zanemarena. Ako ga želite uključiti u izlaz, trebate ga koristiti vrijednost sirovog predloška.
console.log ('inline kod u markupu:' code '); // inline kod u markupu:' code 'var name = "Joan"; console.log (' hello name. '); / / hello $ name. console.log (String.raw'hello $ name. '); // hello \ t. String.raw način izlazi sirove vrijednosti predložaka (neobrađeni nizni oblik predložka). U gornjem kodu, poziv funkcije sirov metoda naziva se “označio je predložak”.
Označeni predlošci
Označeni predložak je poziva gdje, umjesto uobičajenih zagrada (s dodatnim parametrima) osim naziva funkcije, postoji predložak doslovno iz koje funkcija dobiva argumente.
Dakle, umjesto da pozovete funkciju kao što je ova:
foo (ArgumentsForFoo);
Zove se ovako:
foo'ATemplateStringProvidingArgumentsForFoo ';
Funkcija foo naziva se a oznaka. Njegov prvi argument primljen od literalnog obrasca je red se zove objekt predloška.
Objekt predloška (niz) ima sve vrijednosti niza interpretirati iz doslovnog predloška i ima sirov svojstvo (drugi niz) koji vrijedi sve sirove vrijednosti (bez izlaza) iz istog doslovnog.
Slijedeći objekt predloška, argumenti funkcije oznake uključuju svi procijenjen vanjske vrijednosti prisutni u tom doslovnom (oni zatvoreni u vitičastim zagradama $ ).
U donjem kodu, foo stvorena je funkcija iznijeti svoje argumente. Funkcija se tada zove u označenom predlošku, s doslovnim predložkom s dva izraza (Ime i iskaznica).
var ime = "Ivan"; var id = 478; foo'hello $ name. vaš ID je: $ id. '; funkcija foo () console.log (argumenti [0]); // Array ["hello", ". Vaš ID je:", "." ] console.log (argumenti [1]); // John console.log (argumenti [2]); // 478
Prvi izlazni argument je objekt predloška noseći sve nizove interpretirane iz literarnog obrasca, drugi i treći argument su vrijednosti izraza, Ime i iskaznica.
sirov svojstvo
Kao što je već spomenuto, objekt predloška ima a imenom sirov koji je niz koji sadrži sve sirove vrijednosti (bez izlaza) tumačiti iz doslovnog obrasca. Ovako možete pristupiti sirov nekretnine:
var name1 = "Ivan", ime2 = "Joan"; foo'hello $ name1, $ name2, kako ste oboje? '; funkcija foo () console.log (argumenti [0]); // Array ["hello $ name1,", ", kako ste oboje?"] Console.log (argumenti [0] .raw); // Array ["hello name1,", ", kako ste oboje?"] Console.log (argumenti [1]); // Joan
Koristite slučajeve označenih predložaka
Označeni predlošci korisni su kada je potrebno razbiti niz u zasebne dijelove, kao što je to često slučaj u URL-u, ili dok analizirate jezik. Naći ćete zbirku ovdje su označili primjere predložaka.
Osim IE, literalni obrasci su podržan u svim većim preglednicima.
U nastavku možete pronaći neke primjere funkcija oznaka s različitih potpisa koji predstavljaju argumente:
var ime = "Ivan"; foo'hello $ name, kako ste oboje? '; bar'hello $ name, kako ste oboje? '; funkcija foo (… args) console.log (args); // Array [Array ["hello", "kako ste oboje?"], "John"] traka s funkcijama (strVals,… exprVals) console.log (strVals); // Array ["hello", "kako ste oboje?" ] console.log (exprvals); // Array ["John"]
U bar funkcija, prvi parametar (strVals) je objekt predloška a drugi (koji koristi rasprostranjenu sintaksu) je skup koji se prikuplja sve vrijednosti izraženih izraza iz doslovnog predloška koji je proslijeđen funkciji.
Spoji niz
Ako želiš dobiti cijelu rečenicu (izvedeno iz doslovnog) unutar funkcije oznake, spojiti sve vrijednosti nizova koji nose nizove predložaka i vrednovane vrijednosti izraza. Kao ovo:
funkcija foo (strs,… exprs) // ako postoje izrazi uključeni u literal if (exprs.length! == 0) var n = strs.length - 1, result = "; for (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.';
STRs polje drži sve žice pronađena u doslovnom i exprs drži sve vrijednosti izraženih izraza iz doslovnog.
Ako postoji čak i jedna vrijednost izraza, spojite svaku vrijednost polja STRs (osim posljednje) s vrijednošću istog indeksa od exprs. Zatim, na kraju, dodajte posljednju vrijednost STRs niz do spojenog niza, formiranje cjelovite rečenice ovuda.
