CodeForge

JavaScript de Cero a Experto / Strings, números y fechas

Template literals: strings con espacios en blanco

Teoría18 min20 XP

Llevas cinco módulos pegando strings con +: "Hola " + nombre + ", tienes " + saldo. Funciona, pero es frágil (un espacio olvidado, una comilla mal cerrada) y difícil de leer. Los template literals son la forma moderna: escribes la frase completa y dejas huecos donde van los datos. Desde hoy, serán tu manera por defecto de construir texto.

El diploma con espacios en blanco

Backticks y huecos

Los template literals no usan comillas: usan backticks (la tilde invertida). En teclado latinoamericano suele ser una tecla muerta — púlsala y luego la barra espaciadora para que aparezca.

Tres piezas: los backticks delimitan el string, ${ } abre un hueco, y dentro del hueco JavaScript evalúa lo que sea — una variable, una cuenta, un ternario, una función. El resultado se convierte en texto y se incrusta en su lugar. Se acabó contar espacios entre comillas y signos +.

Multilínea: el superpoder silencioso

Un string con comillas normales NO puede saltar de línea. Un template literal, sí — respeta los saltos y espacios tal como los escribas:

Antes de los template literals esto exigía concatenar con "\n" (el carácter de salto de línea) en cada renglón. Ahora escribes el bloque como se ve. Este patrón — una plantilla multilínea con huecos — es exactamente como se generan recibos, correos y HTML dinámico en el mundo real.

Escribes console.log('Total: ${2 + 2}') usando comillas simples en vez de backticks. ¿Qué se imprime?

Mini-reto

En "Mi Bolsillo": rehaz el resumen del reto del módulo 1 (aquel de concatenaciones) como UN solo template literal multilínea con al menos cuatro huecos: titular, saldo, un cálculo con Math.round y un ternario que diga si el saldo está "saludable" o "ajustado". Compara tu versión nueva con la de +: la diferencia de legibilidad es el argumento.

Qué sigue

Ya construyes strings elegantes. La próxima lección abre la caja de herramientas para OPERARLOS: buscar dentro de un texto, cortarlo, reemplazar partes, limpiarlo y partirlo en pedazos — los métodos de string que usarás todos los días.