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.