如何将日期格式化为短格式、中等格式、长格式或完整格式
使用预设的日期和时间样式，无需单独配置各个组件即可控制格式化的详细程度
简介
格式化日期时，需要选择显示哪些组件以及如何显示。例如，可以显示星期几、月份名称、日期、年份、小时、分钟和时区。每个组件都有自己的格式选项。如果单独配置所有这些选项，代码会变得冗长，并且需要了解哪些组合效果最佳。
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")));
// Output: "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));
// Output: "3/15/25"
console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"
console.log(longFormatter.format(date));
// Output: "March 15, 2025"
console.log(fullFormatter.format(date));
// Output: "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));
// 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: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)}`);
});
// Output:
// 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)}`);
});
// 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
美式英语使用带 AM/PM 的 12 小时制。德语、法语和日语都采用 24 小时制。长格式会根据不同语言环境添加相应格式的时区信息。
何时使用短格式
短格式在空间有限或日期需要适应紧凑布局时效果最佳。移动端界面、数据表格和紧凑显示区域都适合使用最简约的日期格式。
在表格列、列表项或任何横向空间受限的场景下，建议使用短日期格式。数字格式比拼写月份或星期名称所占字符更少。
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "short"
});
const events = [
{ name: "Team meeting", date: new Date("2025-03-15") },
{ name: "Project deadline", date: new Date("2025-03-28") },
{ name: "Conference", 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(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"
当需要精确到秒但希望时区保持隐含时，建议使用中等时间格式。适用于应用日志或活动动态中显示精确时间戳，用户已知时区上下文。
何时使用长格式
长格式在提供更多细节的同时不会像完整格式那样冗长。它会完整拼写信息，但省略如星期名称等补充内容。
对于需要强调的重要日期或希望日期更自然易读的场景，建议使用长日期格式。完整拼写的月份名称比缩写更易于快速浏览。
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "long"
});
const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"
当时区信息很重要时，请使用长时间格式。这有助于用户理解事件发生或将要发生的时间与其所在时区的关系。
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"
何时使用完整样式
完整样式会生成最全面的日期和时间表示。它包含所有相关组件，适用于对清晰度和完整性要求高于空间效率的场景。
在需要最大化上下文信息时，建议使用完整日期样式进行展示。添加星期几有助于用户将日期定位到一周的日历中，这对于日程安排、计划和理解时间关系非常有用。
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full"
});
const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"
在需要完整时区上下文的时间展示场景下，建议使用完整时间样式。将时区全称拼写出来可以消除不同地区用户的歧义。
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"
完整样式非常适合展示单个重要事件、确认消息，或任何用户需要完整时间上下文的场景。
理解使用限制
dateStyle 和 timeStyle 选项不能与单独的组件选项同时使用。您必须在使用样式预设和单独配置组件之间进行选择。
以下用法不可行：
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium",
weekday: "long" // Error: cannot combine
});
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")));
// Output: "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")));
// Output: "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));
// Output varies by user's locale
// For en-US: "March 15, 2025 at 2:30 PM"
// For de-DE: "15. März 2025 um 14:30"
// For 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));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"
这种模式在格式化日期数组或在用户界面中显示大量时间戳时可以提升性能。
需要记住的要点
dateStyle 和 timeStyle 选项提供了预设的格式化级别："short"、"medium"、"long" 和 "full"。每个级别在简洁性和详细性之间有不同的平衡，short 最简洁，full 最完整。
建议使用这些预设，而不是手动配置各个日期和时间组件。预设可以为每个本地化环境生成合适的输出，无需你了解本地化的具体格式规则。
你可以同时使用 dateStyle 和 timeStyle，但不能与 weekday 或 hour 等单独组件选项组合。可以根据需要选择预设样式以简化操作，或选择单独组件以实现更细致的控制。
使用 navigator.language 中的用户本地化来格式化日期，以符合每个用户的期望。格式化多个日期时复用格式化器实例以获得更好的性能。