Tema 5 · Fundamentos

Cadenas y Template Literals

Aprende a manipular texto con la sintaxis moderna de plantillas literales (backticks), interpolación de variables con ${} y los métodos de string más usados.

Operadores y Comparación Estricta Condicionales y Operador Ternario

¿Qué son los Template Literals (Plantillas de Cadena)?

Antes de ES6, unir texto y variables requería una engorrosa concatenación con el operador +. Las plantillas literales (Template Literals) utilizan acentos graves o backticks (`) y revolucionaron el manejo de texto en JavaScript: 

// Sintaxis antigua con comillas y concatenador +:
const msgViejo = "Hola, " + usuario + ". Tienes " + puntos + " puntos.";

// Sintaxis moderna ES6 con backticks e interpolación ${}:
const msgModerno = `Hola, ${usuario}. Tienes ${puntos} puntos.`;

Ventajas Principales

  • Interpolación de Expresiones (${...}): Puedes incrustar cualquier expresión de JavaScript válida dentro de las llaves (operaciones matemáticas, llamadas a métodos o variables).
  • Cadenas Multilínea: Respetan los saltos de línea de forma natural sin necesidad de caracteres de escape como \n.
  • Comillas directas: Puedes incluir comillas simples (') y comillas dobles (") en el interior del texto sin tener que anteponer barras invertidas de escape.

Métodos Útiles de String

Método Descripción Ejemplo
.toLowerCase() / .toUpperCase() Convierte el texto a minúsculas o mayúsculas. "KLP".toLowerCase() // "klp"
.trim() Elimina espacios en blanco accidentales al inicio y final. " [email protected] ".trim()
.includes("texto") Comprueba si una subcadena existe dentro del texto (retorna true o false). "Kilopolis".includes("polis") // true
.slice(inicio, fin) Extrae una porción del texto entre dos posiciones de índice. "JavaScript".slice(0, 4) // "Java"

⚡ Generador de Tarjetas con Template Literals

Escribe tu nombre y curso para ver cómo un template literal genera dinámicamente un bloque HTML enriquecido:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Template Literals en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-editor { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    input { width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 6px 0 14px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .tarjeta-estudiante {
      background: linear-gradient(135deg, #0284c7, #4f46e5);
      color: white;
      padding: 18px;
      border-radius: 10px;
      margin-top: 15px;
    }
  </style>
</head>
<body>

  <div class="card-editor">
    <h3 style="margin-top: 0; color: #0f172a;">Carnet de Estudiante Dinámico</h3>

    <label for="nombre">Nombre del Alumno:</label>
    <input type="text" id="nombre" value="Juan Martínez">

    <label for="curso">Especialidad:</label>
    <input type="text" id="curso" value="Fullstack JavaScript Developer">

    <button onclick="generarCarnet()" style="background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%;">
      Generar Carnet con Template Literals
    </button>

    <div id="contenedor-carnet"></div>

    <script>
      function generarCarnet() {
        const nombre = document.getElementById('nombre').value.trim();
        const curso = document.getElementById('curso').value.trim();
        const anio = 2026;

        // Construcción limpia y multilínea con Template Literal (backticks):
        const carnetHtml = `
          <div class="tarjeta-estudiante">
            <span style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9;">
              Kilopolis Academia · Carnet Oficial
            </span>
            <h2 style="margin: 8px 0 4px 0;">${nombre.toUpperCase()}</h2>
            <p style="margin: 0; font-size: 0.95rem;">${curso}</p>
            <div style="margin-top: 12px; font-size: 0.8rem; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 8px;">
              Cohorte: ${anio} &bull; Estado: Activo
            </div>
          </div>
        `;

        document.getElementById('contenedor-carnet').innerHTML = carnetHtml;
      }

      // Generar al cargar
      generarCarnet();
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.