如何仅显示日期的特定部分？

简介

完整的日期格式（如“2024年10月15日，星期二”）在某些场景下很实用，但很多时候你只需要显示日期的某些部分。例如，出版日期可能只需显示月份和年份，日历只需显示星期几，生日只需显示日期和月份。

JavaScript 的 Intl.DateTimeFormat 为每个日期组件都提供了独立的选项。你无需选择“完整”或“简短”等预设样式，而是可以精确指定要包含哪些部分，以及每一部分的显示格式。

了解日期组件

日期包含四个主要组件，可以分别进行格式化。

weekday 表示星期几。year 表示年份。month 表示月份。day 表示日期。

每个组件都支持不同的格式化值，用于控制其显示方式。你只需在 options 对象中包含所需的组件即可。

格式化星期几

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 值会显示完整的星期几名称。

在某些语言环境下，两个星期几的 narrow 样式可能相同。例如，在英文中，星期二和星期四都以“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 值将月份显示为不带前导零的数字。2-digit 值将月份显示为带前导零的数字。narrow 值会生成一个字母。short 值会生成缩写的月份名称。long 值会生成完整的月份名称。

在某些语言环境下，两个不同的月份可能具有相同的窄式样。例如，在英文中，三月和五月都以 "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 值会显示不带前导零的日期。2-digit 值会显示带前导零的日期。

对于个位数的日期，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。

你可以组合多个选项，精确显示所需的日期部分。格式化器会根据地区自动处理顺序和标点。不同地区在显示相同日期组件时会采用不同的规范。