Ver contenido
carlosazaustre.es carlosazaustre.es

ES6 Tagged Template Literals

🗓 | 💻 Desarrollo | 🕐 2 minutos de lectura | 💬 Comments

ECMAScript v6, la nueva versión del estándar de JavaScript, ha traído muchas novedades y hay una de ellas que ha pasado desapercibida y me parece muy interesante.

Son las ES6 Tagged Template Literals.

Pero antes veamos un poco de introducción.

Template Strings

Como sabrás si has estado pendiente de las novedades que trae ES6, con esta nueva versión tenemos una nueva forma de escribir strings en JavaScript. A mi parecer más cómoda y legible que cómo se hacía antes.

Por ejemplo, si antes queríamos imprimir un string con varias variables, teníamos que hacer esto:

Con ES6 utilizando template strings podemos escibir lo mismo de una forma más cómoda utilizando las comillas invertidas y el símbolo del dólar $ seguido de las llaves {} sin necesidad de usar el operador + para concatenar los strings.

También es muy útil a la hora de imprimir strings multilínea que antes resultaban muy engorrosos. Podíamos hacer así:

o así, para poderlo leer "mejor":

El operador de la comilla invertida que utilizamos en los template strings nos permite añadir espacios y saltos de línea sin usar operadores especiales ni el + para concatenarlos.

Bien, pues sabiendo esto, te presento los ES6 Tagged Template Literals.

Tagged Templates

¿Y esto qué es? Pues no son más que funciones como cualquier otra, pero que son diferentes la forma en la que se las llama.

Imagina que tienes ésta función:

La podríamos llamar directamente pasándole el string con las comillas invertidas, sin necesidad de utilizar los paréntesis () y nos devolvería un array con los strings pasados como parámetro:

Si le pasamos variables, se vuelve más interesante, porque estas variables la función es capaz de separarlas, colocando en un array los strings y las variables por separado

Si no sabes cuantos variables vas a utilizar puedes utilizar rest parameters y la función quedaría así y funcionaría igual:

Utilidad

¿Y esto para que puede serme útil? Pues es una buena forma de utilizar JavaScript y la potencia de ES6 para construir templates. Veamos como:

Si juntamos la funcionalidad de los template strings de poder escribir en varias líneas, el operador rest y con la posibilidad de utilizar este tipo de funciones, podemos crear una función que manipule estos datos y llamarla de esta manera:

Y la función generaTemplate sería algo como esto:

Puedes ver esto en funcionamiento en el siguiente JSBin

Esta misma funcionalidad y mucho mejor implementada es lo que hace la librería html de JavaScript creada por Max Ogden también creador de librerías como yo-yo similar a React pero mucho más sencilla que en lugar de utilizar JSX utiliza ésta funcionalidad que hemos visto de las Tagged Template Literals y también es utilizada en un pequeño framework web muy interesante llamado Choo creado por Yoshua Wuyts que si tengo tiempo me gustaría probar y hablar de el en próximos posts.

Recursos

A continuación te comparto una serie de links dónde puedes profundizar sobre éste tema:

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y ponte al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa.