如何以简短或完整形式显示持续时间
使用样式选项来控制持续时间是以缩写、完整单词还是紧凑符号的形式显示
介绍
当您显示某件事情所需的时间时，不同的格式会占用不同的空间。例如，1小时30分钟的锻炼时长可以显示为“1小时30分钟”、“1小时30分”或“1h 30m”，具体取决于您有多少空间以及需要多清晰。每种格式在可读性和水平空间之间进行权衡。
不同的场景需要不同的格式选择。例如，视频播放器的控制栏显示时长时，适合使用紧凑的文本如“1h 30m”。锻炼总结屏幕解释课程时长时，需要清晰的文本如“1小时30分钟”。移动仪表板显示多个计时器值时，则需要尽可能紧凑的形式以适应屏幕上的信息。
JavaScript 的 Intl.DurationFormat 提供了 style 选项来控制这种选择。您可以选择长格式（拼写完整的单词）、短格式（使用标准缩写）或窄格式（最紧凑的表示形式）。此选项使您能够精确控制时长在用户面前的显示方式。
style 选项的控制内容
Intl.DurationFormat 中的 style 选项接受三个用于基于文本格式化的值："long"、"short" 和 "narrow"。每个值都会生成不同详细程度的时长输出。
long 值会拼写出完整的单位名称，例如“1小时30分钟”。short 值使用标准缩写，例如“1小时30分”。narrow 值生成最紧凑的表示形式，例如“1h 30m”，通常会去掉空格并使用最少的符号。
const duration = { hours: 1, minutes: 30 };
const longFormatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(longFormatter.format(duration));
// 输出: "1 hour and 30 minutes"
const shortFormatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(shortFormatter.format(duration));
// 输出: "1 hr and 30 min"
const narrowFormatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(narrowFormatter.format(duration));
// 输出: "1h 30m"
如果您省略了 style 选项，它的默认值是 "short"。这意味着时长格式化会使用标准缩写，除非您明确要求使用其他显示样式。
使用长格式格式化持续时间
长格式会完整拼写出单位名称。这种格式以额外的水平空间为代价提供了最大的清晰度。
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// 输出: "2 hours and 30 minutes"
格式化器会自动处理单数和复数形式。一个小时使用单数 "hour"，而多个小时使用复数 "hours"。您无需手动确定使用哪种形式。
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(formatter.format({ hours: 1, minutes: 30 }));
// 输出: "1 hour and 30 minutes"
console.log(formatter.format({ hours: 2, minutes: 1 }));
// 输出: "2 hours and 1 minute"
无论持续时间中包含多少单位，每种单位类型都会被完整拼写出来。
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// 输出: "2 hours, 30 minutes and 45 seconds"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// 输出: "5 minutes and 30 seconds"
console.log(formatter.format({ hours: 1, minutes: 0, seconds: 15 }));
// 输出: "1 hour, 0 minutes and 15 seconds"
格式化器会在单位之间添加适当的连接词。英语使用逗号和 "and" 来分隔单位。连接词出现在列表中最后一个单位之前。
长格式使持续时间一目了然，无需用户解读缩写。对于不熟悉时间缩写的用户来说，拼写完整的单位更易于理解。
使用短格式格式化持续时间
短格式使用大多数人熟悉的标准缩写。这种格式在可读性和空间效率之间取得了平衡。
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// 输出: "2 hr and 30 min"
格式化器使用常见的缩写。小时变为 "hr"，分钟变为 "min"，秒变为 "sec"。这些缩写在减少字符数的同时保持了可读性。
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// 输出: "1 hr, 46 min and 40 sec"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// 输出: "5 min and 30 sec"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// 输出: "3 hr and 15 min"
短格式是默认行为。如果您省略 style 选项，格式化器会自动使用短格式。
const formatter = new Intl.DurationFormat("en-US");
console.log(formatter.format({ hours: 2, minutes: 30 }));
// 输出: "2 hr and 30 min"
这种默认设置使短格式在您希望获得标准缩写的持续时间时非常方便，而无需显式指定样式选项。
您可以使用短格式格式化不同类型的持续时间，以查看标准缩写。
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// 输出: "2 days and 5 hr"
console.log(formatter.format({ weeks: 1, days: 3 }));
// 输出: "1 wk and 3 days"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// 输出: "1 hr, 30 min, 45 sec and 500 ms"
每种单位类型都使用其标准缩写。天保持为 "days"，周使用 "wk"，毫秒使用 "ms"。这些缩写被广泛认可，并且在大多数情况下都能很好地工作。
使用窄样式格式化持续时间
窄样式提供了尽可能紧凑的表示形式。这种格式去掉了空格，并使用最少的符号来节省每一个字符。
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// 输出: "2h 30m"
格式化器使用单字母缩写和最小间距。小时变为 "h"，分钟变为 "m"，秒变为 "s"。输出比短样式或长样式更加紧凑。
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// 输出: "1h 46m 40s"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// 输出: "5m 30s"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// 输出: "3h 15m"
不同的单位根据标准约定生成不同的窄样式表示形式。
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// 输出: "2d 5h"
console.log(formatter.format({ weeks: 1, days: 3 }));
// 输出: "1w 3d"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// 输出: "1h 30m 45s 500ms"
窄样式在空间极其有限且用户熟悉时间测量上下文时效果最佳。这种紧凑的格式假设用户可以在没有明确分隔或解释的情况下理解单位。
比较长、短和窄样式
当您使用每种样式格式化相同的持续时间时，三种样式选项之间的差异变得清晰。
const longFormatter = new Intl.DurationFormat("en-US", {
style: "long"
});
const shortFormatter = new Intl.DurationFormat("en-US", {
style: "short"
});
const narrowFormatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
const duration = { hours: 1, minutes: 30, seconds: 45 };
console.log("Long: " + longFormatter.format(duration));
console.log("Short: " + shortFormatter.format(duration));
console.log("Narrow: " + narrowFormatter.format(duration));
// 输出:
// Long: 1 hour, 30 minutes and 45 seconds
// Short: 1 hr, 30 min and 45 sec
// Narrow: 1h 30m 45s
长样式使用完整的单词和明确的连接词。短样式使用标准缩写和连接词。窄样式使用单字母和最小间距。这种进展显示了清晰度和空间效率之间的权衡。
您可以比较不同的持续时间，看看每种样式如何处理各种时间跨度。
const durations = [
{ hours: 2, minutes: 15 },
{ minutes: 5, seconds: 30 },
{ hours: 1, minutes: 0, seconds: 10 },
{ days: 1, hours: 3, minutes: 45 }
];
durations.forEach(duration => {
const long = new Intl.DurationFormat("en-US", {
style: "long"
}).format(duration);
const short = new Intl.DurationFormat("en-US", {
style: "short"
}).format(duration);
const narrow = new Intl.DurationFormat("en-US", {
style: "narrow"
}).format(duration);
console.log("Duration:");
console.log(" Long: " + long);
console.log(" Short: " + short);
console.log(" Narrow: " + narrow);
console.log("");
});
// 输出:
// Duration:
// Long: 2 hours and 15 minutes
// Short: 2 hr and 15 min
// Narrow: 2h 15m
//
// Duration:
// Long: 5 minutes and 30 seconds
// Short: 5 min and 30 sec
// Narrow: 5m 30s
//
// Duration:
// Long: 1 hour, 0 minutes and 10 seconds
// Short: 1 hr, 0 min and 10 sec
// Narrow: 1h 0m 10s
//
// Duration:
// Long: 1 day, 3 hours and 45 minutes
// Short: 1 day, 3 hr and 45 min
// Narrow: 1d 3h 45m
在多个持续时间中，字符数的差异变得显著。在显示许多持续时间的表格或列表中，与长样式相比，窄样式节省了大量的水平空间。
不同语言中的时长样式差异
所有三种样式选项都会根据您指定的语言环境进行适配。不同语言使用不同的缩写、单位名称、连词和间距规范。
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
const duration = { hours: 2, minutes: 30 };
locales.forEach(locale => {
const longFormatter = new Intl.DurationFormat(locale, {
style: "long"
});
const shortFormatter = new Intl.DurationFormat(locale, {
style: "short"
});
console.log(locale + ":");
console.log(" Long: " + longFormatter.format(duration));
console.log(" Short: " + shortFormatter.format(duration));
});
// 输出：
// en-US:
// Long: 2 hours and 30 minutes
// Short: 2 hr and 30 min
// de-DE:
// Long: 2 Stunden und 30 Minuten
// Short: 2 Std. und 30 Min.
// fr-FR:
// Long: 2 heures et 30 minutes
// Short: 2 h et 30 min
// ja-JP:
// Long: 2時間30分
// Short: 2 時間 30 分
长样式在不同语言环境中差异显著，因为每种语言对时间单位都有自己的表达方式。例如，德语使用 "Stunden" 表示小时，法语使用 "heures"，而日语使用 "時間"。格式化器会自动处理语法变化。
短样式也会根据语言环境的规范进行调整。例如，德语使用 "Std." 表示小时，法语使用 "h"，而日语在数字和单位字符之间添加空格。这些特定于语言环境的缩写反映了每种文化在缩写时间时的书写习惯。
格式化器会根据语言规则处理连词。例如，英语使用 "and"，德语使用 "und"，法语使用 "et"，而日语完全省略连词。每种语言环境都会生成符合其语言习惯的自然输出。
const locales = ["en-US", "es-ES", "pt-BR"];
const duration = { hours: 1, minutes: 30, seconds: 45 };
locales.forEach(locale => {
const narrowFormatter = new Intl.DurationFormat(locale, {
style: "narrow"
});
console.log(locale + ": " + narrowFormatter.format(duration));
});
// 输出：
// en-US: 1h 30m 45s
// es-ES: 1h 30min 45s
// pt-BR: 1h 30min 45s
窄样式在不同语言环境中也有一些差异。例如，英语使用单个字母 "h"、"m" 和 "s"，而西班牙语和葡萄牙语则使用 "min" 而不是单独的 "m" 表示分钟。这些差异反映了各语言环境在紧凑时间表示法中的特定习惯。
何时使用长格式
当清晰性和可访问性比空间效率更重要时，长格式是最佳选择。这种选择使时长无需解释即可立即理解。
以可访问性为重点的界面受益于长格式，因为屏幕阅读器对拼写完整的单词发音更自然。屏幕阅读器朗读“2 hours and 30 minutes”比“2 hr and 30 min”更自然，后者可能会被读得不自然或需要特殊的发音规则。
教育内容受益于长格式，因为学习者可能不熟悉时间缩写。解释时长的教学材料应拼写出单位名称以避免混淆。
锻炼总结和会话报告使用长格式以保持清晰、专业的语气。健身应用显示完成的锻炼时长时，用“1 hour and 15 minutes”比“1h 15m”更易阅读。
正式报告和文档使用长格式以保持一致的写作标准。商业报告、医疗记录和官方文件通常会拼写出时间时长，而不是使用缩写。
国际用户在学习语言时受益于长格式。像“hours”和“minutes”这样的拼写完整的单位名称比缩写更容易被非母语使用者理解。
function formatWorkoutSummary(duration, locale) {
const formatter = new Intl.DurationFormat(locale, {
style: "long"
});
return formatter.format(duration);
}
const workout = { hours: 1, minutes: 15 };
console.log("Workout duration: " + formatWorkoutSummary(workout, "en-US"));
// 输出: "Workout duration: 1 hour and 15 minutes"
长格式优先考虑理解而非简洁。每当用户需要毫无歧义或解释努力地理解时长时，请使用长格式。
何时使用短格式
简短样式在空间有限但缩写广为人知的情况下效果最佳。这是通用应用程序中最常见的选择。
移动界面受益于简短样式，因为屏幕宽度有限。显示多个计时器的仪表板卡需要紧凑的时间格式以适应屏幕上的信息。使用“2 hr and 30 min”代替“2 hours and 30 minutes”可以为每个时间段节省 11 个字符，在多个值中累积起来效果显著。
视频播放器控件使用简短样式显示时长而不会使界面显得杂乱。在控制栏中显示“1 hr and 46 min”比“1 hour and 46 minutes”更紧凑，同时保持清晰。
在数据表中显示时长的列需要一致的宽度。像“hr”、“min”和“sec”这样的简短缩写可以保持列宽可控，而“hours”、“minutes”和“seconds”这样的长单位会不必要地增加列宽。
计时器应用程序使用简短样式，因为查看计时器的用户对时间缩写很熟悉。一个显示“5 min and 30 sec”的倒计时计时器在清晰度和显示空间的高效利用之间取得了平衡。
航班预订界面使用简短样式显示旅行时长。在航班搜索结果中显示“8 hr and 15 min”比“8h 15m”更清晰，但比“8 hours and 15 minutes”更紧凑。
function formatFlightDuration(duration, locale) {
const formatter = new Intl.DurationFormat(locale, {
style: "short"
});
return formatter.format(duration);
}
const flight = { hours: 8, minutes: 15 };
console.log(formatFlightDuration(flight, "en-US"));
// 输出: "8 hr and 15 min"
简短样式在清晰度和效率之间取得了平衡。大多数用户能够轻松识别像 hr、min 和 sec 这样的标准缩写，而不会感到困惑。
何时使用紧凑样式
紧凑样式最适合在空间极其受限的情况下使用，此时每个字符都很重要，并且用户对时间表示法非常熟悉。
在显示尺寸极小的情况下，显示单一指标的紧凑小部件可以使用紧凑样式。例如，计时器小部件显示 "5m 30s" 的大号文本比显示 "5 minutes and 30 seconds" 更适合。
信息密集的数据可视化也受益于紧凑样式。图表标签、图形注释和数据覆盖需要最少的文本，以避免遮挡底层的视觉内容。使用 "2h 30m" 替代 "2 hr and 30 min" 可以节省字符，同时对理解上下文的用户仍然可读。
空间有限的移动主屏幕小部件使用紧凑样式可以最大化信息密度。例如，一个显示多个最近会话的小型磁贴的健身追踪小部件可以从紧凑的持续时间表示中受益。
智能手表界面使用紧凑样式，因为屏幕空间极其有限。在小型圆形屏幕上显示 "1h 15m" 比使用更长的格式更合适。
显示多个带有持续时间的项目的列表视图可以使用紧凑样式以保持每行的紧凑性。例如，显示曲目时长的音乐播放列表、显示运行时间的视频列表或显示每项运动持续时间的锻炼列表都可以从最小化格式中受益。
function formatVideoPlaylist(videos, locale) {
const formatter = new Intl.DurationFormat(locale, {
style: "narrow"
});
return videos.map(video => ({
title: video.title,
duration: formatter.format(video.duration)
}));
}
const playlist = [
{ title: "Introduction", duration: { minutes: 2, seconds: 30 } },
{ title: "Getting Started", duration: { minutes: 5, seconds: 15 } },
{ title: "Advanced Topics", duration: { hours: 1, minutes: 10 } }
];
console.log(formatVideoPlaylist(playlist, "en-US"));
// 输出：
// [
// { title: "Introduction", duration: "2m 30s" },
// { title: "Getting Started", duration: "5m 15s" },
// { title: "Advanced Topics", duration: "1h 10m" }
// ]
紧凑样式假设用户熟悉时间表示法，并且可以在没有辅助的情况下解释单位。此选项以最大化空间效率为代价，牺牲了一定的清晰度。
将样式与其他格式选项结合使用
style 选项可以与所有其他持续时间格式选项一起使用。您可以控制显示哪些单位，同时选择显示样式。
const formatter = new Intl.DurationFormat("en-US", {
style: "long",
hours: "numeric",
minutes: "2-digit",
seconds: "2-digit"
});
console.log(formatter.format({ hours: 1, minutes: 5, seconds: 3 }));
// 输出: "1:05:03"
此组合以长样式显示小时，但对分钟和秒使用带零填充的数字格式。结果是一个混合格式，结合了文本和数字。
您可以在使用一致样式的同时仅格式化特定单位。
const formatter = new Intl.DurationFormat("en-US", {
style: "short",
hours: "numeric",
minutes: "numeric"
});
console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// 输出: "2 hr and 30 min"
即使持续时间对象包含秒，格式化器也仅显示小时和分钟。这使您可以控制输出中显示的单位。
您可以通过混合不同的单位样式创建自定义格式。
const formatter = new Intl.DurationFormat("en-US", {
hours: "long",
minutes: "short",
seconds: "narrow"
});
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45 }));
// 输出: "1 hour, 30 min, 45s"
这会生成一个混合格式，其中每个单位使用不同的详细级别。虽然不常见，但这种灵活性使您可以在需要时创建专门的格式。
需要记住的事项
style 选项控制使用 Intl.DurationFormat 格式化时持续时间的显示方式。将其设置为 "long" 时，单位会拼写完整，例如 "2 hours and 30 minutes"；设置为 "short" 时，使用标准缩写，例如 "2 hr and 30 min"；设置为 "narrow" 时，使用紧凑形式，例如 "2h 30m"。如果未指定，默认值为 "short"。
当清晰度和可访问性比空间更重要，或者用户可能不熟悉时间缩写时，请使用长样式。当空间重要且用户理解标准缩写时，请使用短样式。仅在空间极度受限且用户对时间表示法非常熟悉的情况下使用窄样式。
格式化器会自动处理特定于语言环境的变化，包括不同的单位名称、缩写、连词、间距约定和复数形式。将 style 与其他格式选项结合使用，以控制显示哪些单位以及它们的显示方式。