Comment afficher les millisecondes ou microsecondes dans l'heure ?
Utilisez Intl.DateTimeFormat pour afficher une précision sous-seconde dans les affichages de temps
Introduction
La plupart des affichages temporels montrent les heures, les minutes et les secondes. Cette précision convient pour les horaires, les rendez-vous et la mesure du temps au quotidien. Cependant, certaines applications nécessitent une précision inférieure à la seconde pour afficher les dixièmes, centièmes ou millièmes de seconde.
Les outils de surveillance des performances affichent les temps de réponse en millisecondes. Les applications scientifiques affichent des mesures avec une précision inférieure à la seconde. Les applications vidéo et audio affichent des horodatages jusqu'à la milliseconde. Les systèmes de journalisation enregistrent les événements avec des horodatages en secondes fractionnaires pour distinguer les événements rapprochés.
L'API Intl.DateTimeFormat de JavaScript fournit l'option fractionalSecondDigits pour afficher une précision inférieure à la seconde. Cette leçon explique ce que sont les secondes fractionnaires, comment les afficher et quand vous avez besoin de ce niveau de précision.
Comprendre la précision des secondes fractionnaires
La seconde est l'unité de base de mesure du temps. Les secondes fractionnaires représentent des parties de seconde plus petites qu'une seconde entière.
Un dixième de seconde équivaut à 0,1 seconde, soit 100 millisecondes. Cette précision permet de distinguer des événements qui se produisent à un dixième de seconde d'intervalle.
Un centième de seconde équivaut à 0,01 seconde, soit 10 millisecondes. Cette précision permet de distinguer des événements qui se produisent à un centième de seconde d'intervalle.
Un millième de seconde équivaut à 0,001 seconde, soit 1 milliseconde. C'est la précision maximale prise en charge par Intl.DateTimeFormat.
JavaScript représente les secondes fractionnaires sous forme de chiffres après une virgule décimale. Un chiffre indique les dixièmes, deux chiffres indiquent les centièmes et trois chiffres indiquent les millièmes.
À propos des microsecondes
Le titre de la leçon mentionne les microsecondes, mais Intl.DateTimeFormat ne prend pas en charge la précision des microsecondes. Les microsecondes représentent des millionièmes de seconde et nécessiteraient six chiffres après la virgule décimale. L'API prend en charge un maximum de trois chiffres, ce qui fournit une précision en millisecondes.
Les objets Date de JavaScript stockent en interne le temps en millisecondes depuis le 1er janvier 1970 UTC. Cela signifie que les données sous-jacentes prennent en charge la précision en millisecondes mais pas la précision en microsecondes.
Utilisation de l'option fractionalSecondDigits
L'option fractionalSecondDigits contrôle le nombre de chiffres qui apparaissent après la virgule dans le champ des secondes. Elle accepte les valeurs 1, 2 ou 3.
Vous devez inclure l'option second lorsque vous utilisez fractionalSecondDigits. Sans l'option second, le formateur omet complètement le champ des secondes, et l'option des fractions de seconde n'a aucun effet.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 3
});
console.log(formatter.format(date));
// Résultat : "2:23:45.678 PM"
Ce formateur affiche les heures, les minutes, les secondes et trois chiffres de fraction de seconde. L'objet Date contient une précision en millisecondes, et le formateur affiche les trois chiffres.
Afficher un chiffre de fraction de seconde
Définir fractionalSecondDigits à 1 affiche les dixièmes de seconde.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 1
});
console.log(formatter.format(date));
// Résultat : "2:23:45.6 PM"
Le formateur arrondit la valeur à une décimale. La valeur originale contient 678 millisecondes, ce qui équivaut à 0,678 secondes, qui est arrondi à 0,6 secondes lorsqu'il est affiché avec un seul chiffre.
Afficher deux chiffres de fraction de seconde
Définir fractionalSecondDigits à 2 affiche les centièmes de seconde.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 2
});
console.log(formatter.format(date));
// Résultat : "2:23:45.67 PM"
Le formateur arrondit la valeur à deux décimales. La valeur de 678 millisecondes équivaut à 0,678 secondes, qui est arrondi à 0,67 secondes lorsqu'il est affiché avec deux chiffres.
Afficher trois chiffres de fraction de seconde
Définir fractionalSecondDigits à 3 affiche les millièmes de seconde, ce qui équivaut aux millisecondes.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 3
});
console.log(formatter.format(date));
// Output: "2:23:45.678 PM"
Cela affiche la précision complète des millisecondes disponible dans les objets Date de JavaScript. Trois chiffres est la précision maximale prise en charge par Intl.DateTimeFormat.
Combiner avec le format horaire 24 heures
Les fractions de seconde fonctionnent avec toutes les options de formatage de l'heure, y compris le format 24 heures.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-GB', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 3,
hourCycle: 'h23'
});
console.log(formatter.format(date));
// Output: "14:23:45.678"
La locale anglaise britannique utilise le format 24 heures par défaut, et l'option hourCycle garantit le format 24 heures. Les fractions de seconde apparaissent après les secondes avec un séparateur décimal.
Inclure le fuseau horaire avec les fractions de seconde
Vous pouvez afficher les fractions de seconde avec les informations de fuseau horaire.
const date = new Date('2025-10-15T14:23:45.678Z');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 3,
timeZone: 'America/New_York',
timeZoneName: 'short'
});
console.log(formatter.format(date));
// Output: "10:23:45.678 AM EDT"
Ce formateur convertit l'heure UTC en heure de New York et affiche le résultat avec une précision en millisecondes et l'abréviation du fuseau horaire.
Comment les fractions de seconde sont formatées selon les locales
Différentes locales utilisent différents séparateurs décimaux pour les nombres, mais les fractions de seconde utilisent systématiquement un point comme séparateur décimal dans toutes les locales.
const date = new Date('2025-10-15T14:23:45.678');
const options = {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 3
};
const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date));
// Output: "2:23:45.678 PM"
const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date));
// Output: "14:23:45.678"
const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date));
// Output: "14:23:45.678"
const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date));
// Output: "٢:٢٣:٤٥٫٦٧٨ م"
L'anglais utilise le format 12 heures avec AM/PM. L'allemand et le français utilisent le format 24 heures. L'arabe utilise des chiffres indo-arabes mais conserve la même structure de format horaire. Toutes les locales utilisent un point ou un séparateur similaire pour les fractions de seconde.
Cas d'utilisation courants pour les fractions de seconde
La surveillance des performances affiche les temps de réponse avec une précision en millisecondes.
const startTime = new Date();
// Perform operation
const endTime = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 3,
hourCycle: 'h23'
});
console.log(`Operation completed at ${formatter.format(endTime)}`);
// Output: "Operation completed at 14:23:45.678"
Ceci affiche l'heure exacte d'achèvement avec une précision en millisecondes pour l'analyse des performances.
L'enregistrement de données scientifiques nécessite des horodatages inférieurs à la seconde.
function logMeasurement(value) {
const timestamp = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 3,
hourCycle: 'h23'
});
console.log(`${formatter.format(timestamp)} - Measurement: ${value}`);
}
logMeasurement(23.5);
// Output: "10/15/2025, 14:23:45.678 - Measurement: 23.5"
Ceci crée des horodatages avec une précision en millisecondes pour les mesures scientifiques.
Les horodatages des lecteurs vidéo affichent la position avec une précision inférieure à la seconde.
function formatVideoTimestamp(milliseconds) {
const date = new Date(milliseconds);
const formatter = new Intl.DateTimeFormat('en-US', {
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 2,
hourCycle: 'h23',
timeZone: 'UTC'
});
return formatter.format(date);
}
console.log(formatVideoTimestamp(125678));
// Output: "02:05.67"
Ceci formate un horodatage vidéo avec une précision au centième de seconde. La définition du fuseau horaire sur UTC empêche la conversion de fuseau horaire pour la valeur de durée.
Quand utiliser les fractions de seconde
Utilisez les fractions de seconde lorsque vous devez distinguer des événements qui se produisent dans la même seconde. La surveillance des performances, le débogage, les mesures scientifiques et les applications multimédias nécessitent généralement cette précision.
N'utilisez pas les fractions de seconde pour la mesure du temps au quotidien. Les rendez-vous, les plannings et les horodatages destinés aux utilisateurs nécessitent rarement une précision inférieure à la seconde. L'ajout d'une précision inutile rend les heures plus difficiles à lire et à comprendre.
Choisissez le nombre approprié de chiffres selon vos besoins. Un chiffre offre une précision adéquate pour de nombreux cas d'utilisation tout en restant lisible. Trois chiffres offrent une précision maximale mais créent des horodatages plus longs et d'apparence plus technique.
Résumé
L'option fractionalSecondDigits affiche une précision sous-seconde dans le formatage du temps. Elle accepte les valeurs 1, 2 ou 3 pour afficher les dixièmes, centièmes ou millièmes de seconde. Vous devez inclure l'option second lorsque vous utilisez fractionalSecondDigits.
L'API Intl.DateTimeFormat de JavaScript prend en charge la précision des millisecondes mais pas celle des microsecondes. Trois chiffres fractionnaires représentent les millisecondes, la plus haute précision disponible.
Les secondes fractionnaires fonctionnent avec toutes les autres options de formatage du temps, y compris le format 12 heures et 24 heures, les fuseaux horaires et les différentes locales. Le séparateur décimal pour les secondes fractionnaires reste cohérent dans toutes les locales.
Utilisez les secondes fractionnaires pour la surveillance des performances, les données scientifiques, les journaux de débogage et les horodatages des médias. Évitez les secondes fractionnaires dans la mesure du temps quotidienne où la précision à la seconde suffit.