如何将时间格式化为短、中、长或完整格式
使用预设的时间样式，无需单独配置各个组件，即可控制显示哪些时间元素
简介
格式化时间时，需要选择要显示哪些组成部分。例如，会议时间通常显示小时和分钟，精确的时间戳会加上秒，跨时区协调时还需包含时区信息。每个组件都有各自的格式选项。如果逐一配置所有选项，代码会变得冗长，还需要了解哪些组合搭配效果最佳。
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")));
// Output: "2:30 PM"
通过这个单一选项，可以替代原本需要分别设置多个组件选项的繁琐操作。
了解四种样式级别
每种样式级别在简洁性和详细性之间有不同的平衡。简短样式仅显示必要的组成部分以节省空间。完整样式则包含所有相关组件（如时区名称），以最大化清晰度。
"short" 样式生成紧凑的输出，仅显示小时和分钟。它省略了秒和时区信息，适用于大多数日常时间显示需求。
"medium" 样式增加了秒数，提供更高的精度。它仍然省略时区信息，但可以精确到秒。
"long" 样式增加了缩写的时区信息。它包含小时、分钟、秒和简短的时区代码，如 PST 或 GMT。
"full" 样式提供最完整的时间表示。它包含所有时间组件，并完整拼写时区名称，如 Pacific Standard Time。
每种样式的具体组成部分和格式会因地区而异。美式英语通常使用 12 小时制并带有 AM/PM，而德语则使用 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));
// Output: "2:30 PM"
console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"
console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"
console.log(fullFormatter.format(date));
// Output: "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));
// Output: "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));
});
// Output:
// "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)}`);
});
// Output:
// 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
美式英语采用 12 小时制并显示 AM/PM。德语、法语和日语则使用 24 小时制。长格式会根据各自的语言环境，添加适当格式的时区信息。
这些差异反映了各文化在时间显示上的习惯。API 会根据 locale 标识自动处理这些差异。
何时使用短格式
短格式最适合日常时间显示。它能展示用户通常需要的信息，同时避免因显示秒数或时区等细节而使界面变得杂乱。
在显示会议时间、预约安排或任何不需要精确到秒的场景时，建议使用短时间格式。大多数用户更关注小时和分钟，而不是具体的秒数。
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "short"
});
const meetings = [
{ title: "Team standup", time: new Date("2025-03-15T09:00:00") },
{ title: "Client call", time: new Date("2025-03-15T14:30:00") },
{ title: "Code review", time: new Date("2025-03-15T16:45:00") }
];
meetings.forEach(meeting => {
console.log(`${meeting.title}: ${formatter.format(meeting.time)}`);
});
// Output:
// Team standup: 9:00 AM
// Client call: 2:30 PM
// Code review: 4:45 PM
日历应用、排程界面和时间选择器都适合使用短格式。紧凑的格式让界面简洁，同时为用户提供理解事件发生时间所需的全部信息。
短格式默认用户已了解时区背景。当所有用户都处于同一时区，或应用已自动处理时区转换时，显式显示时区信息就变得多余。
何时使用中等格式
中等格式在保留秒级精度的同时，隐式包含时区信息。适用于需要精确时间但时区可由上下文推断的场景。
在应用日志、活动动态或审计追踪中显示精确时间戳时，建议使用中等时间格式。这些场景需要精确到秒，以便准确了解操作发生的时间。
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "medium"
});
const activities = [
{ action: "User logged in", time: new Date("2025-03-15T09:15:23") },
{ action: "File uploaded", time: new Date("2025-03-15T09:18:47") },
{ action: "Settings updated", time: new Date("2025-03-15T09:22:11") }
];
activities.forEach(activity => {
console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});
// Output:
// User logged in: 9:15:23 AM
// File uploaded: 9:18:47 AM
// Settings updated: 9:22:11 AM
开发者工具、调试界面和性能监控面板通常采用中等格式来展示精确的时间信息。秒级精度有助于识别模式、测量时长和关联事件。
当需要比短格式更详细，但又不需要冗长时区信息时，中等格式非常适用。大多数用户可以根据应用上下文推断时区。
何时使用长格式
长格式在时间显示中加入了缩写的时区信息，帮助用户理解事件发生或将要发生的时间与自身时区的关系。
在需要跨时区协调或显示可能因用户位置不同而被不同解释的时间时，建议使用长时间格式。缩写的时区代码提供了上下文，同时不会占用过多空间。
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const events = [
{ name: "Webinar starts", time: new Date("2025-03-15T14:00:00") },
{ name: "Registration closes", time: new Date("2025-03-15T13:30:00") }
];
events.forEach(event => {
console.log(`${event.name}: ${formatter.format(event.time)}`);
});
// Output:
// Webinar starts: 2:00:00 PM EST
// Registration closes: 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));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
完整样式非常适合展示单一重要事件、确认消息，或任何用户需要完整时间上下文的场景。国际会议邀请、活动确认以及正式的日程安排通知都能从这种详细程度中受益。
时效性强的法律文件、官方记录和合规相关的时间戳通常采用完整样式，以确保时间信息无歧义。完整的时区名称可以避免事件发生时间上的任何混淆。
理解相关限制
当使用 timeStyle 选项时，不能与单独的时间组件选项同时使用。您必须在使用样式预设和单独配置组件之间进行选择。
以下用法不可行：
const formatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium",
hour: "2-digit" // Error: cannot combine
});
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")));
// Output: "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")));
// Output: "March 15, 2025 at 2:30:45 PM 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));
// Output varies by user's locale
// For en-US: "2:30 PM"
// For de-DE: "14:30"
// For fr-FR: "14:30"
你也可以传递整个 navigator.languages 数组以启用回退机制。格式化器会使用该数组中第一个支持的 locale。
const formatter = new Intl.DateTimeFormat(navigator.languages, {
timeStyle: "medium"
});
复用格式化器以提升性能
创建 Intl.DateTimeFormat 实例时需要处理 locale 数据和选项。如果多次使用相同设置进行格式化，建议只创建一次格式化器并复用。
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));
});
// Output:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"
当需要格式化时间数组或在用户界面中显示大量时间戳时，这种模式可以提升性能。
需要注意的事项
timeStyle 选项提供了预设的格式化级别："short"、"medium"、"long" 和 "full"。每个级别在简洁性和详细程度之间有不同的平衡。short 显示小时和分钟，medium 增加秒，long 增加缩写时区，full 包含完整时区名称。
请使用这些预设，而不是手动配置各个时间组件。预设可以为每个 locale 生成合适的输出，无需你了解 locale 特定的格式规则。
你可以将 timeStyle 与 dateStyle 一起使用，但不能与 hour 或 minute 等单独组件选项组合。可根据需求选择预设样式以简化操作，或选择单独组件以实现更细致的控制。
使用 navigator.language 获取用户的 locale，并根据用户的期望格式化时间。多次格式化时复用格式化器实例以获得更好的性能。