Fechas, textos y formato · Lenguaje de marcas

Hoy · Hoja de ruta

1. Aprende: Los métodos de texto que más vas a usar, y cómo se manejan fechas y formatos locales.
2. Haz: Añade búsqueda por texto y presentación de precios y fechas a tu catálogo.
3. Comprueba: Tu buscador encuentra «teclado» escribiendo «TECLA».

Antes de empezar · 5 minutos, sin apuntes

Si el usuario escribe « Teclado » con espacios y mayúsculas, ¿lo encontrará tu búsqueda?
¿Cómo se escribe un precio en España? ¿Y una fecha?
¿Qué diferencia hay entre el dato y su presentación?

Los métodos de texto que usarás

const texto = "  Teclado Mecánico RGB  ";

texto.trim()                    // "Teclado Mecánico RGB"
texto.toLowerCase()             // "  teclado mecánico rgb  "
texto.includes("Mecánico")      // true
texto.trim().startsWith("Tec")  // true
texto.replaceAll(" ", "-")
texto.trim().split(" ")         // ["Teclado", "Mecánico", "RGB"]
"1,2,3".split(",")              // ["1", "2", "3"]
texto.trim().slice(0, 7)        // "Teclado"

Ninguno modifica el original: los textos son inmutables, y todos devuelven uno nuevo.

Una búsqueda que no falla por tonterías

export function buscar(productos, consulta) {
  const termino = consulta.trim().toLowerCase();
  if (termino === "") return productos;

  return productos.filter((p) =>
    p.nombre.toLowerCase().includes(termino) ||
    p.descripcion.toLowerCase().includes(termino)
  );
}

Tres decisiones que evitan tres quejas: se recortan los espacios, se compara todo en minúsculas, y una consulta vacía devuelve todo en lugar de nada.

Fechas

const ahora = new Date();
ahora.getFullYear();
ahora.getMonth();          // ¡de 0 a 11! enero es 0
ahora.getDate();           // el día del mes

const alta = new Date("2026-09-04");
const dias = (ahora - alta) / (1000 * 60 * 60 * 24);

Que los meses empiecen en cero es la trampa histórica de las fechas en JavaScript. Restar dos fechas, por su parte, produce milisegundos y no días: el resultado debe dividirse.

Formato local

const precio = 1234.5;

precio.toLocaleString("es-ES", { style: "currency", currency: "EUR" });
// "1.234,50 €"

new Date().toLocaleDateString("es-ES", {
  day: "numeric", month: "long", year: "numeric"
});
// "4 de septiembre de 2026"

Guarda el dato, formatea al presentar

En tu catálogo, el precio es 89.9, un número. "89,90 €" es su presentación, y se genera en el momento de mostrarlo.

Si guardas el texto formateado, no podrás sumar, ordenar ni comparar sin deshacerlo, y el día que cambies de moneda o de idioma habrá que tocar los datos. Es la misma separación entre contenido y presentación que aprendiste en la UD1 y la UD2, aplicada a los valores.

Tarea 15 · Búsqueda y presentación

En js/formato.js y js/catalogo.js:

buscar(productos, consulta) insensible a mayúsculas y espacios.
formatearPrecio(valor) con formato español.
formatearFecha(fecha) en formato largo.
Añade a cada producto una fecha de alta y ordénalos por ella.
Comprueba la búsqueda con seis consultas, incluidas la vacía y una con acentos.

Objetivo mínimoBúsqueda robusta y precios con formato español.

Si lo tienesHaz que la búsqueda ignore también los acentos.

RetoDevuelve los resultados ordenados por relevancia: primero los que coinciden al principio del nombre.

Cierre de la semana 5

Tu proyecto está en módulos y se sirve por HTTP.
Validas los datos donde entran y tratas los errores.
Buscas por texto sin que la fallen mayúsculas ni espacios.
Guardas datos y formateas solo al presentar.

Ver respuestas

1 · Recortar espacios, pasar todo a minúsculas y decidir qué hace la consulta vacía.

2 · De 0 a 11: enero es el mes 0.

3 · Porque el texto formateado ya no se puede sumar ni ordenar, y ata los datos a un idioma y una moneda.

Microprueba semanal 5 · 5–10 minutos

Individual, sin IA y sin apuntes.

Exporta una función desde un módulo e impórtala desde otro, con la ruta escrita como debe ser.
Escribe la lectura de un JSON que puede venir roto, sin que el programa se caiga.
¿Qué significa validar en el borde? Pon un ejemplo de tu proyecto.

---