如何在持续时间显示中包含小数秒
在格式化的时间跨度中显示亚秒级精度
介绍
当您以亚秒级精度显示持续时间时，需要显示小数秒。例如，秒表显示 1.234 秒，性能分析器显示加载时间为 0.853 秒，比赛计时器显示完成时间为 45.678 秒。如果没有正确的格式化，您可能会编写如下代码：
const seconds = 1.234;
const duration = `${seconds}s`;
这会生成 "1.234s"，其中小数点是硬编码的。法国用户会看到 "1.234s"，但他们期望的是用逗号作为小数点的 "1,234 s"。不同的语言环境使用不同的小数点分隔符和间距约定。
JavaScript 提供了 Intl.DurationFormat 中的 fractionalDigits 选项，用于控制格式化持续时间时小数秒的显示方式。本课程将解释如何在持续时间显示中添加小数秒并控制其精度。
什么是小数秒
小数秒表示小于一秒的时间间隔。值 1.5 秒表示一秒半。值 0.250 秒表示四分之一秒。
小数秒有三种形式：
- 毫秒：千分之一秒（0.001 秒）
- 微秒：百万分之一秒（0.000001 秒）
- 纳秒：十亿分之一秒（0.000000001 秒）
fractionalDigits 选项控制秒值后显示的小数位数。设置 fractionalDigits: 3 显示毫秒精度。设置 fractionalDigits: 6 显示微秒精度。
格式化没有小数秒的持续时间
默认情况下，持续时间格式化显示为整数秒，不包含任何小数部分。
const duration = { hours: 0, minutes: 0, seconds: 1 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second"
new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "0:00:01"
即使您将毫秒作为单独的单位包含在内，它们也会显示为一个独立的单位，而不是作为小数秒的一部分。
const duration = { seconds: 1, milliseconds: 234 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second and 234 milliseconds"
这会显示两个独立的单位。要显示 "1.234 seconds"，您需要使用 fractionalDigits 选项。
为持续时间添加小数秒
fractionalDigits 选项控制秒值中显示的小数位数。设置此选项以在输出中包含小数秒。
const duration = { seconds: 1.234 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1.234 seconds"
该 API 将整数部分和小数部分组合为一个单一的格式化值，并使用适合该语言环境的十进制分隔符。
控制小数秒的精度
fractionalDigits 选项接受从 0 到 9 的值。这决定了小数点后显示的位数。
const duration = { seconds: 1.23456789 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 0
}).format(duration);
// "1 second"
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 2
}).format(duration);
// "1.23 seconds"
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 4
}).format(duration);
// "1.2346 seconds"
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 6
}).format(duration);
// "1.234568 seconds"
当指定的精度超过可用的数字时，格式化器会用零进行填充。
const duration = { seconds: 1.5 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 4
}).format(duration);
// "1.5000 seconds"
当需要舍入时，格式化器会向零方向舍入。
const duration = { seconds: 1.9999 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 2
}).format(duration);
// "1.99 seconds"
在数字格式中使用小数秒
数字格式以计时器的形式显示持续时间，使用冒号分隔。小数秒显示在秒值之后。
const duration = { hours: 2, minutes: 30, seconds: 12.345 };
new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 3
}).format(duration);
// "2:30:12.345"
new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 2
}).format(duration);
// "2:30:12.34"
这适用于数字格式中的任何时间单位组合。
const duration = { minutes: 5, seconds: 30.678 };
new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 3
}).format(duration);
// "5:30.678"
在不同的语言环境中格式化小数秒
不同的语言环境使用不同的小数分隔符。英语使用句号，许多欧洲语言使用逗号。
const duration = { seconds: 1.234 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1.234 seconds"
new Intl.DurationFormat('fr', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1,234 seconde"
new Intl.DurationFormat('de', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1,234 Sekunden"
new Intl.DurationFormat('ar', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "١٫٢٣٤ ثانية"
该 API 为每种语言环境使用正确的小数分隔符、数字字符和间距。
格式化秒表时间
秒表应用程序需要以亚秒精度显示经过时间。使用带有小数秒的数字格式。
function formatStopwatchTime(totalSeconds) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const duration = { minutes, seconds };
const locale = navigator.language;
return new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 2
}).format(duration);
}
formatStopwatchTime(65.47);
// "1:05.47"
formatStopwatchTime(123.89);
// "2:03.89"
这将以两位小数显示时间，例如 "1:05.47"，以实现百分秒精度。
格式化比赛结束时间
体育计时系统以高精度显示比赛结束时间。使用毫秒精度显示比赛结果。
function formatRaceTime(totalSeconds, locale) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const duration = { minutes, seconds };
return new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 3
}).format(duration);
}
formatRaceTime(125.678, 'en');
// "2:05.678"
formatRaceTime(125.678, 'fr');
// "2:05,678"
三位小数显示毫秒精度，以确保比赛计时的准确性。
格式化性能指标
性能分析器以亚秒精度显示加载时间和执行时间。使用带有小数秒的简短格式。
function formatLoadTime(seconds, locale) {
const duration = { seconds };
return new Intl.DurationFormat(locale, {
style: 'short',
fractionalDigits: 3
}).format(duration);
}
formatLoadTime(0.853, 'en');
// "0.853 sec"
formatLoadTime(2.145, 'en');
// "2.145 sec"
这将以紧凑格式显示性能指标，并具有毫秒精度。
格式化视频帧时间戳
视频编辑应用程序显示帧精确的时间戳。根据帧率使用小数秒。
function formatVideoTimestamp(totalSeconds, locale) {
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
const duration = hours > 0
? { hours, minutes, seconds }
: { minutes, seconds };
return new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 2
}).format(duration);
}
formatVideoTimestamp(125.67, 'en');
// "2:05.67"
formatVideoTimestamp(3665.42, 'en');
// "1:01:05.42"
这显示了 100fps 视频的帧级精度时间戳。
将毫秒转换为小数秒
时间计算通常会产生毫秒值。通过除以 1000 将毫秒转换为小数秒。
const milliseconds = 1234;
const totalSeconds = milliseconds / 1000;
const duration = { seconds: totalSeconds };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1.234 seconds"
这将完整的毫秒值转换为小数秒值。
处理非常短的持续时间
对于小于一秒的持续时间，仅包含带小数位的秒单位。
const duration = { seconds: 0.045 };
new Intl.DurationFormat('en', {
style: 'short',
fractionalDigits: 3
}).format(duration);
// "0.045 sec"
小数点前的零表示亚秒级持续时间。
根据使用场景选择精度
不同的应用程序需要不同的精度级别：
- 秒表：2 位小数（百分秒）
- 体育计时：3 位小数（毫秒）
- 性能分析：3 位小数（毫秒）
- 科学测量：6-9 位小数（微秒到纳秒）
将 fractionalDigits 值匹配到您的精度要求。
const duration = { seconds: 1.23456789 };
const locale = navigator.language;
// 用于一般计时
new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 2
}).format(duration);
// "0:00:01.23"
// 用于精确测量
new Intl.DurationFormat(locale, {
style: 'short',
fractionalDigits: 6
}).format(duration);
// "1.234568 sec"
避免显示超过您的测量系统提供的精度。
当不需要时省略小数秒
设置 fractionalDigits: 0 以显示整秒而不包含任何小数部分。
const duration = { seconds: 1.7 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 0
}).format(duration);
// "1 second"
这会对值进行四舍五入，仅显示整数部分。
复用带有小数秒的格式化器
创建具有特定精度设置的格式化器遵循与其他格式化器相同的性能优化原则。
const formatter = new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 3
});
const times = [
{ minutes: 1, seconds: 5.234 },
{ minutes: 2, seconds: 15.678 },
{ minutes: 0, seconds: 45.901 }
];
times.map(t => formatter.format(t));
// ["1:05.234", "2:15.678", "0:45.901"]
在格式化多个持续时间时，复用格式化器实例可以提高性能。
浏览器支持
fractionalDigits 选项是 Intl.DurationFormat API 的一部分，该 API 于 2025 年 3 月成为基线功能。它适用于最新版本的 Chrome、Edge、Firefox 和 Safari。
在使用小数秒之前，请检查支持情况。
if (typeof Intl.DurationFormat !== 'undefined') {
const formatter = new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 3
});
return formatter.format(duration);
} else {
return `${duration.minutes}:${duration.seconds.toFixed(3)}`;
}
这为旧版浏览器提供了回退方案，同时在可用时使用原生 API。