„JavaScript“ eilutės formatas - kaip naudoti eilutės interpoliaciją JS

ECMAScript 6 (ES6) pridėjus šablonų literalus, galima interpoluoti eilutes „JavaScript“.

Paprasčiau tariant, galime naudoti vietos rezervavimo ženklus kintamiesiems į eilutę. Žemiau esančiame fragmente galite pamatyti eilučių interpoliacijos, naudojant šablonų literalus, pavyzdį:

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

Visų pirma, pamatysite, kad šablonų literalams naudojame backticks. Be to, mes taip pat turime formatą ${placeholder}, kuris leidžia į eilutę įterpti dinaminę vertę. Viskas, kas ${}yra viduje , vertinama kaip „JavaScript“.

Pavyzdžiui, mes galėtume rašyti Earth is estimated to be ${age + 10} billion years old., ir tai veiktų taip, lyg mes tai darytume const age = 4.5 + 10;.

Kaip mes tai padarėme anksčiau?

Prieš šablonų literalus mes būtume tai padarę taip:

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

Kaip matote, jau turime daug paprastos eilutės citatų. Įsivaizduokite, kad turime įterpti saujelę kintamųjų. Tai gali greitai transformuotis į sudėtingą eilutę, kuri nėra labai įskaitoma. Taigi, šabloniniai literalai daro stygas švaresnes ir lengviau skaitomas.

Tačiau tai tik vienas atvejis. Pažiūrėkime daugiau šabloninių literatų naudojimo atvejų.

Kelių eilučių stygos

Kitas patogus šablonų eilučių naudojimas yra kelių eilučių eilutės. Prieš šablonų literalus, mes naudojome \nnaujas eilutes, kaip console.log('line 1\n' + 'line 2').

Dėl dviejų eilučių tai gali būti gerai. Bet įsivaizduokite, kad norime penkių eilučių. Vėlgi, eilutė tampa be reikalo sudėtinga.

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

Pirmiau pateiktas fragmentas dar kartą parodo, kaip paprasta ir švaru tampa rašyti kelių eilučių eiles su šabloniniais literalais.

Kaip pratimą pabandykite paversti aukščiau pateiktą eilutę naudoti sujungimą ir naują eilutę \n.

Išraiškos

Naudodami šabloninius literatus, eilutėse galime naudoti ir posakius. Ką tai reiškia?

Pavyzdžiui, galėtume naudoti matematines išraiškas, pvz., Padauginti du skaičius. Toliau pateiktas fragmentas iliustruoja būtent tai:

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

Be šabloninių literatų turėtume padaryti kažką panašaus:

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

Parašius tokią eilutę kaip pirmiau, gali greitai pasidaryti sudėtinga ir painu. Kaip mes nuolat matome, šabloniniai literalai palengvina ir puošia išraiškų įtvirtinimą eilutėje.

Trinaris operatorius

Naudodami eilutės interpoliaciją, eilutės viduje galime naudoti net trijų komponentų operatorių. Tai leidžia mums patikrinti kintamojo vertę ir rodyti skirtingus dalykus, priklausomai nuo tos vertės.

Pažvelkime į toliau pateiktą pavyzdį:

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

Ankstesniame pavyzdyje mes patikriname, ar, pavyzdžiui, bendra suma yra didesnė nei dešimt dolerių.

Jei suma yra didesnė nei dešimt, pranešame vartotojui, kad mokėjimas kortele bus atmestas. Kitu atveju mokėjimas kortele priimamas. Kaip matote, stygų interpoliacija leidžia mums atlikti šaunius dalykus su eilutėmis.

Išvada

ES6 pridėjus šablonų literalus, galima rašyti geresnes, trumpesnes ir aiškesnes eiles. Tai taip pat suteikia mums galimybę į bet kurią eilutę įterpti kintamuosius ir išraiškas. Iš esmės viskas, ką rašote garbanotuose skliaustuose ( ${}), laikoma „JavaScript“.

Taigi, mes galime naudoti šablonų literalus:

  • rašyti kelių eilučių eilutes
  • įdėti posakius
  • rašyti eilutes su trinariu operatoriumi

Jei jums patinka tai, ką aš rašau, greičiausiai jums patiks tai, ką aš rašau el. Apsvarstykite galimybę užsiprenumeruoti mano adresų sąrašą. Jei nesate naujienlaiškių mėgėjas , mes visada galime palaikyti ryšį „ Twitter“ .