Cómo formatear una fecha en JavaScript: guía de rendimiento

Formateo de fechas en JavaScript: no solo "concatenar cadenas"

La pregunta "How do I format a date in JavaScript?" es una de las más populares en Stack Overflow. Y con razón. Cada desarrollador se ha encontrado al menos una vez con la situación de tener que mostrar una fecha no en el formato estándar "Fri Feb 14 2025 12:00:00 GMT+0300", sino de forma bonita: "14 de febrero de 2025" o "2025-02-14". Parece sencillo, ¿verdad? Pero hay suficientes trampas y problemas de rendimiento aquí.

En este artículo, analizaremos todas las formas de formatear fechas en JavaScript: desde las más simples hasta las de alto rendimiento. Aprenderá a evitar errores típicos y a hacer que su código no solo sea bonito, sino también rápido. ¡Allá vamos!

¿Por qué el Date nativo es tan incómodo?

El objeto incorporado Date en JavaScript es, por decirlo suavemente, un "equipaje del pasado". No proporciona un método incorporado format(), como en Python o PHP. En su lugar, tiene que ensamblar la fecha manualmente usando getters:

const date = new Date();\nconst day = String(date.getDate()).padStart(2, '0');\nconst month = String(date.getMonth() + 1).padStart(2, '0');\nconst year = date.getFullYear();\nconsole.log(`${year}-${month}-${day}`); // "2025-02-14"

Esto funciona, pero parece engorroso. Y si además necesita localizar la fecha (por ejemplo, al español), el código crece hasta alcanzar tamaños indecentes. Es por eso que los desarrolladores buscan alternativas.

El método toLocaleDateString: simple y rápido

La forma más sencilla de formatear una fecha en JavaScript es usar el método toLocaleDateString(). Acepta una configuración regional y un objeto con opciones:

const date = new Date();\nconst options = { year: 'numeric', month: 'long', day: 'numeric' };\nconsole.log(date.toLocaleDateString('es-ES', options)); // "14 de febrero de 2025"

Este método se adapta automáticamente a la configuración regional. ¿Quiere "February 14, 2025"? Simplemente cambie la configuración regional a 'en-US'.

Ventajas:

\n
• Facilidad de uso.
\n
• Localización incorporada.
\n
• El código se lee como lenguaje natural.
\n

Desventajas:

\n
• Rendimiento: cada llamada a toLocaleDateString() crea un nuevo objeto formateador. En un bucle de 1000 elementos, esto puede ser notable.
\n
• Control limitado sobre el formato (no se puede, por ejemplo, mostrar "14.02.2025" sin el año).
\n

Intl.DateTimeFormat: potente y eficiente

Para un control más preciso y optimización, use Intl.DateTimeFormat. Es un objeto que se puede crear una vez y reutilizar múltiples veces:

const formatter = new Intl.DateTimeFormat('es-ES', {\n  year: 'numeric',\n  month: '2-digit',\n  day: '2-digit'\n});\n\nconst date1 = new Date();\nconst date2 = new Date('2024-12-25');\nconsole.log(formatter.format(date1)); // "14.02.2025"\nconsole.log(formatter.format(date2)); // "25.12.2024"

¿Por qué es más rápido? Porque el objeto formateador se crea una vez, no en cada llamada. En pruebas de rendimiento, Intl.DateTimeFormat resulta ser de 5 a 10 veces más rápido que toLocaleDateString() en bucles.

Además, Intl.DateTimeFormat admite opciones adicionales, como weekday, hour, minute, second e incluso timeZone:

const formatter = new Intl.DateTimeFormat('en-US', {\n  weekday: 'long',\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: '2-digit',\n  minute: '2-digit'\n});\nconsole.log(formatter.format(new Date())); // "Friday, Feb 14, 2025, 12:00 PM"

Pregunta capciosa: ¿y si necesita mostrar la fecha en formato "2025-02-14" sin localización? Intl.DateTimeFormat no puede mostrar horas, minutos y segundos por separado, pero para fechas simples esto es