Una introducción rápida a los literales de plantilla etiquetados

En este artículo, voy a hablar sobre lo que son los "literales de plantilla etiquetados" y algunos lugares donde he visto su uso.

¿Qué son los "literales de plantilla etiquetados"?

Los literales de plantilla etiquetados se habilitaron mediante una nueva tecnología introducida en ES6, denominada "literales de plantilla". Esta es simplemente una sintaxis que hace posible la interpolación de cadenas en JavaScript. Antes de que template literalsnaciera, los desarrolladores de JavaScript necesitarían hacer una concatenación de cadenas desagradable.

Tagged template literalsle ofrece la oportunidad de analizar literales de plantilla de la forma que desee. Funciona combinando funciones con template literals. Hay dos partes de a tagged template literal, la primera es la tag functiony la segunda, la template literal.

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

Ahora, el primer parámetro en tag functiones una variable que contiene una matriz de cadenas en la plantilla literal:

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

Y todos los demás parámetros posteriores contendrán los valores pasados ​​a la plantilla literal:

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

Aprovechando el operador ES6 Rest, podemos redefinir nuestra función así:

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

Literales de plantilla etiquetados en Styled-Components.

Ahora que comprende qué son los literales de plantilla etiquetados, analicemos una aplicación en el mundo real.

Styled-Components es una biblioteca de JavaScript que le permite crear y adjuntar estilos CSS a sus componentes React y React Native. Así es como se ve eso:

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

En el ejemplo anterior, Button no es solo una variable, es un componente. Eso significa que puede mezclarlo con otros componentes y su salida es un elemento de botón HTML.

Este es un caso de uso muy interesante para literales de plantilla etiquetados porque le permite tener CSS de alcance de una manera que aún mantiene limpio su archivo de componentes y le hace sentir como si estuviera escribiendo CSS en una hoja de estilo normal. Sin literales de plantilla etiquetados, tendríamos que representar ese estilo como un objeto de JavaScript como este:

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

Otro caso de uso es con la biblioteca graphql-tag utilizada en Apollo GraphQL . No creo que haya una forma posible de no usar la graphql-tagbiblioteca cuando se trata de Apollo GraphQL (si la hay, ¡hágamelo saber!).

En conclusión.

Creo que es genial aprender nuevas tecnologías y aún mejor ver las formas en que otros las han utilizado para resolver problemas. Si tiene otros casos de uso del mundo real para los literales de plantilla etiquetados, hágamelo saber.

PD: "Real-World" también significa sus proyectos paralelos o codesandboxmuestras de código.