Introducción a los literales de plantilla.

La manipulación de cadenas es una tarea muy común en programación, especialmente cuando se crean aplicaciones web interactivas. Si alguna vez has pasado tiempo trabajando con JavaScript, es probable que hayas tenido que poner algunas variables en cadenas.
En versiones anteriores de JavaScript, esto significaba usar el operador para unir cadenas mediante un proceso llamado concatenación de cadenas. Sin embargo, con la introducción de literales de plantilla en la actualización de JavaScript ES6(2015). Ahora tenemos una forma más limpia de insertar variables en cadenas, llamada interpolación de cadenas.

¿Qué son los literales de plantilla?

Los literales de plantilla nos permiten manipular cadenas más fácilmente. Están encerrados entre comillas invertidas (`) en lugar de (') o ("), y admiten la interpolación de cadenas mediante el uso de la sintaxis (${}) para colocar variables o llamadas a funciones directamente en una cadena.

A continuación se muestra un ejemplo de cómo los literales de plantilla simplifican la interpolación de cadenas.

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

Beneficios de utilizar literales de plantilla

1. Legibilidad mejorada

Al usar la concatenación de cadenas, era fácil perderse en un montón de signos, especialmente cuando se trabajaba con cadenas más largas. Los literales de plantilla evitan esto al permitirle escribir cadenas de una manera más fácil de seguir.

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. Cadenas multilínea

Antes de los literales de plantilla, había que usar caracteres de escape como \n para crear cadenas de varias líneas. Ahora puedes escribirlos entre comillas invertidas(`).

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. Evaluación de expresiones

También puedes realizar cálculos, llamar funciones o manipular datos dentro de cadenas.

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

Casos de uso comunes en JavaScript

1. Generación HTML

En lugar de crear cadenas HTML con concatenación, puedes colocar variables directamente en la cadena con interpolación.

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. Registrar mensajes

También puede insertar variables directamente en los mensajes de registro sin necesidad de concatenación.

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. Creación de URL

Los literales de plantilla también facilitan la creación de URL.

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. Lógica condicional

Otro gran caso de uso es Lógica condicional. Con los literales de plantilla puedes dar condiciones simples a las cadenas usando el operador ternario (? :), que es una abreviatura de una condición if-else.
Operadores lógicos como && (y) o || (o) también se puede utilizar para agregar partes condicionales a una cadena. Esto elimina la necesidad de declaraciones if-else adicionales o la necesidad de concatenación.

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

También puedes agregar expresiones más complejas dentro de los literales de plantilla.

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

Conclusión

Los literales de plantilla en JavaScript ofrecen una forma más limpia y eficiente de manejar la interpolación de cadenas. Entre crear contenido web, registrar mensajes o crear código más legible, este método proporciona la flexibilidad que necesita.

La próxima vez que hagas malabarismos con variables y cadenas, intenta usar plantillas literales. Verás rápidamente por qué es mi método preferido para trabajar con JavaScript.

Recursos

1. Documentos web de MDN: literales de plantilla
2. GitHub - Laboratorio de cadenas de revisión de fase 1
3. Escuelas W3: cadenas de plantillas de JavaScript