날짜 및 시간 형식을 기본적으로 분쇄: Intl.DateTimeFormat의 숨겨진 기능 활용

네이티브 Intl API 소개

JavaScript의 Intl API는 다양한 언어의 날짜, 숫자, 텍스트와 같은 데이터의 현지화 및 서식을 처리하기 위한 강력한 기본 솔루션입니다. 많은 타사 라이브러리와 달리 이러한 API는 다음을 제공합니다.

• 고성능: JavaScript 엔진에 통합되었습니다.

• 더 작은 번들 크기: 외부 종속성이 필요하지 않습니다.

• 글로벌 지원: 다양한 언어 및 지역에 대한 현지화가 포함됩니다.

외부 라이브러리와 달리 네이티브 API는 개발자의 업데이트나 유지 관리가 필요하지 않습니다. 또한 기본 JavaScript 엔진에 최적화되어 현지화 및 서식 지정에 대한 더 가볍고 빠른 접근 방식을 제공합니다.

이 기사에서는 원하는 현지화에 따라 날짜와 시간 형식을 지정하는 전용 API인 Intl.DateTimeFormat에 중점을 둘 것입니다. 이 API가 Moment.js, date-fns 또는 Day.js와 같은 널리 사용되는 라이브러리를 형식 요구 사항으로 대체하여 현대적이고 기본적인 대안을 제공하는 방법을 살펴보겠습니다.

---

Intl.DateTimeFormat에 대한 설명

Intl.DateTimeFormat은 날짜와 시간의 현지화된 형식을 허용하는 클래스입니다. 다양한 현지화 지원, 사용자 정의 가능한 형식, 대체 달력 및 시간대 처리와 같은 고급 기능을 제공합니다.

---

포맷터 만들기

포매터는 날짜 형식 지정에 대한 특정 구성을 저장하는 Intl.DateTimeFormat의 인스턴스입니다. 포맷터를 사용하면 동일한 형식을 다른 날짜에 반복적으로 적용하여 코드를 더욱 효율적이고 쉽게 읽을 수 있습니다.

포매터를 생성하려면 원하는 매개변수와 함께 Intl.DateTimeFormat 생성자를 사용하세요.

const formatter = new Intl.DateTimeFormat(locale, options);

• locale: 현지화를 정의하는 문자열입니다(예: 미국 영어의 경우 "en-US", 이탈리아어의 경우 "it-IT").

• options: 날짜 구성 요소(예: 요일, 월, 연도 등)를 지정하는 선택적 개체입니다.

재사용을 위해 포맷터 인스턴스를 변수에 저장하는 것이 일반적이지만 이 단계가 반드시 필요한 것은 아닙니다. 아래와 같이 Intl.DateTimeFormat 생성자를 직접 호출하여 날짜 형식을 인라인으로 지정할 수 있습니다.

console.log(new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(2024, 11, 19)));
// Output: "December 19, 2024"

그러나 포맷터 인스턴스를 생성하는 것은 동일한 형식을 여러 날짜에 적용하여 코드 일관성을 개선하고 중복을 방지해야 할 때 특히 유용합니다.

const formatter = new Intl.DateTimeFormat(locale, options);

---

기본 예: Intl.DateTimeFormat 시작하기

이러한 기본 예제를 통해 Intl.DateTimeFormat의 단순성과 강력한 기능을 살펴보세요. 애플리케이션 전체에서 재사용할 수 있는 기본 및 사용자 정의 형식에 대한 포맷터를 생성하는 방법을 보여드리겠습니다.

1. 기본 서식

옵션이 제공되지 않으면 포맷터는 선택한 로케일의 기본 형식을 사용합니다.

console.log(new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(2024, 11, 19)));
// Output: "December 19, 2024"

2. 사용자 정의 서식

원하는 옵션을 지정하여 출력을 사용자 정의하세요.

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

console.log(formatter.format(new Date(2024, 11, 19))); // Output: "December 19, 2024"
console.log(formatter.format(new Date(2023, 5, 15))); // Output: "June 15, 2023"

---

고급 예: Intl.DateTimeFormat의 잠재력을 최대한 활용

다양한 현지화, 대체 달력, 시간대 처리 등 고급 시나리오를 통해 날짜 및 시간 형식을 한 단계 더 발전시키세요. 이러한 예는 복잡한 애플리케이션에서 Intl.DateTimeFormat의 다양성과 적응성을 보여줍니다.

1. 다양한 현지화 처리

const date = new Date(2024, 11, 19);
const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date)); // Output: "12/19/2024"

2. 대체 달력으로 서식 지정

const date = new Date(2024, 11, 19);
const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(formatter.format(date)); // Output: "Thursday, December 19, 2024"

3. 시간대 처리

const date = new Date(2024, 11, 19);
const italianFormatter = new Intl.DateTimeFormat('it-IT', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(italianFormatter.format(date)); // Output: "giovedì 19 dicembre 2024"

---

TypeScript 및 Intl.DateTimeFormat

TypeScript와 함께 Intl.DateTimeFormat을 사용하면 유형 안전성과 더 나은 개발 환경이 보장됩니다. Intl.DateTimeFormat에 대한 TypeScript 정의가 내장되어 해당 메서드 및 속성에 대한 자동 완성 및 문서화를 제공합니다.

예:

const islamicFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic');
console.log(islamicFormatter.format(new Date(2024, 11, 19))); // Output: Date in the Islamic calendar

엄격한 유형 지정은 잘못된 옵션이나 메서드 호출 등 컴파일 시간에 잠재적인 문제를 포착하여 런타임 오류를 방지하는 데 도움이 됩니다.

---

인기있는 도서관과의 비교

Intl.DateTimeFormat을 고려하는 이유는 무엇입니까?

• 경량: 기본이며 외부 라이브러리가 필요하지 않아 번들 크기가 줄어듭니다.

• 성능: 종종 라이브러리 기반 솔루션보다 빠릅니다.

• 현지화 내장: 다양한 언어와 달력을 기본적으로 지원합니다.

예: 단순 서식 지정

Moment.js 사용

const date = new Date(Date.UTC(2024, 11, 19, 15, 30)); // Ensure the date is set in UTC

// Formatter for UTC
const utcFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'UTC',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(utcFormatter.format(date)); 
// Output: "Dec 19, 2024, 03:30 PM UTC"

// Formatter for Tokyo time zone
const tokyoFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'Asia/Tokyo',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(tokyoFormatter.format(date)); 
// Output: "2024/12/20 00:30 JST"

// Formatter for Berlin time zone
const berlinFormatter = new Intl.DateTimeFormat('de-DE', {
  timeZone: 'Europe/Berlin',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(berlinFormatter.format(date)); 
// Output: "19. Dez. 2024, 16:30 MEZ"

날짜-fns와 함께

const formatter: Intl.DateTimeFormat = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

const formattedDate: string = formatter.format(new Date(2024, 11, 19));
console.log(formattedDate); // Output: "December 19, 2024"

Day.js 사용

const moment = require('moment');
console.log(moment("2024-12-19").format('dddd, MMMM Do YYYY'));

국제 날짜 시간 형식 사용

const { format } = require('date-fns');
console.log(format(new Date(2024, 11, 19), 'EEEE, MMMM do yyyy'));

외부 라이브러리는 구문적 설탕을 제공할 수 있지만 기본 API는 유연성이나 효율성을 희생하지 않고 동등한 기능을 제공합니다. 기본 API의 구문이 약간 길다는 점은 유지 관리성, 성능 및 단순성 측면에서 약간의 절충안입니다.

---

결론

Intl.DateTimeFormat은 날짜 및 시간 형식 지정을 위한 강력한 기본 솔루션을 제공하므로 Moment.js, date-fns 및 Day.js와 같은 인기 라이브러리에 대한 탁월한 대안이 됩니다. 고성능, 내장된 현지화, 단순화된 유지 관리 기능을 갖춘 최신 JavaScript 애플리케이션을 위한 귀중한 도구입니다.

Intl.DateTimeFormat에 대해 더 자세히 알아보고 추가 기능을 살펴보려면 공식 MDN 웹 문서를 방문하세요. 여기에서 이 강력한 API를 익히는 데 도움이 되는 포괄적인 문서와 실제 예제를 찾을 수 있습니다.

위 내용은 날짜 및 시간 형식을 기본적으로 분쇄: Intl.DateTimeFormat의 숨겨진 기능 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!