tutz

Template Literals en Javascript

Los template literals nos abre un abanico de posibilidades para crear cadenas, como por ejemplo agregar multi lineas o interpolacion de cadenas.

Para crear un template literal debemos usar las tildes invertidas () en vez de comillas simples ('') o comillas dobles ("").

Por ejemplo:

const carModel = `Nissan March`;

Esto sería lo mismo que escribir

const carModel = 'Nissan March';

o

const carModel = 'Nissan March';

Multi lineas

Una de las principales ventajas de usar template literals son la posibilidad de poder crear cadenas de varias lineas.

const multiLines = `Mi primera linea
mi sengunda linea`;

Aunque esto tambien se puede hacer usando comillas con el salto de linea (\n).

Interpolación

Los templates literals proveen una manera facil de interpolar variables y expresiones dentro de cadenas.

Para esto hace uso de la siguiente sintaxis ${ expresion }

const age = 30;
const myAge = `Mi edad es ${age}`;

Tagged Templates

Uno de los casos de uso de los template literals son los tagged templates. Librerias como Styled Components o Apollo hacen mucho uso de esta funcionalidad.

Para explicar esto vamos a ver un ejemplo de una tag function.

greet`Hola, mi nombre es ${'Edwin'} y tengo ${30} años`;

Una Tag function es el nombre de una funcion seguida de un template literal.

Y el ejemplo que hemos puesto sería equivalente a

greet(['Hola, mi nombre es ', ' y tengo ', ' años'], 'Edwin', 30);

Entonces lo que ha pasado es que se ha dividido el template literal según las expresiones que tenga, y ha pasado como primer argumento un array con los textos del template literal.

Los demas argumento son infinitos y van a depender de las expresiones que tenga el template literal.

Como te puedes dar cuenta, usar esta nueva característica de JavaScript nos puede dar mucha legibilidad a nuestro código a diferencia de las otras posibilidades de crear cadenas.