Ang isang bagong elemento na idinagdag sa ES6 ay ang literal na template. Isa itong bagong uri para sa paglikha ng mga string sa JavaScript na nagdaragdag ng ilang mahahalagang bagong feature, tulad ng kakayahang lumikha ng mga multi-line na string at magsama ng expression sa isang string. Bilang isang developer, lahat ng feature na ito ay mapapahusay ang iyong mga kakayahan para sa pagmamanipula ng mga string at nagbibigay-daan sa iyong lumikha ng mga dynamic na string.
Ang post na ito ay maglalarawan ng mga literal ng template at kung paano gamitin ang mga ito sa JavaScript.
Ano ang JavaScript Template Literals (Template Strings)?
“ Mga Literal ng Template 'ay karaniwang kilala bilang' Mga String ng Template ”. Napapaligiran sila ng backtick ( “ ) character, kumpara sa mga quote sa mga string. Ang mga placeholder nito ay tinutukoy ng dollar sign ' $ ”, at mga kulot na braces {} gusto ' ${expression} ” ay katanggap-tanggap sa mga literal na template. Kung gusto mong gumamit ng expression, maaari mo itong ilagay sa ' ${expression} ” kahon sa loob ng backtick.
Ang literal na template ay isang pinahusay na bersyon ng isang karaniwang string ng JavaScript. Ang mga pagpapalit ay gumagawa ng makabuluhang pagkakaiba sa pagitan ng literal na template at ordinaryong string. Maaari mong isama ang mga variable at expression sa isang string gamit ang mga pamalit. Ang mga variable at expression na ito ay awtomatikong mapapalitan ng JavaScript engine ang kanilang mga value.
Syntax
Gamitin ang syntax sa ibaba para sa pagdedeklara ng isang string gamit ang mga literal ng template:
` string text `
Para sa maraming linya, sundin ang ibinigay na syntax:
` linya ng teksto ng string 1
linya ng teksto ng string
Kung gusto mong magdagdag ng expression sa loob ng mga backtick, ginagamit ang sumusunod na syntax:
Tingnan ang mga sumusunod na halimbawa upang magkaroon ng mas mahusay na pag-unawa sa nakasaad na konsepto.
Halimbawa 1: Magpahayag ng Isang String na Isang Linya Gamit ang Mga Literal na Template ng JavaScript
Karaniwan, upang lumikha ng isang string, kinakailangan na gumamit ng isa o dobleng mga panipi, ngunit sa mga literal na template, maaari kang lumikha ng isang string tulad ng sumusunod:
console.log ( ` LinuxHint ` ) ;
Ipinapakita ng output na pareho itong gumagana tulad ng simpleng paglikha ng tibo sa tulong ng mga single o double quotes:
Halimbawa 2: Ideklara ang Multi-line String Gamit ang JavaScript Template Literals
Karaniwan, para sa pag-print ng maraming linya, ginagamit namin ang concatenation operator (+) at upang magdagdag ng bagong linya, (\n) ay maaaring gamitin, na kadalasang maaaring gawing kumplikado ang code:
console.log ( 'Maligayang pagdating sa LinuxHint. \n ' + 'Ang pinakamahusay na website para sa pag-aaral ng mga kasanayan.' ) ;
Habang para sa paggamit ng mga literal na template, maaari kang magsimula ng bagong linya sa pamamagitan ng pagpindot sa enter mula sa keyboard sa backtics block:
Ang pinakamahusay na website para sa mga kasanayan sa pag-aaral. ` ) ;
Output
Halimbawa 3: String na may mga Pagpapalit ng Expression
Dito, gagawa muna tayo ng dalawang variable ' x 'at' Y ', kasama ang mga halaga' dalawampu 'at' labinlima ”, ayon sa pagkakabanggit:
var x = dalawampu ;var y = labinlima ;
Pagkatapos, lumikha ng isang variable na ' sum 'para sa pagdaragdag ng' x 'at' Y ”:
Kung gusto mong magdagdag ng dalawang numero at ipakita ang kabuuan ng mga numerong ito sa console, karaniwan, kinakailangan na pagsamahin ang mga string at variable sa regular na format ng string na kadalasang lumilikha ng gulo upang gumamit ng isa o dobleng quote nang paulit-ulit sa mga string at pagsamahin ang mga ito sa bawat isa at sa mga variable na gumagamit ng ( + ):
Habang, gamit ang mga literal na template, kailangan mo lamang tukuyin ang mga string na may mga variable bilang isang expression sa loob ng ' ${} ” sa block ng backtick:
Output
Nakuha namin ang lahat ng mahahalagang impormasyon na nauugnay sa mga literal ng template.
Konklusyon
“ Mga Literal ng Template ', kilala rin sa ' Mga String ng Template ”, ay isang pinahusay na bersyon ng isang karaniwang string ng JavaScript na napapalibutan ng backtick ( “ ) character, kumpara sa mga quote sa mga string. Pinahihintulutan nito ang paglikha ng mga single-line at multi-line na mga string nang hindi gumagamit ng concatenation operator at may kasamang expression sa isang string. Tinalakay ng post na ito ang mga literal ng template sa JavaScript na may mga ipinaliwanag na halimbawa.