0Pricing
JavaScript Academy · Lección

Casos prácticos de plantillas etiquetadas

Cree HTML seguro y cadenas con estilos mediante etiquetas.

Casos prácticos de plantillas etiquetadas es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Etiquetas del mundo real

Las plantillas con etiquetas son la base de muchas bibliotecas: escape de HTML, styled components, consultas GraphQL e i18n. La idea común es interceptar los valores interpolados para procesarlos de forma segura.

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

El problema del escape

Al construir HTML a partir de entradas del usuario, los caracteres especiales, como el signo menor que, pueden inyectar marcado. Una función de etiqueta puede escapar automáticamente estos caracteres únicamente en los valores interpolados.

const danger = "<script>"
console.log("raw: " + danger)

Un ayudante de escape

Primero definimos un ayudante que reemplaza los caracteres peligrosos por entidades HTML seguras.

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

Etiqueta de HTML segura

Ahora construimos una etiqueta que escapa cada valor interpolado, pero deja tal cual las partes estáticas de la plantilla, ya que proceden del desarrollador de confianza.

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

Por qué las partes estáticas permanecen sin escapar

Solo los valores interpolados son datos no confiables del usuario. Las partes literales de la plantilla las escribe el desarrollador, por lo que permanecen sin escapar para que el marcado previsto funcione correctamente.

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

Etiqueta de salida con formato

Otro patrón consiste en envolver los valores interpolados con marcadores de formato, por ejemplo, para resaltar números en un informe.

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

Construir cadenas de consulta

Las etiquetas pueden codificar valores para URL y escapar cada fragmento interpolado, de modo que la estructura estática permanezca intacta mientras los datos se codifican de forma segura.

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

Pluralización

Una etiqueta puede inspeccionar un valor y ajustar el texto que lo rodea, por ejemplo, para elegir entre una forma singular o plural.

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

Eliminar la sangría

Las etiquetas pueden limpiar plantillas multilínea eliminando la sangría inicial de cada línea para producir una salida ordenada.

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

Combinar etiquetas

Puede combinar comportamientos haciendo que una etiqueta llame a ayudantes. En este caso, la etiqueta envuelve y enfatiza los valores.

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

Cuándo no usar etiquetas

Para cadenas simples, basta con un literal de plantilla normal. Utilice una función de etiqueta solo cuando necesite transformar de forma coherente los valores interpolados, por ejemplo, para escaparlos o localizarlos.

const name = "Lee"
console.log("Welcome, " + name)

Comprobación rápida

Compruebe sus conocimientos prácticos sobre las etiquetas.

Resumen

Resumen: Las plantillas con etiquetas permiten generar salidas seguras y con formato.

  • Escape únicamente los valores interpolados para garantizar la seguridad del HTML
  • Las partes estáticas permanecen confiables y sin procesar
  • Utilice etiquetas para aplicar estilos, codificar datos y pluralizar
  • Prefiera los literales normales cuando no sea necesaria ninguna transformación
function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

Preguntas frecuentes

¿La lección «Casos prácticos de plantillas etiquetadas» es gratis?

Sí — el texto completo de «Casos prácticos de plantillas etiquetadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Casos prácticos de plantillas etiquetadas»?

Cree HTML seguro y cadenas con estilos mediante etiquetas. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Casos prácticos de plantillas etiquetadas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Fundamentos de la interpolación de cadenas
  2. Cadenas multilínea
  3. Funciones de plantilla etiquetada
  4. Casos prácticos de plantillas etiquetadas
← Volver a JavaScript Academy