3 cosas que puedes hacer con template literals

En este post conocerás sobre los distintos uso que pueden tener los Template Literals en JavaScript.

3 cosas que puedes hacer con los template literals

Esta característica llamada template literals llegó con ES6 y vino a cambiar la forma en que escribimos strings, si aún no conoces los poderes que desbloquean aquí te cuento 3.

El primero y quizá el más conocido es hacer salto de línea o multilinea, antes tenías que usar \n para esto. ​

console.log('Eres un gran \n frontend developer');

​ Ahora puedes hacerlo de una forma más natural y que permite más legibilidad, dando solo enter. ​

console.log(`Eres un gran
frontend developer`);

​ ¿Notas alguna diferencia?

En vez de usar comillas, se usan backticks que son estos `` caracteres, que los llaman comillas al revés, comillas invertidas, pero ahora ya sabes su nombre correcto.​

La segunda cosa que nos permiten hacer los backticks es usar expresiones (strings, booleanos, etc) de manera sencilla. ​

const cargo = 'frontend developer';
console.log('Eres un gran ' + cargo);

​ Ahora puedes hacerlo de una forma más limpia: ​

const cargo = 'frontend developer';
console.log(`Eres un gran ${cargo}`);

​ La tercera cosa que puedes hacer es escribir lógica como funciones dentro de un template literal, y aunque no es lo más recomendable, te lo permite. ​

console.log(
  `Eres un gran ${(function cargo() {
                  return 'Frontend Developer';
                })()}`
);

​ Un bonus que te quiero regalar son los tagged templates, una característica poco conocida pero muy útil y te lo explico a fondo en está clase pública del curso de JavaScript para React.