Ebben a cikkben arról fogok beszélni, hogy melyek a „tagged sablon literáljai”, és néhány helyről, ahol láttam őket használni.
Mi az a „címkézett sablon literál”?
A címkézett sablon literálokat egy új, az ES6-ban bevezetett technológia tette lehetővé, az úgynevezett „sablon literálok”. Ez egyszerűen egy szintaxis, amely lehetővé teszi a karakterlánc-interpolációt a JavaScript-ben. Mielőtt template literalsmegszületett volna, a JavaScript fejlesztőknek csúnya karakterlánc-összefűzést kell végrehajtaniuk.
Tagged template literalslehetőséget kínál a sablon literálok elemzésére, bármilyen módon. Úgy működik, hogy a funkciókat kombinálja a template literals. Az a-nak két része van tagged template literal, az első tag functiona másik, a második pedig a template literal.
const coolVariable = "Cool Value";const anotherCoolVariable = "Another Cool Value";randomTagFunctionName`${coolVariable} in a tagged template literal with ${anotherCoolVariable} just sitting there`Most az első paraméter tag functionegy változó, amely a sablon literáljában egy sor karakterláncot tartalmaz:
function randomTagFunctionName(firstParameter) {console.log(firstParameter); // ["", " in a tagged template literal with ", " just sitting there"]}Az összes további paraméter pedig a sablon literálnak továbbított értékeket fogja tartalmazni:
function randomTagFunctionName(firstParameter, secondParameter, thirdParameter) {console.log(secondParameter); // "Cool Value"console.log(thirdParameter); // "Another Cool Value"}Az ES6 Rest operátor előnyeit kihasználva a következőképpen definiálhatjuk a funkciónkat:
function randomTagFunctionName(firstParameter, ...otherParameters) {console.log(otherParameters); // ["Cool Value", "Another Cool Value"]}Címkézett sablon literálok stílusos komponensekben.
Most, hogy megértette, mi a címkézett sablon literál, beszéljük meg annak alkalmazását a való világban.
A Styled-Components egy JavaScript könyvtár, amely lehetővé teszi CSS-stílusok létrehozását és csatolását a React és React Native összetevőkhöz. Így néz ki:
const Button = styled.button` color: red;`A fenti példában a Button nem csak változó, hanem komponens is. Ez azt jelenti, hogy összekeverheti más komponensekkel, és a kimenete egy HTML gombelem.
Ez egy nagyon izgalmas eset a címkézett sablon literálok számára, mert lehetővé teszi a CSS hatókörének megválasztását, amely továbbra is tisztán tartja az összetevő fájlt, és úgy érzi, mintha a CSS-t egy rendes stíluslapba írná. Címkézett sablon literálok nélkül ezt a stílust egy ilyen JavaScript objektumként kell ábrázolnunk:
const Button = styled.button({ color: 'red'})Egy másik felhasználási eset az Apollo GraphQL-ben használt graphql-tag könyvtár . Nem hiszem, hogy lehetséges az a módszer, hogy graphql-tagaz Apollo GraphQL használatakor ne használja a könyvtárat (ha van ilyen, kérem, szóljon!
Összefoglalva.
Szerintem nagyon jó új technológiákat elsajátítani, és még jobb megnézni azokat a módokat, ahogyan mások ezt használták a problémák megoldására. Ha más valós esetei vannak a Tagged Template Literals-nak, kérem, tudassa velem.
PS: A „Való világ” az ön mellékprojektjeit vagy codesandboxkódmintáit is jelenti .