Slik bruker du ES6 Template Literals i JavaScript

I programmeringen refererer begrepet "bokstavelig" til notasjonen av verdier i kode. For eksempel merker vi en strengverdi med en streng bokstavelig, som er tegn som er omsluttet i dobbelte eller enkle anførselstegn ( "foo", 'bar', "This is a string!" ).

Malte bokstaver ble introdusert i ECMAScript 6 . De jobber ganske likt med strengstavler; de produserer malverdier og råmalverdier, begge er strenger.

I motsetning til streng-bokstaver kan malte bokstaver imidlertid produsere verdier som er multi-linjede strenger, noe du bare kan oppnå i en streng, bare ved å legge til nye linjetegn ( \n ) til den.

Malte bokstaver kan også lage strenge med andre verdier (avledet av uttrykk) som du må bruke pluss operatøren i en streng bokstavelig ( "your id is:" + idNo ; hvor idNo er et variabelt uttrykk med en numerisk verdi).

Alle disse funksjonene gjør maleriske bokstaver mer foretrukket for å skape strengverdier .

Syntaks av malte bokstaver

Avgrensningen av en mal bokstavlig er backtick ` karakter (også kjent som backquote karakter eller grave aksent symbol). Et uttrykk i det bokstavelige (verdien av disse er vurdert under kjøretid og inkludert i den endelige verdien som er produsert av bokstavelig) er innelukket i krøllete braces {} med et foregående dollarskilt $ .

 `streng $ {someExpression} strengere` 

Her er noen eksempler på malte bokstaver som produserer uendret, erstattet (uttrykk erstattet med deres evaluerte verdier) og multi-linjede strenger.

 console.log ( 'hello`); // hallo var navnet = "Joan"; console.log (`hallo $ {name}`); // hallo Joan console.log (`Kjære Joan, Welcome.`); // Kjære Joan, // Velkommen. 

Unnslippe og rå malverdier

I en bokstavs bokstav, bør tegnene ` (backtick), \ (backslash) og $ (dollar sign)) unngås ved hjelp av escape-tegn \ hvis de skal inkluderes i deres malverdi.

Som standard ignoreres alle fluktsekvenser i en mal bokstavelig. Hvis du vil inkludere den i utgangen, må du bruke den raske malverdien .

 console.log (`inline code in markup: \` kode \ ``); // inline kode i markup: `code` var name =" Joan "; console.log (`hello \ $ {name} .`); // hallo $ {name}. console.log (String.raw`hello \ $ {name} .`); // hallo \ $ {navn}. 

String.raw metoden gir String.raw (den raske String.raw av en mal bokstavelig). I ovennevnte kode refereres funksjonsanropet til den raw metoden til "merket mal" .

Merkede maler

En merket mal er et funksjonsanrop der, i stedet for de vanlige parentesene (med valgfrie parametere) foruten funksjonsnavnet, er det en mal bokstavelig fra hvilken funksjonen får sine argumenter.

Så, i stedet for å kalle en funksjon som denne:

 foo (ArgumentsForFoo); 

Det kalles slik:

 foo`ATemplateStringProvidingArgumentsForFoo`; 

Funksjonen foo kalles en tag-funksjon . Dens første argument mottatt fra malen bokstavelig er en matrise kalt malobjektet .

Malen objektet (en matrise) holder alle strengverdiene tolket fra malen bokstavelig og har en raw egenskap (en annen matrise) som inneholder alle de raske (un-escaped) strengverdiene tolket fra samme bokstavelige.

Etter malingsobjektet inneholder argumentene til tag-funksjonen alle de evaluerte eksterne verdiene som er tilstede i den bokstavlige (de som følger med de krøllete båndene ${} ).

I koden nedenfor er foo funksjonen opprettet for å utføre sine argumenter . Funksjonen kalles da i den merkede malemoden, med en mal bokstavelig bære to uttrykk ( name og id ).

 var navnet = "john"; var id = 478; foo`hello $ {name}. ditt id er: $ {id} .`; funksjon foo () {console.log (argumenter [0]); // Array ["hei", ". Ditt id er:", "." ] console.log (argumenter [1]); // John console.log (argumenter [2]); // 478} 

Det første argumentet utgitt er malobjektet som bærer alle strengene som tolkes fra malen bokstavelig, det andre og tredje argumentet er de evaluerte verdiene av uttrykkene, name og id .

Den raw eiendommen

Som nevnt tidligere har malobjektet en egenskap som kalles raw som er en matrise som inneholder alle de raske (un-escaped) strengverdiene som er tolket fra malen bokstavelig. Slik får du tilgang til den raw eiendommen:

 var name1 = "John", name2 = "Joan"; foo`hello \ $ {name1}, $ {name2}, hvordan har du det begge? `; funksjon foo () {console.log (argumenter [0]); // Array ["hei $ {name1}, ", ", hvordan har du begge?"] Console.log (argumenter [0] .raw); // Array ["hei \ $ {name1}, ", ", hvordan har du begge?"] Console.log (argumenter [1]); // Joan} 

Bruk tilfeller av merkede maler

Merkede maler er nyttige når du må kutte en streng i separate deler som det ofte er tilfellet i en nettadresse, eller mens du analyserer et språk. Du finner en samling av merkede maleksempler her .

Annet enn IE støttes malte bokstaver i alle de store nettleserne .

Nedenfor finner du noen eksempler på tagfunksjoner med forskjellige signaturer som representerer argumentene:

 var navnet = "john"; foo`hello $ {name}, hvordan går det med dere begge? `; bar'hello $ {name}, hvordan går det med dere begge? `; funksjon foo (... args) {console.log (args); // Array [Array ["hei", ", hvordan har du begge?"], "John"]} funksjonslinjen (strVals, ... exprVals) {console.log (strVals); // Array ["hei", "hvordan går det med dere begge?" ] console.log (exprVals); // Array ["John"]} 

I bar funksjonen er den første parameteren ( strVals ) mal-objektet, og den andre (som bruker spredningssyntaxen) er en matrise som samlet alle evaluerte uttrykkverdier fra malen bokstavelig passert til funksjonen.

Sett strengen sammen

Hvis du vil oppnå hele setningen (avledet fra bokstavelig) inne i tag-funksjonen, skal du sammenkoble alle verdier av arrays som bærer malstrengene og de evaluerte uttrykkverdiene. Som dette:

 funksjon foo (strs, ... exprs) {// hvis det er noen uttrykk som er inkludert i bokstavlig hvis (eksprs.length! == 0) {var n = strs.length - 1, result = ''; for (var i = 0; i <n; i ++) {resultat + = strs [i] + exprs [i]; } resultat + = strs [n]; console.log (resultat); // "Hei John." } // hvis det ikke er noen uttrykk som er inkludert i den bokstavelige andre konsollen.log (strs [0]); } navn = 'john'; foo`Hello $ {name} .`; 

strs arrayet inneholder alle strengene som finnes i bokstavene, og exprs inneholder alle de evaluerte exprs fra det bokstavelige.

Hvis det til og med er en ekspressionsverdi, sammenkoble hver strs av strs (unntatt den siste) med samme indeksverdien av exprs . Deretter til slutt legger du til den siste verdien av strs arrayet til den strs strengen, og danner en komplett setning på denne måten.

Sammenligne skrifttyper rett i nettleseren din med vende typisk

Hver designer trenger å vite litt om skrifttyper . De er byggesteinene av innhold, og de kan lage eller bryte en lesbar nettside.Med Flipping Typical web app kan du sammenligne alle skrifter installert på maskinen din for å se hvilke som passer best. Du kan skrive inn en hvilken som helst frase i toppboksen og se umiddelbare oppdateringer for alle de forskjellige skriftene. D

(Tekniske og design tips)

Nye versus nåværende kunder - som er viktigere?

Hvis du er en frilansdesigner som serverer et målmarked som ser ut til å krympe eller ikke gir deg nok forretninger, er det kanskje på tide å bytte opp kundebase. Dette kan gjøres på en rekke forskjellige måter, men innebærer vanligvis å ta en beslutning om å oppsøke nye kunder eller oppsvinge og styrke forholdet til kundene du allerede har. Vi går ov

(Tekniske og design tips)