En hurtig introduktion til Tagged Template Literals

I denne artikel vil jeg tale om, hvad “tagged template literals” er, og nogle steder, hvor jeg har set dem blive brugt.

Hvad er "taggede skabelonbogstaver"?

Mærkede skabelonbogstaver blev aktiveret af en ny teknologi introduceret i ES6, kaldet “skabelonlitteratur”. Dette er simpelthen en syntaks, der muliggør strenginterpolering i JavaScript. Før template literalsfødslen skulle JavaScript-udviklere foretage grim streng sammenkædning.

Tagged template literalsgiver dig mulighed for at analysere skabelonbogstaver på den måde, du vil. Det fungerer ved at kombinere funktioner med template literals. Der er to dele af en tagged template literal, den første er den tag functionog den anden, den template literal.

const coolVariable = "Cool Value";
const anotherCoolVariable = "Another Cool Value";
randomTagFunctionName`${coolVariable} in a tagged template literal with ${anotherCoolVariable} just sitting there`

Nu er den første parameter i tag functionen variabel, der indeholder en række strenge i skabelonen bogstavelig:

function randomTagFunctionName(firstParameter) {
console.log(firstParameter); // ["", " in a tagged template literal with ", " just sitting there"]
}

Og alle andre efterfølgende parametre indeholder de værdier, der sendes til skabelonen bogstaveligt:

function randomTagFunctionName(firstParameter, secondParameter, thirdParameter) {
console.log(secondParameter); // "Cool Value"
console.log(thirdParameter); // "Another Cool Value"
}

Ved at udnytte ES6 Rest-operatøren kan vi omdefinere vores funktion sådan:

function randomTagFunctionName(firstParameter, ...otherParameters) {
console.log(otherParameters); // ["Cool Value", "Another Cool Value"]
}

Mærket skabelonlitteratur i stylede komponenter.

Nu hvor du forstår, hvad taggede skabelonbogstaver er, lad os diskutere en anvendelse af den i den virkelige verden.

Styled-Components er et JavaScript-bibliotek, der giver dig mulighed for at oprette og vedhæfte CSS-stilarter til dine React og React Native-komponenter. Sådan ser det ud:

const Button = styled.button` color: red;`

I eksemplet ovenfor er Button ikke bare en variabel, det er en komponent. Det betyder, at du kan blande det med andre komponenter, og dets output er et HTML-knapelement.

Dette er en meget spændende brugssag for taggede skabelonbogstaver, fordi det lader dig have scoped CSS på en måde, der stadig holder din komponentfil ren og får dig til at føle, at du skriver CSS i et almindeligt typografiark. Uden taggede skabelonbogstaver er vi nødt til at repræsentere den stil som et JavaScript-objekt som dette:

const Button = styled.button({ color: 'red'})

En anden brugssag er med graphql-tag-biblioteket, der bruges i Apollo GraphQL . Jeg tror ikke, der er en mulig måde at ikke bruge graphql-tagbiblioteket på, når man beskæftiger sig med Apollo GraphQL (hvis der er, så lad mig det vide!).

Afslutningsvis.

Jeg synes det er dejligt at lære nye teknologier og endnu bedre at se på måder, hvorpå andre har brugt det til at løse problemer. Hvis du har andre virkelige brugssager til mærket skabelonlitteratur, så lad mig det vide.

PS: "Real-World" betyder også dine sideprojekter eller codesandboxkodeeksempler.