Gyors bevezetés a Tagged Template Literals-hoz

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 .