JavaScript-strengformat - Sådan bruges strenginterpolation i JS

Tilføjelsen af ​​skabelonbogstaver i ECMAScript 6 (ES6) giver os mulighed for at interpolere strenge i JavaScript.

I enklere ord kan vi bruge pladsholdere til at injicere variabler i en streng. Du kan se et eksempel på strenginterpolering ved hjælp af skabelonbogstaver i uddraget nedenfor:

const age = 4.5; const earthAge = `Earth is estimated to be ${age} billion years old.`; console.log(earthAge); 

Først og fremmest vil du se, at vi bruger backticks til skabelonbogstaver. Derudover har vi også formatet ${placeholder}, som giver os mulighed for at indsætte en dynamisk værdi i strengen. Alt indeni ${}evalueres som JavaScript.

For eksempel kunne vi skrive Earth is estimated to be ${age + 10} billion years old., og det fungerede som om vi gjorde det const age = 4.5 + 10;.

Hvordan gjorde vi det før?

Før skabelonbogstaver ville vi have gjort det sådan:

const earthAge = "Earth is estimated to be " + age + " billion years old."; 

Som du kan se, har vi allerede masser af tilbud for en simpel streng. Forestil dig, at vi skal indsætte en håndfuld variabler. Det kan hurtigt omdannes til en kompleks streng, der ikke er særlig læsbar. Skabelonbogstaver gør strenge således renere og mere læsbare.

Dette er dog kun en sag. Lad os se flere anvendelsessager til skabelonbogstaver.

Strenge med flere linjer

En anden praktisk brug af skabelonstrenge er streng med flere linjer. Før skabelonbogstaver brugte vi \ntil nye linjer, som i console.log('line 1\n' + 'line 2').

For to linjer kan dette være fint. Men forestil dig, at vi vil have fem linjer. Igen bliver strengen unødigt kompleks.

const earthAge = `Earth is estimated to be ${age} billion years old. Scientists have scoured the Earth searching for the oldest rocks to radiometrically date. In northwestern Canada, they discovered rocks about 4.03 billion years old. `; 

Ovenstående uddrag viser endnu en gang, hvor ligetil og rent det bliver at skrive streng med flere linier med skabelonbogstaver.

Som en øvelse, prøv at konvertere ovenstående streng til at bruge sammenkædning og ny linje \n.

Udtryk

Med skabelonbogstaver kan vi også bruge udtryk i strengene. Hvad betyder det?

For eksempel kunne vi bruge matematiske udtryk som at gange to tal. Uddraget nedenfor illustrerer netop det:

const firstNumber = 10; const secondNumber = 39; const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`; console.log(result); 

Uden skabelonbogstaver skulle vi gøre noget som dette:

const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + "."; 

At skrive en streng som ovenstående kan hurtigt blive kompleks og forvirrende. Som vi fortsætter med at gøre skabelonbogstaver det nemmere og mere elegant at integrere udtryk i strengen.

Ternær operatør

Med strenginterpolationen kan vi endda bruge en ternær operator inde i en streng. Dette giver os mulighed for at kontrollere værdien af ​​en variabel og vise forskellige ting afhængigt af den værdi.

Lad os se på eksemplet nedenfor:

const drinks = 4.99; const food = 6.65; const total = drinks + food; const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.` console.log(result); 

I ovenstående eksempel kontrollerer vi, om det samlede beløb f.eks. Er mere end ti dollars.

Hvis beløbet er mere end ti, fortæller vi brugeren, at kortbetalingen afvises. Ellers accepteres kortbetalingen. Som du kan se, tillader strenginterpolation os at lave seje ting med strenge.

Konklusion

Tilføjelsen af ​​skabelonbogstaver i ES6 giver os mulighed for at skrive bedre, kortere og klarere strenge. Det giver os også muligheden for at injicere variabler og udtryk i enhver streng. I det væsentlige behandles det, som du skriver inden for de krøllede parenteser ( ${}), som JavaScript.

Således kan vi bruge skabelonbogstaver til:

  • skriv strenge med flere linjer
  • integrere udtryk
  • skriv strenge med den ternære operatør

Hvis du kan lide hvad jeg skriver, er chancerne for, at du vil elske det, jeg sender e-mail til. Overvej at abonnere på min adresseliste. Hvis du ikke er fan af nyhedsbreve , kan vi altid holde kontakten på Twitter .