JavaScript-merkkijonomuoto - merkkijonojen interpoloinnin käyttäminen JS: ssä

Mallilitraalien lisääminen ECMAScript 6: een (ES6) antaa meille mahdollisuuden interpoloida merkkijonot JavaScriptissä.

Yksinkertaisemmilla sanoilla voimme käyttää paikkamerkkejä syöttämään muuttujia merkkijonoon. Näet esimerkin merkkijonojen interpoloinnista mallilitraalien avulla alla olevasta katkelmasta:

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

Ensinnäkin huomaat, että käytämme taaksepäin mallipohjan literaaleja. Sen lisäksi meillä on myös muoto ${placeholder}, jonka avulla voimme lisätä dynaamisen arvon merkkijonoon. Kaikki sisällä oleva ${}arvioidaan JavaScriptiksi.

Voisimme esimerkiksi kirjoittaa Earth is estimated to be ${age + 10} billion years old., ja se toimisi kuin tekisimme const age = 4.5 + 10;.

Kuinka teimme sen aiemmin?

Ennen malli literaaleja, olisimme tehneet sen näin:

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

Kuten näette, meillä on jo paljon lainauksia yksinkertaisesta merkkijonosta. Kuvittele, että meidän on lisättävä kourallinen muuttujia. Se voi nopeasti muuttua monimutkaiseksi merkkijonoksi, joka ei ole kovin luettavissa. Siten malli literaalit tekevät jousista puhtaampia ja helpommin luettavia.

Tämä on kuitenkin vain yksi tapaus. Katsotaanpa lisää käyttötapauksia malli literaaleille.

Moniriviset merkkijonot

Toinen kätevä mallijonojen käyttö on moniriviset merkkijonot. Ennen malli literaaleja käytimme \nuusia rivejä, kuten console.log('line 1\n' + 'line 2').

Kahden rivin kohdalla tämä voi olla hieno. Mutta kuvittele, että haluamme viisi riviä. Jälleen merkkijono muuttuu tarpeettomasti monimutkaiseksi.

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

Yllä oleva katkelma osoittaa jälleen kerran, kuinka suoraviivaiseksi ja puhtaaksi muuttuu monirivisten merkkijonojen kirjoittaminen malli literaaleilla.

Yritä muuntaa yllä oleva merkkijono harjoituksena ketjutusta ja uutta riviä \n.

Lausekkeet

Mallilitraalien avulla voimme myös käyttää lausekkeita merkkijonoissa. Mitä tuo tarkoittaa?

Voisimme esimerkiksi käyttää matemaattisia lausekkeita, kuten moninkertaistaa kaksi lukua. Alla oleva katkelma kuvaa juuri sitä:

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

Ilman malli literaaleja, meidän olisi tehtävä jotain tällaista:

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

Yllä olevan kaltaisen merkkijonon kirjoittaminen voi nopeasti muuttua monimutkaiseksi ja hämmentäväksi. Kuten näemme jatkuvasti, malli literaalit helpottavat ja tyylikkäämpiä lausekkeiden upottamista merkkijonoon.

Ternary-operaattori

Merkkijonon interpoloinnilla voimme jopa käyttää kolmiosaista operaattoria merkkijonon sisällä. Tämän avulla voimme tarkistaa muuttujan arvon ja näyttää erilaisia ​​asioita arvosta riippuen.

Katsotaanpa alla olevaa esimerkkiä:

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

Edellä olevassa esimerkissä tarkistamme, onko kokonaissumma esimerkiksi yli kymmenen dollaria.

Jos summa on yli kymmenen, ilmoitamme käyttäjälle, että korttimaksu hylätään. Muussa tapauksessa korttimaksu hyväksytään. Kuten näette, merkkijonojen interpolointi antaa meille mahdollisuuden tehdä hienoja asioita jousilla.

Johtopäätös

ES6-mallipohjan literaalien lisääminen antaa meille mahdollisuuden kirjoittaa parempia, lyhyempiä ja selkeämpiä merkkijonoja. Se antaa meille myös mahdollisuuden pistää muuttujia ja lausekkeita mihin tahansa merkkijonoon. Pohjimmiltaan, mitä kirjoitat kiharoiden sulkujen ( ${}) sisään, sitä käsitellään JavaScriptiä.

Siten voimme käyttää mallilitraaleja:

  • kirjoittaa monirivisiä merkkijonoja
  • upottaa lausekkeita
  • kirjoita merkkijonoja kolmiosaisen operaattorin kanssa

Jos pidät siitä, mitä kirjoitan, on todennäköistä, että rakastat sitä, mitä lähetän sähköpostilla. Harkitse postituslistani tilaamista. Jos et ole uutiskirjeiden fani , voimme aina pitää yhteyttä Twitterissä .