Comment afficher les millisecondes ou les microsecondes dans l'heure ?
Utilisez Intl.DateTimeFormat pour afficher une précision inférieure à la seconde dans les affichages d'heure
Introduction
La plupart des affichages d'heure indiquent les heures, les minutes et les secondes. Cette précision convient pour les plannings, 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 les mesures avec une précision inférieure à la seconde. Les applications vidéo et audio affichent les horodatages jusqu'à la milliseconde. Les systèmes de journalisation enregistrent les événements avec des horodatages fractionnaires pour distinguer les événements rapprochés.
Le 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 fractions de seconde, comment les afficher et quand vous avez besoin de ce niveau de précision.
Comprendre la précision des fractions de seconde
La seconde est l'unité de base de la mesure du temps. Les fractions de seconde représentent des parties d'une seconde inférieures à une seconde entière.
Un dixième de seconde équivaut à 0,1 seconde, soit 100 millisecondes. Cette précision permet de distinguer les événements qui se produisent à un dixième de seconde l'un de l'autre.
Un centième de seconde équivaut à 0,01 seconde, soit 10 millisecondes. Cette précision permet de distinguer les événements qui se produisent à un centième de seconde l'un de l'autre.
Un millième de seconde équivaut à 0,001 seconde, soit 1 milliseconde. Il s'agit de la précision la plus élevée prise en charge par Intl.DateTimeFormat.
JavaScript représente les fractions de seconde sous forme de chiffres après une virgule. 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 à la microseconde. Les microsecondes représentent des millionièmes de seconde et nécessiteraient six chiffres après la virgule. L'API prend en charge un maximum de trois chiffres, ce qui fournit une précision à la milliseconde.
Les objets Date 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 à la milliseconde mais pas la précision à la microseconde.
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 lors de l'utilisation de fractionalSecondDigits. Sans l'option second, le formateur omettra entièrement le champ des secondes et l'option des secondes fractionnaires n'aura 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));
// Output: "2:23:45.678 PM"
Ce formateur affiche les heures, les minutes, les secondes et trois chiffres de secondes fractionnaires. L'objet Date contient une précision à la milliseconde et le formateur affiche les trois chiffres.
Afficher un chiffre de seconde fractionnaire
Définir fractionalSecondDigits sur 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));
// Output: "2:23:45.6 PM"
Le formateur arrondit la valeur à une décimale. La valeur d'origine contient 678 millisecondes, ce qui équivaut à 0,678 seconde, qui est arrondi à 0,6 seconde lorsqu'elle est affichée avec un chiffre.
Afficher deux chiffres de secondes fractionnaires
Définir fractionalSecondDigits sur 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));
// Output: "2:23:45.67 PM"
Le formateur arrondit la valeur à deux décimales. La valeur 678 millisecondes équivaut à 0,678 seconde, qui est arrondi à 0,67 seconde lorsqu'elle est affichée avec deux chiffres.
Afficher trois chiffres de secondes fractionnaires
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 en millisecondes disponible dans les objets Date de JavaScript. Trois chiffres représentent la précision maximale prise en charge par Intl.DateTimeFormat.
Combiner avec le format d'heure sur 24 heures
Les secondes fractionnaires fonctionnent avec toutes les options de formatage de l'heure, y compris le format d'heure sur 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 secondes fractionnaires apparaissent après les secondes avec un séparateur décimal.
Inclure le fuseau horaire avec les secondes fractionnaires
Vous pouvez afficher les secondes fractionnaires 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 secondes fractionnaires se formatent selon les locales
Différentes locales utilisent différents séparateurs décimaux pour les nombres, mais les secondes fractionnaires 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 les chiffres indo-arabes mais conserve la même structure de format d'heure. Toutes les locales utilisent un point ou un séparateur similaire pour les secondes fractionnaires.
Cas d'usage courants pour les secondes fractionnaires
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"
Cela affiche l'heure exacte de complétion avec une précision en millisecondes pour l'analyse des performances.
L'enregistrement de données scientifiques nécessite des horodatages infra-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"
Cela crée des horodatages avec une précision en millisecondes pour les mesures scientifiques.
Les horodatages du lecteur 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"
Cela formate un horodatage vidéo avec une précision au centième de seconde. Définir le 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 quotidienne. Les rendez-vous, les plannings et les horodatages destinés aux utilisateurs nécessitent rarement une précision inférieure à la seconde. Ajouter une précision inutile rend les heures plus difficiles à lire et à comprendre.
Choisissez le nombre de chiffres approprié pour vos besoins. Un chiffre fournit une précision adéquate pour de nombreux cas d'usage tout en restant lisible. Trois chiffres fournissent 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 inférieure à la seconde dans le formatage de l'heure. 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 lors de l'utilisation de fractionalSecondDigits.
Le Intl.DateTimeFormat de JavaScript prend en charge la précision à la milliseconde mais pas la précision à la microseconde. Trois chiffres fractionnaires représentent les millisecondes, la précision la plus élevée disponible.
Les fractions de seconde fonctionnent avec toutes les autres options de formatage de l'heure, y compris le format 12 heures et 24 heures, les fuseaux horaires et les différentes locales. Le séparateur décimal pour les fractions de seconde reste cohérent d'une locale à l'autre.
Utilisez les fractions de seconde pour la surveillance des performances, les données scientifiques, les journaux de débogage et les horodatages multimédias. Évitez les fractions de seconde dans la mesure du temps quotidienne où la précision à la seconde suffit.