時間表示に小数秒を含める方法
フォーマットされた時間範囲に秒未満の精度を表示する
はじめに
1秒未満の精度で時間を表示する場合、小数部分の秒を表示する必要があります。ストップウォッチは1.234秒を表示し、パフォーマンスプロファイラーは0.853秒のロード時間を表示し、レースタイマーは45.678秒のフィニッシュタイムを表示します。適切なフォーマットがなければ、次のようなコードを書くかもしれません：
const seconds = 1.234;
const duration = `${seconds}s`;
これは「1.234s」というハードコードされた小数点区切りを持つ文字列を生成します。フランス語圏のユーザーは小数点区切りとしてカンマを使用する「1,234 s」を期待しているのに「1.234s」と表示されます。異なるロケールでは異なる小数点区切りや間隔の規則が使用されます。
JavaScriptはIntl.DurationFormatのfractionalDigitsオプションを提供し、フォーマットされた時間表示で小数部分の秒がどのように表示されるかを制御します。このレッスンでは、時間表示に小数部分の秒を追加し、その精度を制御する方法について説明します。
小数部分の秒とは
小数部分の秒は1秒未満の時間間隔を表します。1.5秒という値は1秒半を意味します。0.250秒という値は4分の1秒を意味します。
小数部分の秒は3つの形式で表されます：
- ミリ秒：1秒の1000分の1（0.001秒）
- マイクロ秒：1秒の100万分の1（0.000001秒）
- ナノ秒：1秒の10億分の1（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"
これは2つの別々の単位を表示します。代わりに「1.234秒」と表示するには、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」のように、センチ秒の精度を持つ2桁の小数点以下の時間が表示されます。
レース完走時間のフォーマット
スポーツ計時システムでは、高精度のフィニッシュタイムを表示します。レース結果にはミリ秒の精度を使用してください。
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"
3桁の小数点以下の数字により、正確なレースタイミングのためのミリ秒精度が表示されます。
パフォーマンスメトリクスのフォーマット
パフォーマンスプロファイラは、秒未満の精度で読み込み時間や実行時間を表示します。小数秒を含む短いフォーマットを使用してください。
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"
これは整数のミリ秒を小数秒の値に変換します。
非常に短い時間の処理
1秒未満の時間については、小数点以下の桁数を含む秒単位のみを含めます。
const duration = { seconds: 0.045 };
new Intl.DurationFormat('en', {
style: 'short',
fractionalDigits: 3
}).format(duration);
// "0.045 sec"
小数点の前のゼロは1秒未満の時間を示します。
ユースケースに合わせた精度の選択
異なるアプリケーションには異なるレベルの精度が必要です：
- ストップウォッチ：小数点以下2桁（1/100秒）
- スポーツタイミング：小数点以下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の一部であり、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が利用可能な場合はそれを使用し、古いブラウザ向けにはフォールバックを提供します。