Az ECMAScript 6 (ES6) sablon literálok hozzáadása lehetővé teszi számunkra a karakterláncok interpolálását a JavaScript-ben.

Egyszerűbb szavakkal, helyőrzőkkel beírhatjuk a változókat egy karakterláncba. Az alábbi kódrészletben láthat egy példát a sablon literálok használatával végrehajtott karakterlánc-interpolációra:

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

Először látni fogja, hogy backtickeket használunk a sablon literálokhoz. Emellett megvan a formátumunk is ${placeholder}, amely lehetővé teszi számunkra, hogy dinamikus értéket illesszünk be a karakterláncba. Minden, ami benne ${}van, JavaScript-nek minősül.

Például írhatnánk, Earth is estimated to be ${age + 10} billion years old.és úgy működne, mintha mi const age = 4.5 + 10;.

Hogyan csináltuk korábban?

A sablon literálok előtt így tettük volna:

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

Mint láthatja, rengeteg idézetünk van egy egyszerű karakterláncra. Képzelje el, hogy be kell illesztenünk egy maroknyi változót. Gyorsan átalakulhat komplex húrokká, amely nem túl olvasható. Így a sablon literálok tisztábbá és olvashatóbbá teszik a húrokat.

Ez azonban csak egy eset. Nézzük meg a sablon literálok további felhasználási eseteit.

Többsoros húrok

A sablonhúrok másik praktikus használata a többsoros karakterlánc. A sablon literálok előtt \núj sorokat használtunk , mint a console.log('line 1\n' + 'line 2').

Két sornál ez rendben lehet. De képzelje el, hogy öt sort akarunk. A húr ismét szükségtelenül bonyolulttá válik.

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

A fenti részlet ismét megmutatja, mennyire egyszerű és tiszta lesz többsoros karakterláncokat írni sablon literálokkal.

Gyakorlatként próbálja meg átalakítani a fenti karakterláncot összefűzés és új vonal használatára \n.

Kifejezések

A sablon literálok segítségével kifejezéseket is használhatunk a karakterláncokban. Az mit jelent?

Például használhatunk matematikai kifejezéseket, például két szám szorzását. Az alábbi részlet pontosan ezt szemlélteti:

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

Sablon literálok nélkül ilyesmit kellene tennünk:

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

A fentiekhez hasonló karakterlánc írása gyorsan összetetté és zavarossá válhat. Amint folyamatosan látjuk, a sablon literálok megkönnyítik és elegánsabbá teszik a kifejezések beágyazását a karakterláncba.

Háromszoros üzemeltető

A húrinterpolációval akár egy hármas operátort is használhatunk a húr belsejében. Ez lehetővé teszi számunkra, hogy ellenőrizzük a változó értékét, és az értéktől függően különböző dolgokat jelenítsünk meg.

Nézzük meg az alábbi példát:

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

A fenti példában ellenőrizzük, hogy a teljes összeg meghaladja-e például a tíz dollárt.

Ha az összeg meghaladja a tízet, értesítjük a felhasználót, hogy a kártyás fizetést elutasítják. Ellenkező esetben a kártyás fizetést elfogadják. Mint látható, a húrinterpoláció lehetővé teszi számunkra, hogy hűvös dolgokat hajtsunk végre húrokkal.

Következtetés

Az ES6-ban sablon literálok hozzáadása lehetővé teszi számunkra, hogy jobb, rövidebb és világosabb húrokat írjunk. Ez azt is lehetővé teszi számunkra, hogy a változókat és kifejezéseket bármilyen karakterláncba injektáljuk. Lényegében bármit is ír a göndör zárójelek közé ( ${}), JavaScript-ként kezelik.

Így sablon literálokat használhatunk:

• írjon többsoros húrokat
• beágyazott kifejezéseket
• írjon karakterláncokat a ternáris operátorral

Ha tetszik, amit írok, nagy eséllyel imádnád, amit e-mailben küldök. Fontolja meg, hogy iratkozzon fel a levelezőlistámra. Ha nem rajongsz a hírlevelekért , mindig tarthatjuk a kapcsolatot a Twitteren .