JavaScript Moderno #2 | Template String.

En esta serie de posts aprenderemos features modernas del lenguaje de programación JavaScript que harán de tu vida como programador mucho más fácil, pero antes te dejo las otras entregas de esta serie:

• #1 Variables y Constantes

Vayamos al tema de hoy. Primero, ¿Qué es el "template string" 🤔?. En la mayoría de lenguajes que se utilizan para el desarrollo web es necesario tener un sistema que permita inyectar datos en una plantilla de texto, PHP, JAVA, .NET, Dart etc., tienen soluciones (en librerías o de manera integrada) para esto y JavaScript no se podía quedar atrás.

Entendamos esto con un caso de prueba, imaginemos el siguiente requerimiento:

La aplicación debe saludar cordialmente al usuario por su nombre, apellido e indicar cuántos días faltan para su cumpleaños.

Si necesitáramos implementar una función para preparar el saludo sin utilizar template string haríamos lo siguiente

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return "¡Hola " + nombre + " " + apellido + ", faltan " + diasParaCumpleaños + " días para tu cumpleaños 😁!"
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León, faltan 45 días para tu cumpleaños 😁!"
*/

Es ridículamente horrible hacer todas esas concatenaciones para elaborar un pequeño saludo 😣; afortunadamente si usamos JavaScript Moderno podemos contar con nuestro querido template string...

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return `¡Hola ${nombre} ${apellido}, faltan ${diasParaCumpleaños} días para tu cumpleaños 😁!`
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León, faltan 45 días para tu cumpleaños 😁!"
*/

¿Notas la gran diferencia? No solamente nuestro código es mas simple de escribir, sino también es mucho más legible. Para usar esta característica debemos tener en cuenta lo siguiente:

• No servirá si utilizas ' o ", debes utilizar las tildes invertidas.
• Para inyectar un dato en tu plantilla de texto debes utilizar ${} colocando el dato dentro de las llaves.

Ahora imaginemos que el requerimiento cambias así:

La aplicación debe saludar cordialmente al usuario por su nombre, apellido, y en la siguiente línea indicar cuántos días faltan para su cumpleaños restando un día.

Sin template string...

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return "¡Hola " + nombre + " " + apellido + ". \n Faltan " + (diasParaCumpleaños - 1) + " días para tu cumpleaños 😁!"
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León.
   Faltan 44 días para tu cumpleaños 😁!"
*/

Ah! pero con template string...

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return `¡Hola ${nombre} ${apellido}.
           Faltan ${diasParaCumpleaños - 1} días para tu cumpleaños 😁!`
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León.
   Faltan 44 días para tu cumpleaños 😁!"
*/

Como ya nostaste, template string soporta:

• Saltos de línea.
• Operaciones con variables, constantes o valores explicitos.
• Expresiones JavaScript en general.

Conclusiones

• No concatenes con cadenas de texto con +.
• Utiliza ' o " para textos estáticos.
• Template string no solo te ayuda a ti, sino al que tenga que leer tu código.