如何将时间格式化为短格式、中格式、长格式或完整格式

介绍

格式化时间需要选择显示哪些组件。您可能会显示会议时间的小时和分钟，为精确的时间戳添加秒，或者包括时区信息以便跨区域协调。每个组件都有自己的格式选项。单独配置所有这些选项会导致代码冗长，并需要了解哪些组合效果更好。

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

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

什么是 timeStyle

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

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

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

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

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

理解四种样式级别

每种样式级别代表了简洁性和细节之间的不同平衡。简短样式通过仅显示必要组件来最小化空间占用。完整样式通过包括所有相关组件（如时区名称）来最大化清晰度。

"short" 样式生成紧凑的输出，仅显示小时和分钟。它省略了秒和时区信息，非常适合大多数日常时间显示需求。

"medium" 样式添加了秒以提供更高的精确度。它仍然省略了时区信息，但可以精确到秒。

"long" 样式添加了缩写的时区信息。它包括小时、分钟、秒和简短的时区代码，如 PST 或 GMT。

"full" 样式生成最完整的表示。它包括所有时间组件，并完整拼写时区名称，例如 Pacific Standard Time。

每种样式的具体组件和格式因语言环境而异。美式英语通常使用带有 AM/PM 的 12 小时制，而德语使用 24 小时制。相对的细节级别在所有语言环境中保持一致。

使用 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"

short 样式仅显示小时和分钟，是最紧凑的格式。medium 样式增加了秒数以提高精确度。long 样式包含缩写的时区代码。full 样式则拼写出完整的时区名称以提供最大清晰度。

结合使用 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"

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

您可以根据需要将任意日期样式与任意时间样式混合使用。

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: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 小时制。长样式会添加适合每种语言环境的时区信息。

这些差异反映了每种文化在显示时间方面的惯例。API 会根据语言环境标识符自动处理这些变化。

何时使用短样式

短样式最适合日常时间显示。它展示了用户通常需要的信息，同时避免因显示秒数或时区细节而使界面显得杂乱。

在显示会议时间、安排预约或任何不需要秒级精度的场景中，使用短时间样式。大多数用户更倾向于以小时和分钟为单位思考，而不是精确到秒。

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

const meetings = [
  { title: "团队站会", time: new Date("2025-03-15T09:00:00") },
  { title: "客户电话", time: new Date("2025-03-15T14:30:00") },
  { title: "代码审查", time: new Date("2025-03-15T16:45:00") }
];

meetings.forEach(meeting => {
  console.log(`${meeting.title}: ${formatter.format(meeting.time)}`);
});

// 输出：
// 团队站会: 9:00 AM
// 客户电话: 2:30 PM
// 代码审查: 4:45 PM

日历应用程序、日程安排界面和时间选择器都可以从短样式中受益。紧凑的格式使界面保持简洁，同时提供用户理解事件发生时间所需的所有信息。

短样式假设用户了解时区上下文。当所有用户都在同一时区操作，或者应用程序透明地处理时区转换时，显示明确的时区信息就变得多余了。

何时使用中等样式

中等样式提供了第二级别的精确性，同时隐式保留了时区信息。这使其适用于需要精确时间但时区可以从上下文中理解的场景。

在显示应用程序日志、活动流或审计记录中的精确时间戳时，使用中等时间样式。这些场景需要精确到秒的时间信息，以便了解操作发生的确切时间。

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

const activities = [
  { action: "用户登录", time: new Date("2025-03-15T09:15:23") },
  { action: "文件上传", time: new Date("2025-03-15T09:18:47") },
  { action: "设置更新", time: new Date("2025-03-15T09:22:11") }
];

activities.forEach(activity => {
  console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});

// 输出：
// 用户登录: 9:15:23 AM
// 文件上传: 9:18:47 AM
// 设置更新: 9:22:11 AM

开发者工具、调试界面和性能监控仪表板使用中等样式来显示精确的时间信息。秒级精度有助于识别模式、测量持续时间和关联事件。

当您需要比短样式提供更多的细节但不需要时区信息的冗长时，中等样式非常适合。大多数用户可以从应用程序上下文中推断时区。

何时使用长样式

长样式在时间显示中添加了缩写的时区信息。这有助于用户理解事件发生或将要发生的时间相对于他们自己的时区。

在跨时区协调或显示可能因查看者位置不同而被不同解释的时间时，使用长时间样式。缩写的时区代码提供了上下文，同时不会占用过多空间。

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

const events = [
  { name: "网络研讨会开始", time: new Date("2025-03-15T14:00:00") },
  { name: "注册截止", time: new Date("2025-03-15T13:30:00") }
];

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

// 输出：
// 网络研讨会开始: 2:00:00 PM EST
// 注册截止: 1:30:00 PM EST

国际化应用程序、分布式团队的日程安排工具和事件协调平台受益于长样式。时区代码消除了时间表示的歧义。

航班预订系统、会议日程安排应用程序和远程工作工具使用长样式来帮助用户理解不同时区的时间。该格式在清晰性和空间效率之间取得了平衡。

何时使用完整样式

完整样式提供最全面的时间表示。它会拼写出完整的时区名称，消除关于时间所代表的时区的所有歧义。

在需要最大清晰度的情况下显示时间时，请使用完整时间样式。拼写出完整的时区名称有助于不同地区的用户准确理解事件发生的时间。

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 太平洋标准时间"

完整样式非常适合显示单一重要事件、确认消息或任何用户需要完整时间上下文的场景。国际会议邀请、事件确认和正式的日程安排通信都能从这种详细程度中受益。

时间敏感的法律文件、官方记录和合规相关的时间戳使用完整样式以提供明确的时间信息。完整的时区名称可以防止对事件发生时间的任何混淆。

理解限制

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

以下代码将无法运行：

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

timeStyle 选项已经决定了小时的格式。添加显式的 hour 选项会导致冲突。同样的限制也适用于其他组件选项，例如 minute、second 或 timeZoneName。

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

const formatter = new Intl.DateTimeFormat("en-US", {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
});

console.log(formatter.format(new Date("2025-03-15T14:30:45")));
// 输出: "02:30:45 PM"

您可以同时使用 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")));
// 输出: "2025年3月15日 下午2:30:45 EST"

根据用户的语言环境格式化时间

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

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

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

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

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

重用格式化器以提高性能

创建 Intl.DateTimeFormat 实例需要处理语言环境数据和选项。当使用相同设置格式化多个时间时，请创建一次格式化器并重复使用。

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

const times = [
  new Date("2025-03-15T09:00:00"),
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-15T16:45:00")
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// 输出：
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"

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

需要记住的事项

timeStyle 选项提供了预设的格式化级别："short"、"medium"、"long" 和 "full"。每个级别代表了简洁性和详细程度之间的不同平衡。short 显示小时和分钟，medium 添加秒，long 添加缩写的时区，full 包括完整的时区名称。

使用这些预设而不是手动配置单个时间组件。预设可以为每个语言环境生成适当的输出，而无需您了解特定语言环境的格式化规则。

您可以将 timeStyle 与 dateStyle 一起使用，但不能与单个组件选项（如 hour 或 minute）结合使用。在简化的预设样式和精细控制的单个组件之间进行选择。

使用来自 navigator.language 的用户语言环境格式化时间，以根据每个用户的期望显示时间。在格式化多个时间时，重用格式化器实例以获得更好的性能。