[Javascript] : 국제화 지원 API Intl - DateTimeFormat

Intl(Internationalization) API는 Javascript에서 국제화 지원을 가능하게 하는 API다. 

Intl API를 사용하면 날짜, 시간, 통화, 메시지 등을 사용자의 지역에 맞게 표시할 수 있다. Intl API를 사용하려면 브라우저에서 지원하는지 먼저 확인해야 한다. 지원하지 않는 브라우저일 경우 Intl 폴리필 라이브러리를 사용하여 Intl API를 사용할 수 있다. 확인해보니 대부분의 브라우저를 22년도 4월에 업데이트 한 적이 있다면 Intl API를 사용할 수 있다.

 

Intl.DateTimeFormat

Intl.DateTimeFormat 함수는 언어와 지역(국가)에 맞는 날짜와 시간 형식을 찾아준다.

기본 사용법

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));

//en-US에 맞는 포맷의 date형식을 리턴
console.log(new Intl.DateTimeFormat('en-US').format(date));
// Expected output: "12/20/2020"

//배열에서 앞쪽에 위치한 language코드가 지원되는 코드가 아닐 경우를 대비해 fallback 언어코드 (여기서는 id)를 줄 수 있음
console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
// Expected output: "20/12/2020"

// Specify date and time format using "style" options (i.e. full, long, medium, short)
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long', timeZone: 'Australia/Sydney' }).format(date));
// Expected output: "Sunday, 20 December 2020 at 14:23:16 GMT+11"

 

옵션 사용하기

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));

let options = {
  weekday: "long", //short으로 하면 줄임말로 나옴 ex: Donnerstag => Do.
  year: "numeric",
  month: "long", //short으로 하면 줄임말로 나옴 ex: Dezember => Dez.
  day: "numeric",
};
console.log(new Intl.DateTimeFormat("de-DE", options).format(date));
// "Donnerstag, 20. Dezember 2012"

// timeZone, timeZoneName 옵션 추가하기
options.timeZone = "UTC";
options.timeZoneName = "short";
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// "Thursday, December 20, 2012, GMT"

// 더욱 세세한 옵션 주기
options = {
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  timeZone: "Australia/Sydney",
  timeZoneName: "short", //short : AEDT, long : Australian Eastern Daylight Time
};
console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
// "2:00:00 pm AEDT"

// 소수점 이하 자릿수의 시간까지 표기하고 싶다면..?
options.fractionalSecondDigits = 3; //number digits for fraction-of-seconds
console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
// "2:00:00.200 pm AEDT"

// 시간 표기 방식 정하기
options = {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  hour12: false, //false : "12/19/2012, 19:00:00", true : "12/19/2012, 7:00:00 PM"
  timeZone: "America/Los_Angeles",
};
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// "12/19/2012, 19:00:00"

// 브라우저의 기본 locale을 사용하되, 옵션을 주고싶을 때
console.log(new Intl.DateTimeFormat("default", options).format(date));
// "12/19/2012, 19:00:00"

// dayPeriod를 주면(short든 long이든) 현재 시간이 오전/오후/저녁 인지 알려준다.
//ex : 12 noon, 5 in the afternoon, 10 at night.. 등등
options = { hour: "numeric", dayPeriod: "short" };
console.log(new Intl.DateTimeFormat("en-US", options).format(date));
// 10 at night