JavaScript format niza - Kako koristiti interpolaciju niza u JS-u

Dodavanje literala predložaka u ECMAScript 6 (ES6) omogućuje nam interpoliranje nizova u JavaScript.

Jednostavnijim riječima, pomoću rezerviranih mjesta ubrizgavamo varijable u niz. Primjer interpolacije niza pomoću literatura predložaka možete vidjeti u isječku ispod:

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

Prije svega, vidjet ćete da koristimo povratne znakove za literal predložaka. Osim toga, imamo i format ${placeholder}, koji nam omogućuje umetanje dinamičke vrijednosti u niz. Sve što se nalazi unutra ${}ocjenjuje se kao JavaScript.

Na primjer, mogli bismo pisati Earth is estimated to be ${age + 10} billion years old.i to bi funkcioniralo kao da jesmo const age = 4.5 + 10;.

Kako smo to uspjeli prije?

Prije predložaka literala, učinili bismo to ovako:

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

Kao što vidite, već imamo puno citata za jednostavni niz. Zamislite da moramo umetnuti pregršt varijabli. Može se brzo transformirati u složeni niz koji nije baš čitljiv. Dakle, predložak literala čini nizove čišćim i čitljivijim.

Međutim, ovo je samo jedan slučaj. Pogledajmo više slučajeva upotrebe literala predložaka.

Višeredne žice

Još jedna korisna upotreba nizova predloška su višeredne žice. Prije literalnih predložaka koristili smo \nnove retke, kao u console.log('line 1\n' + 'line 2').

Za dva retka ovo bi moglo biti u redu. Ali zamislite da želimo pet redaka. Niz opet postaje nepotrebno složen.

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. `; 

Gornji isječak još jednom pokazuje koliko je jednostavno i čisto pisati višeredne nizove s predlošcima literala.

Kao vježbu, pokušajte pretvoriti gornji niz da biste koristili spajanje i novi redak \n.

Izrazi

S doslovnim literaturama također možemo koristiti izraze u nizovima. Što to znači?

Na primjer, mogli bismo koristiti matematičke izraze poput množenja dva broja. Isječak u nastavku ilustrira upravo to:

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

Bez predložaka literala morali bismo učiniti nešto poput ovoga:

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

Pisanje niza poput gore navedenog može brzo postati složeno i zbunjujuće. Kako neprestano vidimo, literal predložaka olakšava i elegantnije ugrađuje izraze u niz.

Ternarni operater

Uz interpolaciju niza, možemo čak koristiti i ternarni operator unutar niza. To nam omogućuje provjeru vrijednosti varijable i prikaz različitih stvari ovisno o toj vrijednosti.

Pogledajmo primjer u nastavku:

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); 

U gornjem primjeru provjeravamo je li ukupan iznos, na primjer, veći od deset dolara.

Ako je iznos veći od deset, obavještavamo korisnika da će plaćanje karticom biti odbijeno. U suprotnom, prihvaća se plaćanje karticom. Kao što vidite, interpolacija nizova omogućuje nam da sa žicama radimo cool stvari.

Zaključak

Dodavanje literala predložaka u ES6 omogućuje nam pisanje boljih, kraćih i jasnijih nizova. Također nam daje mogućnost ubrizgavanja varijabli i izraza u bilo koji niz. U osnovi, sve što napišete u kovrčave zagrade ( ${}) tretira se kao JavaScript.

Stoga literaturu predložaka možemo koristiti za:

  • zapisati višeredne nizove
  • ugraditi izraze
  • zapisati nizove s ternarnim operatorom

Ako vam se sviđa ovo što pišem, velika je vjerojatnost da bi vam se svidjelo ono što vam pošaljem e-poštom. Razmislite o pretplati na moju mailing listu. Ako niste ljubitelj biltena , uvijek možemo ostati u kontaktu na Twitteru .