날짜의 특정 부분만 표시하는 방법은 무엇인가요?

소개

"2024년 10월 15일 화요일"과 같은 전체 날짜 형식은 일부 상황에서 잘 작동하지만, 종종 날짜의 특정 부분만 표시해야 할 때가 있습니다. 게시 날짜에는 월과 연도만 표시하거나, 캘린더에는 요일만 표시하거나, 생일에는 일과 월만 표시하고 싶을 수 있습니다.

JavaScript의 Intl.DateTimeFormat는 각 날짜 구성 요소에 대한 개별 옵션을 제공합니다. "full" 또는 "short"와 같은 사전 설정된 스타일을 선택하는 대신, 포함할 부분과 각 부분의 형식을 정확하게 지정합니다.

날짜 구성 요소 이해하기

날짜에는 독립적으로 형식을 지정할 수 있는 네 가지 주요 구성 요소가 있습니다.

weekday는 요일을 표시합니다. year는 연도를 표시합니다. month는 월을 표시합니다. day는 일을 표시합니다.

각 구성 요소는 표시 방식을 제어하는 다양한 형식 값을 허용합니다. 옵션 객체에 필요한 구성 요소만 포함하면 됩니다.

요일 형식 지정

weekday 옵션은 요일을 표시합니다. 출력 길이를 제어하는 세 가지 값을 허용합니다.

const date = new Date('2024-10-15');

const narrow = new Intl.DateTimeFormat('en-US', {
  weekday: 'narrow'
});
console.log(narrow.format(date)); // "T"

const short = new Intl.DateTimeFormat('en-US', {
  weekday: 'short'
});
console.log(short.format(date)); // "Tue"

const long = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});
console.log(long.format(date)); // "Tuesday"

narrow 값은 한 글자를 생성합니다. short 값은 축약된 이름을 생성합니다. long 값은 전체 요일 이름을 생성합니다.

일부 로케일에서는 두 요일이 동일한 축약 스타일을 가질 수 있습니다. 예를 들어, 영어에서 화요일(Tuesday)과 목요일(Thursday)은 모두 "T"로 시작합니다.

연도 형식 지정

year 옵션은 연도를 표시합니다. 두 가지 값을 허용합니다.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  year: 'numeric'
});
console.log(numeric.format(date)); // "2024"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  year: '2-digit'
});
console.log(twoDigit.format(date)); // "24"

numeric 값은 전체 연도를 표시합니다. 2-digit 값은 마지막 두 자리만 표시합니다.

월 형식 지정

month 옵션은 월을 표시합니다. 다양한 세부 수준을 제공하는 다섯 가지 값을 허용합니다.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  month: 'numeric'
});
console.log(numeric.format(date)); // "10"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  month: '2-digit'
});
console.log(twoDigit.format(date)); // "10"

const narrow = new Intl.DateTimeFormat('en-US', {
  month: 'narrow'
});
console.log(narrow.format(date)); // "O"

const short = new Intl.DateTimeFormat('en-US', {
  month: 'short'
});
console.log(short.format(date)); // "Oct"

const long = new Intl.DateTimeFormat('en-US', {
  month: 'long'
});
console.log(long.format(date)); // "October"

numeric 값은 월을 앞자리 0 없이 숫자로 표시합니다. 2-digit 값은 월을 앞자리 0과 함께 숫자로 표시합니다. narrow 값은 한 글자를 생성합니다. short 값은 축약된 월 이름을 생성합니다. long 값은 전체 월 이름을 생성합니다.

일부 로케일에서는 두 달이 동일한 축약 스타일을 가질 수 있습니다. 예를 들어, 영어에서 3월과 5월은 모두 "M"으로 시작합니다.

일 형식 지정

day 옵션은 일을 표시합니다. 두 가지 값을 허용합니다.

const date = new Date('2024-10-15');

const numeric = new Intl.DateTimeFormat('en-US', {
  day: 'numeric'
});
console.log(numeric.format(date)); // "15"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  day: '2-digit'
});
console.log(twoDigit.format(date)); // "15"

numeric 값은 앞에 0이 없는 일을 표시합니다. 2-digit 값은 앞에 0이 있는 일을 표시합니다.

한 자리 숫자 일의 경우, numeric는 "5"와 같은 값을 생성하고 2-digit는 "05"를 생성합니다.

여러 날짜 부분 결합

단일 포매터에서 여러 옵션을 지정하여 필요한 정확한 조합을 표시할 수 있습니다.

const date = new Date('2024-10-15');

// Month and year only
const monthYear = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long'
});
console.log(monthYear.format(date)); // "October 2024"

// Weekday and day only
const weekdayDay = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric'
});
console.log(weekdayDay.format(date)); // "Tue 15"

// Month and day only
const monthDay = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});
console.log(monthDay.format(date)); // "October 15"

// All components with custom formatting
const custom = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: '2-digit'
});
console.log(custom.format(date)); // "Tuesday, Oct 15, 2024"

포매터는 로케일의 규칙에 따라 구성 요소를 자동으로 배열합니다. 순서나 구두점에 대해 걱정할 필요가 없습니다.

로케일 간 옵션 작동 방식

동일한 옵션이 다른 로케일에서 다른 출력을 생성합니다. 각 로케일은 날짜 부분의 순서 지정 및 형식 지정에 대한 자체 규칙을 따릅니다.

const date = new Date('2024-10-15');
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024"

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024"

const ja = new Intl.DateTimeFormat('ja-JP', options);
console.log(ja.format(date)); // "2024年10月15日"

const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date)); // "١٥ أكتوبر ٢٠٢٤"

독일어는 일을 먼저 배치하고 마침표 구분 기호를 사용합니다. 일본어는 연-월-일 순서를 사용하며 일본어 문자를 사용합니다. 아랍어는 월 이름과 숫자 모두에 아랍어 문자를 사용합니다.

요일과 월 이름도 로케일에 따라 변경됩니다.

const date = new Date('2024-10-15');
const options = {
  weekday: 'long',
  month: 'long'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "Tuesday, October"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "mardi octobre"

const es = new Intl.DateTimeFormat('es-ES', options);
console.log(es.format(date)); // "martes, octubre"

프랑스어는 요일과 월 이름 모두에 소문자를 사용합니다. 스페인어도 소문자를 사용하지만 쉼표 구분 기호를 포함합니다.

일반적인 사용 사례

월과 연도를 표시하는 것은 게시 날짜 및 아카이브 목록에 적합합니다.

const date = new Date('2024-10-15');

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

console.log(`Published: ${formatter.format(date)}`);
// "Published: October 2024"

요일 이름을 표시하는 것은 캘린더 및 일정에 적합합니다.

const date = new Date('2024-10-15');

const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long'
});

console.log(`Event on ${formatter.format(date)}`);
// "Event on Tuesday"

연도 없이 월과 일을 표시하는 것은 생일 및 연례 행사에 적합합니다.

const date = new Date('2024-10-15');

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

console.log(`Birthday: ${formatter.format(date)}`);
// "Birthday: October 15"

요약

Intl.DateTimeFormat 옵션 객체를 사용하면 전체 날짜 대신 날짜의 특정 부분을 표시할 수 있습니다. weekday 옵션은 narrow, short 또는 long를 허용합니다. year 옵션은 numeric 또는 2-digit를 허용합니다. month 옵션은 numeric, 2-digit, narrow, short 또는 long를 허용합니다. day 옵션은 numeric 또는 2-digit를 허용합니다.

여러 옵션을 결합하여 필요한 부분만 정확하게 표시할 수 있습니다. 포매터는 로케일에 따라 순서와 구두점을 자동으로 처리합니다. 동일한 날짜 구성 요소를 표시하는 데 있어 로케일마다 다른 규칙을 사용합니다.