如何以短格式或长格式显示相对时间
使用 style 选项控制相对时间是以缩写、完整单词还是紧凑符号的形式显示
介绍
当您显示相对时间（例如“2 小时前”或“3 个月后”）时，格式会占用不同的空间。显示内容时间戳可以根据空间和清晰度的需求显示为“2 小时前”、“2 小时前（缩写）”或“2h 前”。每种格式在可读性和水平空间之间进行权衡。
不同的上下文需要不同的格式选择。例如，社交媒体动态中的帖子时间戳适合使用清晰的文本，如“2 小时前”。移动仪表板中显示多个活动指示器时需要紧凑的文本，如“2h 前”。数据可视化中显示时间线事件时则需要尽可能紧凑的形式以适应屏幕信息。
JavaScript 的 Intl.RelativeTimeFormat 提供了 style 选项来控制这种选择。您可以选择长格式（拼写完整单词）、短格式（标准缩写）或窄格式（最紧凑的表示形式）。此选项使您能够精确控制相对时间在用户面前的显示方式。
style 选项的控制内容
Intl.RelativeTimeFormat 中的 style 选项接受三个值："long"、"short" 和 "narrow"。每个值会生成不同详细程度的相对时间输出。
long 值会拼写出完整的单词，例如“2 小时前”。short 值使用标准缩写，例如“2 小时前（缩写）”。narrow 值生成最紧凑的表示形式，例如“2h 前”，通常会去掉空格并使用最少的符号。
const longFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "long"
});
console.log(longFormatter.format(-2, "hour"));
// 输出: "2 hours ago"
const shortFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "short"
});
console.log(shortFormatter.format(-2, "hour"));
// 输出: "2 hr. ago"
const narrowFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(narrowFormatter.format(-2, "hour"));
// 输出: "2h ago"
如果您省略了 style 选项，它将默认为 "long"。这意味着相对时间格式会使用完整单词，除非您明确要求使用其他显示样式。
使用长格式格式化相对时间
长格式会完整拼写出所有单词。这种格式以额外的水平空间为代价提供了最大的清晰度。
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "long"
});
console.log(formatter.format(-2, "hour"));
// 输出: "2 hours ago"
console.log(formatter.format(3, "day"));
// 输出: "in 3 days"
格式化器会自动处理单数和复数形式。一个小时使用单数 "hour"，而多个小时使用复数 "hours"。您无需手动确定使用哪种形式。
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "long"
});
console.log(formatter.format(-1, "hour"));
// 输出: "1 hour ago"
console.log(formatter.format(-2, "hour"));
// 输出: "2 hours ago"
console.log(formatter.format(1, "day"));
// 输出: "in 1 day"
console.log(formatter.format(5, "day"));
// 输出: "in 5 days"
无论使用哪个时间单位，每个时间单位都会被完整拼写出来。
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "long"
});
console.log(formatter.format(-30, "second"));
// 输出: "30 seconds ago"
console.log(formatter.format(-5, "minute"));
// 输出: "5 minutes ago"
console.log(formatter.format(-3, "month"));
// 输出: "3 months ago"
console.log(formatter.format(2, "year"));
// 输出: "in 2 years"
长格式使相对时间一目了然，无需用户解读缩写。对时间缩写不熟悉的用户会发现拼写完整的单词更易于理解。
使用短格式格式化相对时间
短格式使用大多数人熟悉的标准缩写。这种格式在可读性和空间效率之间取得了平衡。
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "short"
});
console.log(formatter.format(-2, "hour"));
// 输出: "2 hr. ago"
console.log(formatter.format(3, "day"));
// 输出: "in 3 days"
格式化器使用常见的缩写。小时变为 "hr."，分钟变为 "min."，秒变为 "sec."。这些缩写在减少字符数的同时保持了可读性。
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "short"
});
console.log(formatter.format(-30, "second"));
// 输出: "30 sec. ago"
console.log(formatter.format(-5, "minute"));
// 输出: "5 min. ago"
console.log(formatter.format(-3, "month"));
// 输出: "3 mo. ago"
console.log(formatter.format(2, "year"));
// 输出: "in 2 yr."
每个时间单位都使用其标准缩写。秒使用 "sec."，分钟使用 "min."，月份使用 "mo."，年份使用 "yr."。这些缩写被广泛认可，适用于大多数场景。
您可以使用短格式格式化过去和未来的时间。
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "short"
});
console.log(formatter.format(-7, "day"));
// 输出: "7 days ago"
console.log(formatter.format(2, "week"));
// 输出: "in 2 wk."
console.log(formatter.format(-1, "quarter"));
// 输出: "1 qtr. ago"
格式化器在两个方向上都能一致处理。过去的时间使用 "ago"，而未来的时间使用 "in"。无论方向如何，缩写保持不变。
使用紧凑样式格式化相对时间
紧凑样式提供了尽可能简洁的表示形式。这种格式去掉了空格，并使用最少的符号以节省每一个字符。
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(formatter.format(-2, "hour"));
// 输出: "2h ago"
console.log(formatter.format(3, "day"));
// 输出: "in 3 days"
格式化器对大多数单位使用单字母缩写和最小间距。小时变为 "h"，分钟变为 "m"，秒变为 "s"。输出比短样式或长样式更紧凑。
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(formatter.format(-30, "second"));
// 输出: "30s ago"
console.log(formatter.format(-5, "minute"));
// 输出: "5m ago"
console.log(formatter.format(-3, "month"));
// 输出: "3mo ago"
console.log(formatter.format(2, "year"));
// 输出: "in 2y"
紧凑样式因语言环境和单位而异。一些单位的输出显著缩短，而其他单位与短样式相似。在英语中，“天”仍然以全拼形式显示，但“小时”、“分钟”和“秒”缩写为单个字母。
const formatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
console.log(formatter.format(-7, "day"));
// 输出: "7 days ago"
console.log(formatter.format(2, "week"));
// 输出: "in 2w"
console.log(formatter.format(-1, "quarter"));
// 输出: "1q ago"
紧凑样式在空间极其有限且用户熟悉时间测量上下文时效果最佳。这种简化格式假设用户可以在没有明确分隔或解释的情况下理解单位。
比较长、短和紧凑样式
当使用每种样式格式化相同的相对时间时，三种样式选项之间的差异变得清晰。
const longFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "long"
});
const shortFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "short"
});
const narrowFormatter = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
});
const value = -2;
const unit = "hour";
console.log("Long: " + longFormatter.format(value, unit));
console.log("Short: " + shortFormatter.format(value, unit));
console.log("Narrow: " + narrowFormatter.format(value, unit));
// 输出:
// Long: 2 hours ago
// Short: 2 hr. ago
// Narrow: 2h ago
长样式使用完整的单词和明确的间距。短样式使用带句点的标准缩写。紧凑样式使用单字母和最小间距。这种进展显示了清晰度与空间效率之间的权衡。
您可以比较不同的相对时间值，查看每种样式如何处理各种时间跨度。
const times = [
{ value: -30, unit: "second" },
{ value: -5, unit: "minute" },
{ value: -2, unit: "hour" },
{ value: 3, unit: "day" },
{ value: 2, unit: "week" },
{ value: -3, unit: "month" }
];
times.forEach(time => {
const long = new Intl.RelativeTimeFormat("en-US", {
style: "long"
}).format(time.value, time.unit);
const short = new Intl.RelativeTimeFormat("en-US", {
style: "short"
}).format(time.value, time.unit);
const narrow = new Intl.RelativeTimeFormat("en-US", {
style: "narrow"
}).format(time.value, time.unit);
console.log(`${time.value} ${time.unit}:`);
console.log(` Long: ${long}`);
console.log(` Short: ${short}`);
console.log(` Narrow: ${narrow}`);
console.log("");
});
// 输出:
// -30 second:
// Long: 30 seconds ago
// Short: 30 sec. ago
// Narrow: 30s ago
//
// -5 minute:
// Long: 5 minutes ago
// Short: 5 min. ago
// Narrow: 5m ago
//
// -2 hour:
// Long: 2 hours ago
// Short: 2 hr. ago
// Narrow: 2h ago
//
// 3 day:
// Long: in 3 days
// Short: in 3 days
// Narrow: in 3 days
//
// 2 week:
// Long: in 2 weeks
// Short: in 2 wk.
// Narrow: in 2w
//
// -3 month:
// Long: 3 months ago
// Short: 3 mo. ago
// Narrow: 3mo ago
在多个时间戳中，字符数的差异变得显著。在显示许多相对时间的提要或列表中，与长样式相比，紧凑样式可以节省大量水平空间。
不同语言中的相对时间样式差异
所有三种样式选项都会根据您指定的语言环境进行调整。不同的语言使用不同的缩写、词汇和间距规范。
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
const value = -2;
const unit = "hour";
locales.forEach(locale => {
const longFormatter = new Intl.RelativeTimeFormat(locale, {
style: "long"
});
const shortFormatter = new Intl.RelativeTimeFormat(locale, {
style: "short"
});
console.log(locale + ":");
console.log(" Long: " + longFormatter.format(value, unit));
console.log(" Short: " + shortFormatter.format(value, unit));
});
// 输出：
// en-US:
// Long: 2 hours ago
// Short: 2 hr. ago
// de-DE:
// Long: vor 2 Stunden
// Short: vor 2 Std.
// fr-FR:
// Long: il y a 2 heures
// Short: il y a 2 h
// ja-JP:
// Long: 2 時間前
// Short: 2 時間前
长样式在不同语言环境中差异显著，因为每种语言对时间单位有自己的词汇和不同的词序。德语在时间量前使用“vor”，法语在时间量前使用“il y a”，而日语将时间指示符放在数字后面。格式化器会自动处理词序。
短样式也会适应语言环境的规范。德语用“Std.”表示小时，法语用“h”，而日语的短样式与长样式相同。这些特定语言环境的缩写反映了每种文化中相对时间的简写方式。
格式化器会自动处理语法变化。每种语言环境都会生成符合其语言的自然输出。
const locales = ["en-US", "es-ES", "pt-BR"];
const value = -3;
const unit = "month";
locales.forEach(locale => {
const narrowFormatter = new Intl.RelativeTimeFormat(locale, {
style: "narrow"
});
console.log(locale + ": " + narrowFormatter.format(value, unit));
});
// 输出：
// en-US: 3mo ago
// es-ES: hace 3 m
// pt-BR: há 3 meses
窄样式在不同语言环境中也有差异。英语用“mo”表示月份，西班牙语用“m”，而葡萄牙语则拼写为“meses”。这些差异反映了各语言环境中紧凑时间表示法的规范。
何时使用长格式
当清晰性和可访问性比空间效率更重要时，长格式是最佳选择。这种选择使相对时间无需解释即可立即理解。
以可访问性为重点的界面受益于长格式，因为屏幕阅读器更自然地朗读完整的单词。屏幕阅读器朗读“2 hours ago”比“2 hr. ago”更自然，后者可能会被读得不自然或需要特殊的发音规则。
教育内容受益于长格式，因为学习者可能不熟悉时间缩写。解释时间戳的教学材料应拼写出单位名称以避免混淆。
活动动态和时间线使用长格式以保持清晰、对话式的语气。在社交媒体帖子中显示“3 hours ago”比“3h ago”在流畅的文本中更自然。
正式报告和文档使用长格式以保持一致的写作标准。商业报告、审计日志和官方文件通常会拼写出相对时间，而不是缩写。
国际用户在学习语言时受益于长格式。像“hours”和“days”这样的拼写单位名称比缩写更容易被非母语使用者理解。
function formatActivityTimestamp(date, locale) {
const formatter = new Intl.RelativeTimeFormat(locale, {
style: "long",
numeric: "auto"
});
const now = new Date();
const diffInMs = date - now;
const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));
return formatter.format(diffInHours, "hour");
}
const threeHoursAgo = new Date(Date.now() - 3 * 60 * 60 * 1000);
console.log("Activity: " + formatActivityTimestamp(threeHoursAgo, "en-US"));
// Output: "Activity: 3 hours ago"
长格式优先考虑理解而非简洁。每当用户需要毫无歧义或解释努力地理解相对时间时，请使用长格式。
何时使用短格式
短格式最适合在空间有限但缩写广为人知的场景中使用。这种格式在清晰度和效率之间取得了平衡。
移动界面因屏幕宽度有限而受益于短格式。显示多个时间戳的仪表板卡片需要紧凑的相对时间以适应屏幕上的信息。使用 "2 hr. ago" 代替 "2 hours ago" 可以为每个时间戳节省字符，在多个值中累积起来效果显著。
评论区使用短格式来显示评论的发布时间，而不会使界面显得杂乱。在评论旁边显示 "5 min. ago" 比 "5 minutes ago" 更紧凑，同时保持清晰。
在数据表中显示列中的时间戳需要一致的宽度。像 "hr."、"min." 和 "sec." 这样的短缩写可以保持列宽可控。而像 "hours"、"minutes" 和 "seconds" 这样的长单位会不必要地增加列宽。
通知面板使用短格式，因为查看通知的用户对时间缩写已经很熟悉。显示 "1 hr. ago" 的通知在清晰度和显示空间的高效利用之间取得了平衡。
电子邮件客户端使用短格式来显示邮件的时间。显示 "2 days ago" 在邮件列表中比 "2d ago" 更清晰，但比完全拼写的 "2 days ago" 更紧凑。
function formatCommentTimestamp(date, locale) {
const formatter = new Intl.RelativeTimeFormat(locale, {
style: "short",
numeric: "auto"
});
const now = new Date();
const diffInMs = date - now;
const diffInMinutes = Math.round(diffInMs / (1000 * 60));
return formatter.format(diffInMinutes, "minute");
}
const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
console.log(formatCommentTimestamp(fiveMinutesAgo, "en-US"));
// 输出: "5 min. ago"
短格式在清晰度和效率之间取得了平衡。大多数用户能够毫无困惑地识别标准缩写。
何时使用紧凑样式
紧凑样式最适合在空间极其有限的情况下使用，此时每个字符都很重要，并且用户对时间表示法非常熟悉。
在显示尺寸极小的情况下，显示单一指标的紧凑小部件可以使用紧凑样式。例如，一个计时器小部件显示 "5m ago" 的小字体比 "5 minutes ago" 更适合。
信息密集的数据可视化可以从紧凑样式中受益。图表标签、图形注释和时间轴标记需要最少的文本，以避免遮挡底层的视觉内容。使用 "2h ago" 而不是 "2 hr. ago" 可以节省字符，同时对理解上下文的用户保持可读性。
空间有限的移动主屏幕小部件使用紧凑样式可以最大化信息密度。例如，一个活动跟踪小部件在一个小的磁贴中显示多个最近事件时，紧凑的相对时间表示法会更有优势。
智能手表界面使用紧凑样式，因为屏幕空间极其有限。在一个小的圆形屏幕上显示 "1h ago" 比使用更长的格式更合适。
显示带有时间戳的多项内容的列表视图可以使用紧凑样式以保持每一行的紧凑性。例如，一个音乐应用显示最近播放的曲目，一个视频应用显示观看历史，或者一个健身应用显示锻炼历史，所有这些都可以从最小化时间戳格式中受益。
function formatCompactTimestamp(date, locale) {
const formatter = new Intl.RelativeTimeFormat(locale, {
style: "narrow",
numeric: "auto"
});
const now = new Date();
const diffInMs = date - now;
const diffInHours = Math.round(diffInMs / (1000 * 60 * 60));
return formatter.format(diffInHours, "hour");
}
const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000);
console.log(formatCompactTimestamp(twoHoursAgo, "en-US"));
// 输出: "2h ago"
紧凑样式假设用户熟悉时间表示法，并且可以在没有辅助的情况下理解单位。这种选项以最大化空间效率为代价牺牲了一定的清晰度。
将样式与 numeric 选项结合使用
style 选项可以与 numeric 选项一起使用。numeric 选项控制是否使用自然语言（如“昨天”）或数字输出（如“1 天前”）。style 选项控制数字输出出现时的详细程度。
const autoLong = new Intl.RelativeTimeFormat("en-US", {
numeric: "auto",
style: "long"
});
console.log(autoLong.format(-1, "day"));
// 输出: "yesterday"
console.log(autoLong.format(-2, "day"));
// 输出: "2 days ago"
const autoShort = new Intl.RelativeTimeFormat("en-US", {
numeric: "auto",
style: "short"
});
console.log(autoShort.format(-1, "day"));
// 输出: "yesterday"
console.log(autoShort.format(-2, "day"));
// 输出: "2 days ago"
当 numeric 为 "auto" 且格式化器使用自然语言（如“昨天”）时，style 选项不起作用，因为没有数字输出需要样式化。无论样式如何，格式化器都会生成相同的输出。
当格式化器生成数字输出时，style 选项控制详细程度。
const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "long"
});
console.log(alwaysLong.format(-1, "day"));
// 输出: "1 day ago"
const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "short"
});
console.log(alwaysShort.format(-1, "day"));
// 输出: "1 day ago"
const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "narrow"
});
console.log(alwaysNarrow.format(-1, "day"));
// 输出: "1 day ago"
对于天数，三种样式在英语中生成的输出相似。样式差异在其他时间单位中更为明显。
const alwaysLong = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "long"
});
const alwaysShort = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "short"
});
const alwaysNarrow = new Intl.RelativeTimeFormat("en-US", {
numeric: "always",
style: "narrow"
});
console.log("Long: " + alwaysLong.format(-2, "hour"));
console.log("Short: " + alwaysShort.format(-2, "hour"));
console.log("Narrow: " + alwaysNarrow.format(-2, "hour"));
// 输出:
// Long: 2 hours ago
// Short: 2 hr. ago
// Narrow: 2h ago
这种组合让您可以完全控制是否显示自然语言以及数字输出的显示方式。
需要记住的事项
Intl.RelativeTimeFormat 的 style 选项控制格式化相对时间时的显示方式。将其设置为 "long" 时，会显示完整的单词，例如“2 小时前”；设置为 "short" 时，会使用标准缩写，例如“2 小时前（缩写）”；设置为 "narrow" 时，会显示紧凑形式，例如“2h 前”。如果省略该选项，默认值为 "long"。
当清晰度和可访问性比空间更重要，或者用户可能不熟悉时间缩写时，请使用 long 样式。当空间重要且用户理解标准缩写时，请使用 short 样式。仅在空间极其有限且用户对时间表示法非常熟悉的情况下使用 narrow 样式。
格式化器会自动处理特定语言环境的变化，包括不同的单词、缩写、词序和间距约定。将 style 与 numeric 选项结合使用，可以同时控制是否显示自然语言以及数字输出的显示方式。