Comment inclure les fractions de seconde dans l'affichage des durées
Afficher la précision sous-seconde dans les intervalles de temps formatés
Introduction
Lorsque vous affichez des durées avec une précision sous-seconde, vous devez afficher les fractions de seconde. Un chronomètre affiche 1,234 seconde, un profileur de performances affiche un temps de chargement de 0,853 seconde, un chronomètre de course affiche un temps d'arrivée de 45,678 secondes. Sans formatage approprié, vous pourriez écrire du code comme ceci :
const seconds = 1.234;
const duration = `${seconds}s`;
Cela produit "1.234s" avec un séparateur décimal codé en dur. Les utilisateurs français voient "1.234s" alors qu'ils s'attendent à "1,234 s" avec une virgule comme séparateur décimal. Différentes locales utilisent différents séparateurs décimaux et conventions d'espacement.
JavaScript fournit l'option fractionalDigits dans Intl.DurationFormat pour contrôler comment les fractions de seconde apparaissent dans les durées formatées. Cette leçon explique comment ajouter des fractions de seconde aux affichages de durée et contrôler leur précision.
Ce que sont les fractions de seconde
Les fractions de seconde représentent des intervalles de temps inférieurs à une seconde. La valeur 1,5 seconde signifie une seconde et demie. La valeur 0,250 seconde signifie un quart de seconde.
Les fractions de seconde apparaissent sous trois formes :
- Millisecondes : millièmes de seconde (0,001 seconde)
- Microsecondes : millionièmes de seconde (0,000001 seconde)
- Nanosecondes : milliardièmes de seconde (0,000000001 seconde)
L'option fractionalDigits contrôle combien de décimales apparaissent après la valeur des secondes. Définir fractionalDigits: 3 affiche une précision à la milliseconde. Définir fractionalDigits: 6 affiche une précision à la microseconde.
Formater les durées sans fractions de seconde
Par défaut, le formatage des durées affiche les secondes entières sans aucune composante fractionnaire.
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"
Même si vous incluez les millisecondes comme unité distincte, elles s'affichent comme une unité distincte plutôt que comme des fractions de seconde.
const duration = { seconds: 1, milliseconds: 234 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second and 234 milliseconds"
Cela affiche deux unités distinctes. Pour afficher « 1,234 secondes » à la place, vous devez utiliser l’option fractionalDigits.
Ajouter des fractions de seconde aux durées
L’option fractionalDigits contrôle le nombre de décimales affichées pour la valeur des secondes. Définissez cette option pour inclure les fractions de seconde dans le résultat.
const duration = { seconds: 1.234 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 3
}).format(duration);
// "1.234 seconds"
L’API combine les parties entière et fractionnaire en une seule valeur formatée avec le séparateur décimal approprié pour la locale.
Contrôler la précision des fractions de seconde
L’option fractionalDigits accepte des valeurs de 0 à 9. Cela détermine le nombre de chiffres affichés après la virgule.
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"
Lorsque la précision spécifiée dépasse le nombre de chiffres disponibles, le formateur complète avec des zéros.
const duration = { seconds: 1.5 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 4
}).format(duration);
// "1.5000 seconds"
Lorsque l’arrondi est nécessaire, le formateur arrondit vers zéro.
const duration = { seconds: 1.9999 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 2
}).format(duration);
// "1.99 seconds"
Utiliser les fractions de seconde en format numérique
Le format numérique affiche les durées avec des deux-points comme un chronomètre. Les fractions de seconde apparaissent après la valeur des secondes.
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"
Cela fonctionne pour toute combinaison d’unités de temps en format numérique.
const duration = { minutes: 5, seconds: 30.678 };
new Intl.DurationFormat('en', {
style: 'digital',
fractionalDigits: 3
}).format(duration);
// "5:30.678"
Formater les fractions de seconde selon la locale
Les différentes locales utilisent des séparateurs décimaux différents. L’anglais utilise un point, de nombreuses langues européennes utilisent une virgule.
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);
// "١٫٢٣٤ ثانية"
L’API utilise le séparateur décimal, les chiffres et les espacements corrects pour chaque locale.
Formater les temps de chronomètre
Les applications de chronomètre doivent afficher le temps écoulé avec une précision au sous-seconde près. Utilisez le format numérique avec fractions de seconde.
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"
Cela affiche des temps comme « 1:05.47 » avec deux décimales pour une précision au centième de seconde.
Formater les temps d'arrivée de course
Les systèmes de chronométrage sportif affichent les temps d'arrivée avec une haute précision. Utilisez la précision à la milliseconde pour les résultats de course.
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"
Les trois décimales indiquent une précision à la milliseconde pour un chronométrage de course précis.
Formater les métriques de performance
Les profileurs de performance affichent les temps de chargement et d'exécution avec une précision inférieure à la seconde. Utilisez un format court avec des secondes fractionnaires.
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"
Cela affiche les métriques de performance dans un format compact avec une précision à la milliseconde.
Formater les horodatages d'images vidéo
Les applications de montage vidéo affichent des horodatages précis à l'image près. Utilisez des secondes fractionnaires basées sur la fréquence d'images.
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"
Cela affiche des horodatages avec une précision au niveau de l'image pour une vidéo à 100 fps.
Convertir les millisecondes en secondes fractionnaires
Les calculs de temps produisent souvent des millisecondes. Convertissez les millisecondes en secondes fractionnaires en divisant par 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"
Cela convertit des millisecondes entières en une valeur de secondes fractionnaires.
Gérer les durées très courtes
Pour les durées inférieures à une seconde, incluez uniquement l'unité des secondes avec des chiffres fractionnaires.
const duration = { seconds: 0.045 };
new Intl.DurationFormat('en', {
style: 'short',
fractionalDigits: 3
}).format(duration);
// "0.045 sec"
Le zéro avant la virgule indique une durée inférieure à la seconde.
Choisir la précision pour votre cas d'usage
Différentes applications nécessitent différents niveaux de précision :
- Chronomètres : 2 décimales (centièmes de seconde)
- Chronométrage sportif : 3 décimales (millisecondes)
- Profilage de performance : 3 décimales (millisecondes)
- Mesures scientifiques : 6-9 décimales (microsecondes à nanosecondes)
Faites correspondre la valeur fractionalDigits à vos exigences de précision.
const duration = { seconds: 1.23456789 };
const locale = navigator.language;
// For general timing
new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 2
}).format(duration);
// "0:00:01.23"
// For precise measurements
new Intl.DurationFormat(locale, {
style: 'short',
fractionalDigits: 6
}).format(duration);
// "1.234568 sec"
Évitez d'afficher plus de précision que ce que votre système de mesure fournit.
Omettre les fractions de seconde lorsqu'elles ne sont pas nécessaires
Définissez fractionalDigits: 0 pour afficher les secondes entières sans aucune composante fractionnaire.
const duration = { seconds: 1.7 };
new Intl.DurationFormat('en', {
style: 'long',
fractionalDigits: 0
}).format(duration);
// "1 second"
Cela arrondit la valeur et affiche uniquement la partie entière.
Réutiliser les formateurs avec des fractions de seconde
La création de formateurs avec des paramètres de précision spécifiques suit la même optimisation de performance que les autres formateurs.
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"]
Cela réutilise l'instance du formateur pour de meilleures performances lors du formatage de plusieurs durées.
Compatibilité des navigateurs
L'option fractionalDigits fait partie de l'API Intl.DurationFormat, qui est devenue Baseline en mars 2025. Elle fonctionne dans les dernières versions de Chrome, Edge, Firefox et Safari.
Vérifiez la compatibilité avant d'utiliser les fractions de seconde.
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)}`;
}
Cela fournit une solution de repli pour les navigateurs plus anciens tout en utilisant l'API native lorsqu'elle est disponible.