Comment inclure des fractions de secondes dans l'affichage de durée
Afficher la précision sous-seconde dans les intervalles de temps formatés
Introduction
Lorsque vous affichez des durées avec une précision inférieure à la seconde, vous devez montrer des fractions de secondes. Un chronomètre affiche 1,234 secondes, un profileur de performance indique un temps de chargement de 0,853 secondes, un chronométreur de course montre un temps d'arrivée de 45,678 secondes. Sans formatage approprié, vous pourriez écrire du code comme celui-ci :
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 à voir "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 secondes apparaissent dans les durées formatées. Cette leçon explique comment ajouter des fractions de secondes aux affichages de durée et contrôler leur précision.
Ce que sont les fractions de secondes
Les fractions de secondes représentent des intervalles de temps inférieurs à une seconde. La valeur 1,5 secondes signifie une seconde et demie. La valeur 0,250 secondes signifie un quart de seconde.
Les fractions de secondes apparaissent sous trois formes :
- Millisecondes : millièmes de seconde (0,001 secondes)
- Microsecondes : millionièmes de seconde (0,000001 secondes)
- Nanosecondes : milliardièmes de seconde (0,000000001 secondes)
L'option fractionalDigits contrôle combien de décimales apparaissent après la valeur des secondes. Définir fractionalDigits: 3 montre une précision en millisecondes. Définir fractionalDigits: 6 montre une précision en microsecondes.
Formater des durées sans fractions de secondes
Par défaut, le formatage de durée affiche des 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 des millisecondes comme unité distincte, elles s'affichent comme une unité distincte plutôt que comme des fractions de secondes.
const duration = { seconds: 1, milliseconds: 234 };
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second and 234 milliseconds"
Cela affiche deux unités séparées. Pour afficher "1,234 secondes" à la place, vous avez besoin de l'option fractionalDigits.
Ajouter des fractions de secondes aux durées
L'option fractionalDigits contrôle le nombre de décimales qui apparaissent dans la valeur des secondes. Définissez cette option pour inclure des fractions de secondes 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ères et fractionnaires en une seule valeur formatée avec le séparateur décimal approprié pour la locale.
Contrôler la précision des fractions de secondes
L'option fractionalDigits accepte des valeurs de 0 à 9. Cela détermine le nombre de chiffres qui apparaissent 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 les 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"
Lorsqu'un 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 des fractions de secondes au format numérique
Le format numérique affiche les durées avec des deux-points comme un chronomètre. Les fractions de secondes 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 au 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 secondes fractionnaires dans différentes locales
Différentes locales utilisent différents séparateurs décimaux. 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 caractères numériques et l'espacement corrects pour chaque locale.
Formater les temps de chronomètre
Les applications de chronomètre doivent afficher le temps écoulé avec une précision inférieure à la seconde. Utilisez le format numérique avec des secondes fractionnaires.
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 une précision en millisecondes 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 montrent une précision en millisecondes pour un chronométrage précis des courses.
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 en millisecondes.
Formater les horodatages des 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"
Ceci affiche les horodatages avec une précision au niveau de l'image pour une vidéo à 100 ips.
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"
Ceci convertit les 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é de 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 décimale indique une durée inférieure à une seconde.
Choisir la précision selon votre cas d'utilisation
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)
Adaptez la valeur fractionalDigits à vos besoins de précision.
const duration = { seconds: 1.23456789 };
const locale = navigator.language;
// Pour le chronométrage général
new Intl.DurationFormat(locale, {
style: 'digital',
fractionalDigits: 2
}).format(duration);
// "0:00:01.23"
// Pour des mesures précises
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 secondes lorsqu'elles ne sont pas nécessaires
Définissez fractionalDigits: 0 pour afficher des secondes entières sans 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 secondes
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 une meilleure performance lors du formatage de plusieurs durées.
Compatibilité des navigateurs
L'option fractionalDigits fait partie de l'API Intl.DurationFormat, qui est devenue standard 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 secondes.
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.