如何以简短或完整形式显示时长

简介

在展示某项操作所需时长时，不同的格式会占用不同的空间。例如，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));
// Output: "1 hour and 30 minutes"

const shortFormatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

console.log(shortFormatter.format(duration));
// Output: "1 hr and 30 min"

const narrowFormatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

console.log(narrowFormatter.format(duration));
// Output: "1h 30m"

如果省略 style 选项，则其默认值为 "short"。这意味着持续时间格式化会使用标准缩写，除非你明确指定其他显示样式。

使用长格式显示持续时间

长格式会完整拼写每个单位名称。这种格式最大程度地保证了清晰度，但会占用更多的横向空间。

const formatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

const duration = { hours: 2, minutes: 30 };

console.log(formatter.format(duration));
// Output: "2 hours and 30 minutes"

格式化器会自动处理单数和复数形式。一个小时使用单数 "hour"，多个小时则用复数 "hours"。你无需手动判断使用哪种形式。

const formatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

console.log(formatter.format({ hours: 1, minutes: 30 }));
// Output: "1 hour and 30 minutes"

console.log(formatter.format({ hours: 2, minutes: 1 }));
// Output: "2 hours and 1 minute"

无论持续时间中包含多少单位，每种单位类型都会被完整拼写出来。

const formatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hours, 30 minutes and 45 seconds"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 minutes and 30 seconds"

console.log(formatter.format({ hours: 1, minutes: 0, seconds: 15 }));
// Output: "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));
// Output: "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 }));
// Output: "1 hr, 46 min and 40 sec"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 min and 30 sec"

console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3 hr and 15 min"

短格式是默认行为。如果省略 style 选项，格式化器会自动使用短格式。

const formatter = new Intl.DurationFormat("en-US");

console.log(formatter.format({ hours: 2, minutes: 30 }));
// Output: "2 hr and 30 min"

这种默认设置让短格式在需要标准缩写持续时间且无需明确指定样式选项时非常方便。

您可以使用短格式对不同的时长类型进行格式化，以查看标准缩写。

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

console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2 days and 5 hr"

console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1 wk and 3 days"

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "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));
// Output: "2h 30m"

格式化器会使用单字母缩写和最小间距。小时为 "h"，分钟为 "m"，秒为 "s"。输出结果比短格式或长格式更加紧凑。

const formatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1h 46m 40s"

console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5m 30s"

console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3h 15m"

不同的单位会根据标准惯例生成不同的窄格式表示。

const formatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2d 5h"

console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1w 3d"

console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "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));

// Output:
// Long:   1 hour, 30 minutes and 45 seconds
// Short:  1 hr, 30 min and 45 sec
// Long:   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("");
});

// Output:
// 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));
});

// Output:
// 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));
});

// Output:
// 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 小时 15 分钟”比“1h 15m”更易阅读。

正式报告和文档采用全称风格，以保持一致的书写标准。商业报告、病历和官方文件通常会将时间时长完整拼写出来，而不是使用缩写。

面向国际用户时，采用全称风格有助于语言学习者。像“小时”“分钟”这样的全拼单位名称比缩写更易于非母语用户理解。

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"));
// Output: "Workout duration: 1 hour and 15 minutes"

全称风格优先考虑易读性而非简洁性。只要用户需要毫无歧义地理解时长，就应使用全称风格。

何时使用缩写风格

在空间有限但缩写广泛被理解的场景下，缩写风格效果最佳。这是通用应用中最常见的选择。

移动端界面因屏幕宽度有限，适合采用缩写风格。仪表盘卡片显示多个计时器时，紧凑的时长格式更易排版。例如用“2 hr 30 min”代替“2 hours and 30 minutes”，每个时长可节省 11 个字符，累计效果明显。

视频播放器控件采用缩写风格，能在不影响界面整洁的前提下显示时长。在控制栏中显示“1 hr 46 min”比“1 hour and 46 minutes”更简洁，同时保持清晰。

数据表格在列中显示时长时，需要保持列宽一致。像“hr”“min”“sec”这样的缩写有助于控制列宽，而“hours”“minutes”“seconds”这样的全称会导致列宽不必要地变宽。

计时器应用程序采用简洁格式，因为查看计时器的用户通常熟悉时间缩写。倒计时显示为 "5 min 和 30 sec"，在清晰度和显示空间利用之间取得了平衡。

机票预订界面使用简洁格式显示旅行时长。在航班搜索结果中显示 "8 hr 和 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"));
// Output: "8 hr and 15 min"

简洁格式在清晰度和高效性之间取得平衡。大多数用户都能轻松识别如 hr、min、sec 这样的标准缩写，不会产生混淆。

何时使用极简格式

极简格式最适用于空间极为有限、每个字符都很重要且用户对时间表示法非常熟悉的场景。

在显示空间极小的紧凑型小部件中，显示单一指标时可以使用极简格式。例如，计时器小部件用大号字体显示 "5m 30s"，比 "5 minutes and 30 seconds" 更适合。

信息密集型数据可视化场景适合使用极简格式。图表标签、图形注释和数据叠加需要尽量简短的文本，以免遮挡底层可视内容。用 "2h 30m" 替代 "2 hr 和 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"));
// Output:
// [
//   { 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 }));
// Output: "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 }));
// Output: "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 }));
// Output: "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 与其他格式化选项结合使用，以控制显示哪些单位以及它们的呈现方式。