Javascript를 사용하여 형식화

Una tarea specificmente problemática en Javascript es trabajar con fechas y darle formato a estas.

Muchas veces este formato está definido por el diseño o por el lenguaje que los diferentes usuarios utilizan.

Por años, hemos utilizado librerías de terceros como moment-js para conseguir formatear las fechas, pero Javascript tiene soporte para esto gracias al objeto Intl.

DateTimeFormat

Este es uno los constructores disponibles en el objeto Intl que permite trabajar con fechas.

Tiene diferentes métodos pero en 특히 el que nos interesa en este artículo es 형식.

El 생성자DateTimeFormat recibe como parametros un string que identifica el lenguaje que se utilizará, y un objeto opcional que permite definir diferentes opciones de formateo; Desde aquí puedes usar directamente el método format que recibe la fecha que quieres trabajar.

const date = new Date(); //la fecha de hoy



// Fecha en formato USA
const usaDate = new Intl.DateTimeFormat('en-US').format(date) // 9/8/2022

// Fecha en formato Chile
const clDate = new Intl.DateTimeFormat('es-CL').format(date) // 08-09-2022

// Fecha en formato Aleman
const deDate = new Intl.DateTimeFormat('de').format(date) // 8.9.2022

// Fecha en formato Arabico egipto
const arDate = new Intl.DateTimeFormat('ar-eg').format(date) // ٨‏/٩‏/٢٠٢٢

Así de sencillo puedes obtener un string con el formato correcto de fecha para diferentes lenguajes.

더 이상. Puedes utilizar el segundo argumento de DateTImeFormat para definir opciones de formato que pueden ayudarte no solo a presentar la fecha en base al lenguaje, si no, también a mejorar la forma en que se presenta la información.

// Utilizando las opciones

const options = {
  year: "2-digit",
  month: "long",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  weekday: "long",
  hour12: true,
  timeZone: 'America/Santiago'
}

// Fecha en formato USA
const usaDate2 = new Intl.DateTimeFormat('en-US', options).format(date)
// Thursday, September 8, 22 at 10:20:54 AM

const clDate2 = new Intl.DateTimeFormat('es-CL', options).format(date)
// jueves, 8 de septiembre de 22, 10:20:54 a. m.

// Fecha en formato Aleman
const deDate2 = new Intl.DateTimeFormat('de', options).format(date)
//Donnerstag, 8. September 22 um 10:20:54 AM

// Fecha en formato Arabico egipto
const arDate2 = new Intl.DateTimeFormat('ar-eg', options).format(date)
// الخميس، ٨ سبتمبر ٢٢ في ١٠:٢٠:٥٤ ص

El 생성자DateTimeFormat acepta una larga lista de opciones

type Options = {
  dateStyle: 'full' | 'long' | 'medium' | 'short',
  timeStyle: 'full' | 'long' | 'medium' | 'short',
  calendar: 'buddhist' | 'chinese' | 'coptic' | 'dangi' | 'ethioaa' | 'ethiopic' | 'gregory' | 'hebrew' | 'indian' | 'islamic' | 'islamic-umalqura' | 'islamic-tbla' | 'islamic-civil' | 'islamic-rgsa' | 'iso8601' | 'japanese' | 'persian' | 'roc' | 'islamicc',
  dayPeriod: 'narrow' | 'short' | 'long',
  numberingSystem: 'arab' | 'arabext' | 'bali' | 'beng' | 'deva' | 'fullwide' | ' gujr' | 'guru' | 'hanidec' | 'khmr' | ' knda' | 'laoo' | 'latn' | 'limb' | 'mlym' | 'mong' | 'mymr' | 'orya' | 'tamldec' | 'telu' | 'thai' | 'tibt',
  localeMatcher: 'lookup' | 'best fit',
  year: "numeric" | "2-digit",
  month: "numeric" | "2-digit" | "long" | "short" | "narrow",
  day: "numeric" | "2-digit",
  hour: "numeric" | "2-digit",
  minute: "numeric" | "2-digit",
  second: "numeric" | "2-digit",
  era: "long" | "short" | "narrow",
  weekday: "long" | "short" | "narrow",
  hourCycle: 'h11'|'h12'|'h23'|'h24',
  hour12: boolean,
  timeZone: string,
  formatMatcher: 'basic' |'best fit',
  timeZoneName: 'long' | 'short' |'shortOffset'|'longOffset'|'shortGeneric'| 'longGeneric'
}

검토를 위해 초대합니다documentación en MDN.


✉️ Únete a Micro-bytes 🐦 Sígueme en ❤️ Apoya mi trabajo