Cómo convertir una cadena de fecha a un formato legible por humanos

Seré el primero en admitir que estoy escribiendo este artículo, en parte, porque es algo que busco con frecuencia y quiero poder localizar la próxima vez. Formatear una cadena de fecha que obtienes de una API en JavaScript puede tomar muchas formas, desde cargar todo Moment.js para tener un control muy finito, o simplemente usar un par de líneas para actualizarlo. Este artículo no pretende ser exhaustivo, sino que pretende mostrar el camino más común de la legibilidad humana.

ISO 8601 es un formato de fecha extremadamente común. La “Z” al final significa que la hora en formato ISO 8601 utiliza el estándar UTC, es decir, sin zona horaria. He aquí un ejemplo: 2020-05-25T04:00:00Z. Cuando ingresan datos desde una API, normalmente están en formato ISO 8601.

Si quisiera formatear la cadena anterior en un formato más legible, digamos 25 de mayo de 2020 , haría esto:

const dateString = '2020-05-14T04:00:00Z'const formatDate = (dateString) = {  const options = { year: "numeric", month: "long", day: "numeric" }  return new Date(dateString).toLocaleDateString(undefined, options)}

Esto es lo que estoy haciendo…

Primero, estoy pasando opciones sobre cómo quiero que se formatee la salida. Hay muchas, muchas otras opciones que podríamos pasar allí para formatear la fecha de diferentes maneras. Sólo estoy mostrando un ejemplo bastante común.

const options = { year: "numeric", month: "long", day: "numeric" }

A continuación, estoy creando una nueva Dateinstancia que representa un único momento en el tiempo en un formato independiente de la plataforma.

return new Date(dateString)

Finalmente, estoy usando el .toLocaleDateString()método para aplicar las opciones de formato.

return new Date(dateString).toLocaleDateString(undefined, options)

Tenga en cuenta que pasó undefined. No definir el valor en este caso significa que la hora estará representada por la configuración regional predeterminada. También puede configurarlo para que sea un área/idioma determinado. O, para aplicaciones y sitios que están internacionalizados, puede pasar lo que el usuario haya seleccionado (por ejemplo, 'en-US'para Estados Unidos, 'de-DE'Alemania, etc.). Hay un buen paquete npm que incluye una lista de más configuraciones regionales y sus códigos.

¡Espero que te ayude a empezar! Y felicitaciones a la futura Sarah por no tener que buscar esto nuevamente en varios lugares.