Intl.DateTimeFormat를 사용한 완벽한 현지화 날짜 및 시간

ECMAScript Internationalization API은 언어에 민감한 방식으로 값을 포맷하는 데 사용되는 여러 개의 실용 프로그램을 포함하는 명칭 공간이다.브라우저에서 날짜, 숫자, 모음 등의 내용을 출력하는 문제를 해결합니다.
본고에서, 우리는 이 실용 프로그램들을 방문하여 어떻게 사용하는지, 그리고 그것들이 어디에서 이미 사용할 수 있는지 보여줄 것이다.
Intl.DateTimeFormatDateTimeFormat은 언어에 민감한 시간 형식의 구조 함수이다.날짜, 시간, 그리고 둘의 조합을 지원하며, 결과의 모든 부분을 제어할 수 있습니다.새 포맷 프로그램을 만드는 구문은 다음과 같습니다.

new Intl.DateTimeFormat([locales[, options]])

두 매개변수를 생략하면 현재 브라우저 로케일과 로케일의 기본 옵션이 사용됩니다.
본고에서 저는 2020년 11월 5일 그리니치 표준시간 새벽 01:02:03+1(new Date("2020-11-05T00:01:02+01:00"))을 예시일로 사용할 것입니다.

언제 사용합니까?
같은 포맷 규칙을 사용하여 여러 위치에서 날짜 포맷을 설정하려면 DateTimeFormat이 매우 유용하다. 왜냐하면 옵션을 한 위치에 집중할 수 있기 때문이다.예를 들어 React를 사용하면 l10n/i18n 상하문에서 내보낼 수 있습니다.
일회용 포맷의 경우 Date.toLocaleString 과 파트너 Date.toLocaleDateString , Date.toLocaleTimeString 을 사용하여 DateTimeFormat 객체의 인스턴스화를 방지할 수 있습니다.모든 이 함수들은 DateTimeFormat의 구조 함수가 가지고 있는 동일한 속성을 가지고 있다. locale과 options이다.그게 뭔지 보여줘.
locale첫 번째 파라미터 locales은 협상 가능한 지역 목록이다.언어 협상은 복잡한 화제이기 때문에 나는 아직 깊이 토론하고 싶지 않다. 그러므로 상세한 정보를 필요로 한다면 check the MDN reference을 클릭하세요.
다음은 로케일이 출력을 변경하는 방법의 예입니다.

const dtf = new Intl.DateTimeFormat();
dtf.format(date);
//=> "11/5/2020"
// equivalent to date.toLocaleDateString()

const dtf = new Intl.DateTimeFormat('pt-BR');
dtf.format(date);
//=> "05/11/2020"
// equivalent to date.toLocaleDateString('pt-BR')

주의 차이점: 기본값(내 예에서 'en-US')은 M/D/Y 형식을 사용합니다.그러나 pt-BR은 D/M/Y를 사용하며 왼쪽으로 채운 일과 달의 값은 0입니다.
options기본적으로 DateTimeFormat은 출력 날짜만 출력하고 시간은 출력하지 않습니다.다음과 같은 속성을 포함하는 options 매개변수를 사용하여 조정할 수 있습니다.
year , month , day이러한 속성은 날짜의 각 부분을 포맷하는 방법을 정의합니다.year의 경우 다음을 지정할 수 있습니다.

numeric, 전체 표시 연도

2-digit, 연도의 마지막 두 자리 숫자만 표시

const dtf = new Intl.DateTimeFormat('en', { year: 'numeric' });
dtf.format(date);
//=> "2020"
// equivalent to date.toLocaleDateString('en', { year: 'numeric' })
// you got it already, right?

const dtf = new Intl.DateTimeFormat('en', { year: '2-digit' });
dtf.format(date);
//=> "20"

month은 numeric과 2-digit(10보다 작으면 0으로 채워짐)일 수 있지만 텍스트는 다음과 같습니다.

long, 월별 이름 - short, 약어

표시

narrow(영문)

const dtf = new Intl.DateTimeFormat('en', { month: 'long' });
dtf.format(date);
//=> "November"

const dtf = new Intl.DateTimeFormat('en', { month: 'short' });
dtf.format(date);
//=> "Nov

const dtf = new Intl.DateTimeFormat('en', { month: 'narrow' });
dtf.format(date);
//=> "N"

일부 언어에서는 두 달 동안 동일한 narrow 표시 형식이 있을 수 있으며 영어가 아니면 단일 문자가 될 수 없습니다.day의 경우 numeric과 2-digit(제로 채우기)만 있습니다.

const dtf = new Intl.DateTimeFormat('en', { day: 'numeric' });
dtf.format(date);
//=> "5"

const dtf = new Intl.DateTimeFormat('en', { day: '2-digit' });
dtf.format(date);
//=> "05"

options 매개 변수를 생략하면 numeric, year 및 month의 경우 기본값은 day으로 설정되지만 조합을 지정하면 지정된 값만 출력됩니다.
옵션의 조합에 따라 출력이 약간 다를 것입니다.{ year: 'numeric', month: 'short', day: '2-digit' }을 사용하면 같은 날짜에 Nov/05/2020이 출력될 것으로 예상할 수 있지만 다음과 같습니다.

const dtf = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'short', day: '2-digit' });
dtf.format(date);
//=> "Nov 05, 2020"

era2000여 년 전의 날짜를 표시하고 있다면, era을 사용하는 것에 관심이 있을 것입니다.그것은 long, short과 narrow으로 month의 작업 원리와 유사하며 현재 시대(기원전 또는 기원전)를 나타낼 수 있다.

const dtf = new Intl.DateTimeFormat('en', { era: 'long' });
dtf.format(date);
//=> "11 5, 2020 Anno Domini"

const dtf = new Intl.DateTimeFormat('en', { era: 'short' });
dtf.format(date);
//=> "11 5, 2020 AD"

const dtf = new Intl.DateTimeFormat('en', { era: 'narrow' });
dtf.format(date);
//=> "11 5, 2020 A"

전체 날짜도 기원뿐만 아니라 표시될 수 있으니 주의하십시오.
weekday이 속성은 작업일 이름을 표시할지 여부를 제어합니다.long, short, narrow으로 month의 작동 방식과 유사합니다.

const dtf = new Intl.DateTimeFormat('en', { weekday: 'long' });
dtf.format(date);
//=> "Thursday"

const dtf = new Intl.DateTimeFormat('en', { weekday: 'short' });
dtf.format(date);
//=> "Thu"

const dtf = new Intl.DateTimeFormat('en', { weekday: 'narrow' });
dtf.format(date);
//=> "T"

일부 언어에서는 2영업일 동안 동일한 narrow 표시 형식이 있을 수 있으며, 영어가 아닌 경우에는 단일 문자가 될 수 없습니다.
hour, minute 및 second이 두 가지 옵션은 numeric과 2-digit의 두 가지 가능성만 있다.하지만 두 개의 함정이 있다.
먼저, minute과 second numeric의 동작은 2-digit과 동일하며, 세 가지 옵션 중 하나만 지정하지 않는 한:

const dtf = new Intl.DateTimeFormat('en', { minute: 'numeric', second: 'numeric' });
dtf.format(date);
//=> "01:02"

const dtf = new Intl.DateTimeFormat('en', { minute: 'numeric' });
dtf.format(date);
//=> "1"

그 다음으로 12시간 시계의 경우 hour도 AM/PM을 출력에 추가합니다.

const dtf = new Intl.DateTimeFormat('en', { hour: 'numeric', minute: 'numeric', second: 'numeric' });
dtf.format(date);
//=> "12:01:02 AM"

다음 옵션을 사용하여 AM/PM 동작을 제어할 수 있습니다.
hourCycle 및 h12이러한 옵션은 시계가 매일 24시간 또는 두 시간 12시간 사이클을 사용하는지, 0에서 시작하는지 1에서 시작하는지 여부를 제어한다.기본값은 로켈에 따라 다릅니다.hourCycle출력'h11'"오전 0:01:02"'h12'"오전 12:01:02"'h23'"00:01:02"'h24'"24:01:02"
노트:

hourCycle: 'h12'은 미국식 영어

의 기본값입니다.

hour: '2-digit'/h23을 사용하는 경우 h24은 필수입니다.

hour12은 언어 환경에 따라 h11과 h23 사이를 전환하거나 h12과 h24 사이를 전환한다.localeh12출력'en'false"오전 12:01:02"'pt-BR'true"오전 0:01:02"
노트:

미국식 영어 기본값은 h12이므로 hour12: false은 hourCycle: 'h24'으로 설정

BR 포르투갈어는 기본적으로 h23을 사용하므로 hour12: true은 hourCycle: 'h12'으로 설정합니다.

timeZonetimeZone 속성은 사용할 시간대를 정의하는 자명합니다.기본적으로 시스템 시간대 사용:

const dtf = new Intl.DateTimeFormat('en', { ... });
dtf.format(date);
//=> "12:01:02 AM"

const dtf = new Intl.DateTimeFormat('en', { ..., timeZone: 'America/Sao_Paulo' });
dtf.format(date);
//=> "8:01:02 PM"

GMT+1에서 GMT-3으로 이동
timeZoneName그것은 시간대 명칭을 표시하는 것을 책임지고 long 또는 short일 수 있다.timeStyle과 함께 사용할 수 없습니다. 아래에 설명되어 있습니다.

const dtf = new Intl.DateTimeFormat('en', { timeZoneName: 'long' });
dtf.format(date);
//=> "12/5/2020, Coordinated Universal Time"

const dtf = new Intl.DateTimeFormat('en', { timeZoneName: 'short' });
dtf.format(date);
//=> "12/5/2020, UTC"

dateStyle 및 timeStyle현재 지역에 따라 기본 날짜 형식이 다를 수 있으므로, year: 'numeric'을 짧은 날짜 문자열로 설정하는 것에 의존할 수 없습니다. 일부 지역은 year: '2-digit'을 짧은 날짜로 설정하는 것을 더 좋아하고, 다른 지역은 두 자릿수 연도를 사용하지 않기 때문에 영원히 사용하지 않습니다.
따라서 dateStyle과 timeStyle을 사용할 수 있습니다. 이것은 모든 날짜와 시간과 관련된 옵션에 합리적인 값을 설정할 수 있습니다!둘 다 full, long, medium, short으로 다른 옵션과 섞이지 않고 함께 사용할 수 있습니다.
가장 상세한 날짜를 표시하려면:

const dtf = new Intl.DateTimeFormat('en', { dateStyle: 'full', timeStyle: 'full' });
dtf.format(date);
//=> "Saturday, December 5, 2020 at 12:00:00 AM Coordinated Universal Time"

이것은 하나의 옵션을 사용하여 각 옵션을 long 또는 같은 값으로 설정하는 것과 유사하다.
또는 특정 로케일에 가장 간결한 디스플레이를 제공할 수 있습니다.

const dtf = new Intl.DateTimeFormat('en', { dateStyle: 'short', timeStyle: 'short' });
dtf.format(date);
//=> "12/5/20, 12:00 AM"

const dtf = new Intl.DateTimeFormat('pt-BR', { dateStyle: 'short', timeStyle: 'short' });
dtf.format(date);
//=> "05/12/2020 00:00"

영어는 { year: '2-digit', month: 'numeric' }, 쉼표 구분자와 데이 문장이 있고 브라질 포르투갈어는 { year: 'numeric', month: '2-digit' }, 쉼표 구분자와 24시간 시계가 없기 때문에 양식이 다르다는 것을 주의하십시오.이 옵션은 일반 옵션에서는 사용할 수 없으므로 dateStyle과 timeStyle이 매우 편리합니다.
함정이 하나 있습니다.dateStyle과 timeStyle은 최근에 추가된 것으로 Firefox>=79, 크롬>=76에서만 사용할 수 있으며 본문을 작성할 때 Edge와 Safari에서는 사용할 수 없습니다.You can polyfill with polyfill.io .
이것은 기본적으로 내가 보여주고 싶은 Intl.DateTimeFormat을 요약한다!저는 formatToParts과 formatRange에 관한 글과 Intl 내부의 다른 실용 프로그램, 예를 들어 ListFormat과 RelativeTimeFormat에 관한 글을 쓸 것입니다. 저를 따라 계속 주목해 주십시오!
Jon Tyson, Unsplash에서 촬영