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 .