如何将日期格式化为短、中、长或完整

介绍

格式化日期需要选择显示哪些组件以及如何显示它们。您可能需要显示星期几、月份名称、日期、年份、小时、分钟和时区。每个组件都有自己的格式选项。单独配置所有这些选项会导致代码冗长，并需要了解哪些组合可以很好地协同工作。

JavaScript 的 Intl.DateTimeFormat 提供了预设样式，将常见的格式化选择打包成简单的选项。与其指定您需要数字月份、数字日期和数字年份，不如直接请求 dateStyle: "short"。与其配置小时、分钟和秒的显示，不如直接请求 timeStyle: "medium"。

这些预设适用于所有语言环境。无论是为美式英语、德语、日语还是阿拉伯语格式化，使用相同的样式都能生成适当的输出。本课程将解释每种样式级别提供的内容以及何时使用它们。

什么是 dateStyle 和 timeStyle

dateStyle 选项控制日期的显示方式。它影响显示哪些日期组件以及它们的详细程度。该选项接受四个值："short"、"medium"、"long" 和 "full"。

timeStyle 选项控制时间的显示方式。它影响显示哪些时间组件以及它们的详细程度。该选项接受相同的四个值："short"、"medium"、"long" 和 "full"。

这两个选项为一次性设置多个格式选项提供了快捷方式。当您指定样式时，格式化器会根据语言环境自动为诸如星期几、月份、日期、年份、小时、分钟、秒和时区名称等组件选择适当的值。

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

console.log(formatter.format(new Date("2025-03-15")));
// 输出: "3/15/25"

这个单一选项取代了原本需要设置多个单独组件选项的情况。

理解四种样式级别

每种样式级别代表了简洁性和细节之间的不同平衡。简短样式通过省略组件和使用数字格式来最小化空间占用。完整样式通过包含所有相关组件并拼写出单词来最大化清晰度。

"short" 样式生成适合空间有限场景的紧凑输出。它通常使用数字格式，并省略诸如星期几名称等补充信息。

"medium" 样式提供适中的细节。它通常包括缩写的月份名称和适中的时间精度。

"long" 样式增加了更多的上下文信息。它通常完整拼写月份名称，并包括额外的组件，如时区信息。

"full" 样式生成最完整的表示。它包括所有相关组件，例如星期几名称、完整的月份名称和完整的时区名称。

每种样式的具体组件和格式因地区而异。美式英语可能与德语或日语显示月份的方式不同，但相对的细节级别在各地区之间保持一致。

使用 dateStyle 格式化日期

dateStyle 选项控制日期格式化。每种样式级别对同一日期生成不同的输出。

const date = new Date("2025-03-15T14:30:00");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full"
});

console.log(shortFormatter.format(date));
// 输出: "3/15/25"

console.log(mediumFormatter.format(date));
// 输出: "Mar 15, 2025"

console.log(longFormatter.format(date));
// 输出: "March 15, 2025"

console.log(fullFormatter.format(date));
// 输出: "Saturday, March 15, 2025"

简短样式使用全数字值，是最紧凑的。中等样式缩写了月份名称。长样式完整拼写了月份名称。完整样式添加了星期几名称以提供完整的上下文信息。

使用 timeStyle 格式化时间

timeStyle 选项控制时间的格式化。每种样式级别显示不同的时间组件。

const date = new Date("2025-03-15T14:30:45");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "full"
});

console.log(shortFormatter.format(date));
// 输出: "2:30 PM"

console.log(mediumFormatter.format(date));
// 输出: "2:30:45 PM"

console.log(longFormatter.format(date));
// 输出: "2:30:45 PM PST"

console.log(fullFormatter.format(date));
// 输出: "2:30:45 PM Pacific Standard Time"

短样式仅显示小时和分钟。中样式添加了秒。长样式包括缩写的时区。完整样式则拼写出完整的时区名称。

结合使用 dateStyle 和 timeStyle

您可以同时使用这两个选项来格式化完整的时间戳。格式化器会分别应用这两种样式。

const date = new Date("2025-03-15T14:30:45");

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "short"
});

console.log(formatter.format(date));
// 输出: "March 15, 2025 at 2:30 PM"

日期以长格式显示，而时间使用短格式。这种组合提供了详细的日期上下文，同时保持时间简洁。

您可以根据需要混合任意日期样式和时间样式。

const date = new Date("2025-03-15T14:30:45");

const combinations = [
  { dateStyle: "short", timeStyle: "short" },
  { dateStyle: "medium", timeStyle: "medium" },
  { dateStyle: "long", timeStyle: "long" },
  { dateStyle: "full", timeStyle: "full" }
];

combinations.forEach(options => {
  const formatter = new Intl.DateTimeFormat("en-US", options);
  console.log(formatter.format(date));
});

// 输出:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

使用匹配的样式级别可以在日期和时间之间提供一致的细节。混合样式可以让您更突出某一方面。

不同语言环境中的日期格式差异

每个语言环境都会根据其自身的习惯格式化日期。同一种格式在不同语言环境中会产生不同的输出，但相对的详细程度保持一致。

const date = new Date("2025-03-15T14:30:00");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "short"
  });

  const fullFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "full"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Full:  ${fullFormatter.format(date)}`);
});

// 输出：
// en-US:
//   Short: 3/15/25
//   Full:  Saturday, March 15, 2025
// de-DE:
//   Short: 15.03.25
//   Full:  Samstag, 15. März 2025
// fr-FR:
//   Short: 15/03/2025
//   Full:  samedi 15 mars 2025
// ja-JP:
//   Short: 2025/03/15
//   Full:  2025年3月15日土曜日

美式英语使用月/日/年的顺序。德语使用日.月.年的顺序，并以句号作为分隔符。法语使用日/月/年的顺序。日语使用年/月/日的顺序，并带有汉字。完整格式会在每种语言中添加相应的星期名称和适当的格式。

不同语言环境中的时间格式差异

时间格式也会根据语言环境的习惯进行调整。一些语言环境使用带有 AM/PM 指示的 12 小时制，而另一些则使用 24 小时制。

const date = new Date("2025-03-15T14:30:45");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "short"
  });

  const longFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Long:  ${longFormatter.format(date)}`);
});

// 输出：
// en-US:
//   Short: 2:30 PM
//   Long:  2:30:45 PM PST
// de-DE:
//   Short: 14:30
//   Long:  14:30:45 PST
// fr-FR:
//   Short: 14:30
//   Long:  14:30:45 UTC−8
// ja-JP:
//   Short: 14:30
//   Long:  14:30:45 PST

美式英语使用带有 AM/PM 的 12 小时制。德语、法语和日语使用 24 小时制。长格式会添加时区信息，并根据每种语言环境进行适当的格式化。

何时使用简短样式

简短样式最适合在空间有限或日期需要适应紧凑布局时使用。移动界面、数据表和紧凑显示都能从最小化的日期格式中受益。

在表格列、列表项或任何水平空间受限的地方显示日期时，请使用简短日期样式。数字格式比拼写出的月份或星期名称占用的字符更少。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "short"
});

const events = [
  { name: "团队会议", date: new Date("2025-03-15") },
  { name: "项目截止日期", date: new Date("2025-03-28") },
  { name: "会议", date: new Date("2025-04-05") }
];

events.forEach(event => {
  console.log(`${event.name}: ${formatter.format(event.date)}`);
});

在时间表、日历或不需要精确到秒的地方显示时间时，请使用简短时间样式。大多数情况下只需要显示小时和分钟。

何时使用中等样式

中等样式在细节和空间之间取得了平衡。它比简短样式提供更多的上下文信息，但没有长样式或完整样式那么冗长。这使其适合大多数通用的日期和时间显示。

当您有适中的空间并希望日期比纯数字格式更易读时，请使用中等日期样式。缩写的月份名称可以帮助用户比数字更快地识别月份。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium"
});

const milestone = new Date("2025-03-15");
console.log(`项目完成：${formatter.format(milestone)}`);
// 输出: "项目完成：2025年3月15日"

当您需要秒级精度但希望保持时区隐式时，请使用中等时间样式。这适用于在应用日志或活动提要中显示精确的时间戳，在这些地方用户可以理解时区上下文。

何时使用长格式

长格式提供了额外的细节，但不会像完整格式那样冗长。它完整地拼写出信息，同时省略了诸如星期几名称等补充组件。

在需要强调的重要日期或希望日期更自然易读时，使用长日期格式。完整拼写的月份名称比缩写更容易快速浏览。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long"
});

const releaseDate = new Date("2025-03-15");
console.log(`发布日期：${formatter.format(releaseDate)}`);
// 输出："发布日期：2025年3月15日"

当时区信息很重要时，使用长时间格式。这有助于用户理解事件发生或将要发生的时间相对于他们自己的时区。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "long",
  timeZone: "America/New_York"
});

const callTime = new Date("2025-03-15T14:30:00");
console.log(`电话会议：${formatter.format(callTime)}`);
// 输出："电话会议：下午2:30:45 EST"

何时使用完整格式

完整格式提供最全面的日期和时间表示。它包含所有相关组件，适用于需要清晰和完整性比空间效率更重要的场景。

在显示需要最大上下文的日期时，使用完整日期格式。添加星期几有助于用户将日期放入每周日历中，这对于安排、计划和理解时间关系非常有用。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full"
});

const appointmentDate = new Date("2025-03-15");
console.log(`预约：${formatter.format(appointmentDate)}`);
// 输出："预约：2025年3月15日星期六"

在显示需要完整时区上下文的时间时，使用完整时间格式。拼写出完整的时区名称可以消除不同地区用户的歧义。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full",
  timeStyle: "full"
});

const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// 输出："2025年3月15日星期六 下午2:30:45 太平洋标准时间"

完整格式非常适合显示单个重要事件、确认消息或任何用户受益于完整时间上下文的场景。

理解限制条件

dateStyle 和 timeStyle 选项不能与单独的组件选项一起使用。您必须在使用样式预设和单独配置组件之间进行选择。

以下代码将无法运行：

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // 错误：不能组合使用
});

dateStyle 选项已经决定了星期的格式化方式。添加显式的 weekday 选项会导致冲突。同样的限制也适用于 timeStyle 和诸如 hour、minute 或 second 的组件选项。

如果您需要对特定组件进行更多控制，请省略样式选项并单独配置组件。

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

console.log(formatter.format(new Date("2025-03-15")));
// 输出: "Saturday, March 15, 2025"

您可以同时使用 dateStyle 和 timeStyle，因为它们控制的是格式化的不同方面。您还可以将它们与不冲突的选项结合使用，例如 timeZone、calendar 或 numberingSystem。

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "long",
  timeZone: "America/New_York"
});

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// 输出: "March 15, 2025 at 2:30:45 PM EST"

为用户的语言环境格式化日期

使用浏览器的语言偏好设置，根据每个用户的期望格式化日期。navigator.language 属性提供了用户的首选语言环境。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long",
  timeStyle: "short"
});

const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// 输出因用户的语言环境而异
// 对于 en-US: "March 15, 2025 at 2:30 PM"
// 对于 de-DE: "15. März 2025 um 14:30"
// 对于 fr-FR: "15 mars 2025 à 14:30"

您还可以传递整个 navigator.languages 数组以启用回退行为。格式化器会使用数组中它支持的第一个语言环境。

const formatter = new Intl.DateTimeFormat(navigator.languages, {
  dateStyle: "medium"
});

重用格式化器以提高性能

创建 Intl.DateTimeFormat 实例需要处理区域设置数据和选项。当使用相同设置格式化多个日期时，请先创建格式化器并重复使用。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium",
  timeStyle: "short"
});

const events = [
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-16T10:00:00"),
  new Date("2025-03-17T16:45:00")
];

events.forEach(date => {
  console.log(formatter.format(date));
});
// 输出：
// "2025年3月15日 下午2:30"
// "2025年3月16日 上午10:00"
// "2025年3月17日 下午4:45"

这种模式在格式化日期数组或在用户界面中显示多个时间戳时可以提高性能。

需要记住的事项

dateStyle 和 timeStyle 选项提供了预设的格式化级别："short"、"medium"、"long" 和 "full"。每个级别在简洁性和详细性之间提供了不同的平衡，其中 short 最为简洁，full 最为完整。

使用这些预设而不是手动配置单独的日期和时间组件。预设可以为每个区域设置生成适当的输出，而无需您了解特定区域设置的格式规则。

您可以同时使用 dateStyle 和 timeStyle，但不能将它们与单独的组件选项（如 weekday 或 hour）结合使用。选择预设样式以简化操作，或选择单独的组件以进行精细控制。

使用用户的区域设置（如 navigator.language）格式化日期，以根据每个用户的期望显示日期。在格式化多个日期时，重用格式化器实例以获得更好的性能。