날짜의 국제화(i18n)를 위해 라이브러리가 필요하지 않습니다.

모든 앱은 일종의 날짜를 사용합니다. 그리고 날짜에 대한 일반적인 작업 중 하나는 날짜를 읽을 수 있는 형식으로 표시하는 것입니다.

읽기 쉽고 이해하기 쉽도록 날짜 문자열을 현지화해야 합니다. 그리고 현지화와 함께 사용자에게 친숙한 형식도 있습니다.

날짜 개체의 현지화 또는 국제화(i18n) 작업을 쉽게 수행할 수 있는 라이브러리가 너무 많습니다. 이러한 라이브러리 중 일부는 다음과 같습니다.

moment

dayjs ( An underdog in this area )

date-fns

그러나 날짜 개체에 대한 기본 서식 지정 및 지역화를 위해 이러한 라이브러리가 필요하지 않을 수 있습니다.
Date.prototype.toLocaleString 및 사용자 지정 가능한 API를 사용하여 현지화된 출력을 쉽게 얻을 수 있습니다. 다음 예제와 같이 Locale String을 사용하여 사용자가 원하는 읽을 수 있는 날짜를 쉽게 가져옵니다.

const date = new Date() // Date from current timestamp
console.log(+date, date);
/* 👆
  1581422692394
  Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time)
*/

// For above date, let's see different locales
console.log(
  'For USA Users: ', date.toLocaleString('en-US'))
// 👆 For USA based Users:  2/11/2020, 1:04:52 PM

console.log(
  'For UK Users: ', date.toLocaleString('en-GB'))
// 👆 For UK based Users:  11/02/2020, 13:04:52

console.log(
  'For DE Users: ', date.toLocaleString('de-DE'))
// 👆 For DE based Users:  11.2.2020, 13:04:52

그러나 그것은 그렇지 않습니다. 기본 작업만 보았습니다.

이 함수는 또한 두 번째 매개변수를 JavaScript 객체로 받아들입니다. 이 JS 개체에 일부 특정 키 및 관련 값을 추가하여 toLocaleString의 결과를 사용자 지정할 수 있습니다. 예를 들어 평일을 제거할 수 있습니다. 월 표시 변경 등

두 번째 매개 변수를 사용하여 출력에 대한 추가 사용자 지정의 몇 가지 예를 살펴보겠습니다.

const date = new Date() // Date from current timestamp
console.log(+date, date);
/* 👆
  1581422692394
  Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time)
*/

const readableDate = date.toLocaleString('de-DE', {
  day: "2-digit",
  month: "long",
  year: "2-digit"
});
// 👆 "11. Februar 20"
/*
year: "numeric" → "11. Februar 2020"
month: "numeric" → "11.2.20"
month: "2-digit" → "11.02.20"
month: "short" → "11. Feb. 20"
month: "narrow" → "11. F 20"
*/

toLocaleString 함수의 출력을 사용자 지정하기 위한 개체의 서명에는 다음 키가 있을 수 있습니다. 더 많은 키가 있지만 여기서는 일반적인 키만 나열합니다.

dateStyle: [ 'full', 'long', 'medium', 'short' ]

시간 스타일: [ 'full', 'long', 'medium', 'short' ]

timeZone: 시간 일부IANA TimeZone Database

월: [ 'numeric', '2-digit', 'long', 'short', 'narrow' ]

연도: [ 'numeric', '2-digit' ]

평일: [ 'long', 'short', 'narrow' ]

일, 시, 분, 초: [ 'numeric', '2-digit' ]

timeZooneName: [ 'long', 'short' ]

주의 사항

여기서 주목해야 할 몇 가지 사항:

모든 숫자 값에는 numeric 및 2-digit의 두 가지 값이 있습니다.

문자열 값은 full , long , medium , short 및 narrow 입니다.

하나의 문자 약어가 있는 모든 항목은 값

으로 narrow를 가질 수 있습니다.

여기서 주목해야 할 또 다른 중요한 사항은 다음과 같습니다.

you don’t need to stick to a specific timeZone if you need the desired output.

For . as the separator, use de-DE; for / as the separator, use en-GB and etc.
You can read more about this function atMDN documentation of toLocaleString.

특정 기능

위 함수처럼 toLocaleStrung ; 날짜 또는 시간에만 정확히 동일한 기능이 있습니다. 따라서 날짜와 시간을 구분하기 위해 일부 문자열 작업을 수행할 필요가 없습니다.

날짜

날짜 출력에만 사용할 수 있습니다date.toLocaleDateString.

const readableDate = date.toLocaleDateString('de-DE', {
  day: "2-digit",
  month: "long",
  year: "2-digit"
});

console.log(readableDate);
// 👆 11. Februar 20

이 기능에 대한 자세한 내용은 MDN documentation of toLocaleDateString에서 확인할 수 있습니다.

시간

시간 문자열만 원하는 경우 date.toLocaleTimeString를 사용할 수 있습니다.

const readableTime = date.toLocaleTimeString('de-DE', {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
});

console.log(readableTime);
// 👆 13:04:52

이 기능에 대한 자세한 내용은 MDN documentation of toLocaleString에서 확인할 수 있습니다.

결론

날짜는 모든 응용 프로그램에 표시하는 매우 중요한 정보입니다. ToDo 또는 이 블로그처럼 단순한 애플리케이션. 날짜도 복잡한 개체입니다.

그러나 무거운 라이브러리가 항상 필요한 것은 아닙니다. 이 게시물은 무겁지만 매우 유용한 패키지에 뛰어들지 않고 원하는 출력을 얻을 수 있는 간단한 아이디어를 제공합니다.

Date 개체 조작에 무엇을 사용합니까?

댓글 💬 또는 Twitter 및

이 기사가 도움이 되었다면 다른 사람들과 공유해 주세요 🗣

블로그를 구독하면 받은 편지함으로 바로 새 게시물을 받을 수 있습니다.


2020년 2월 18일 https://time2hack.com에 처음 게시되었습니다.