¿Cómo puedo mostrar milisegundos o microsegundos en el tiempo?
Usa Intl.DateTimeFormat para mostrar precisión de subsegundos en visualizaciones de tiempo
Introducción
La mayoría de las visualizaciones de tiempo muestran horas, minutos y segundos. Esta precisión funciona para horarios, citas y el control del tiempo cotidiano. Sin embargo, algunas aplicaciones requieren precisión por debajo del segundo para mostrar décimas, centésimas o milésimas de segundo.
Las herramientas de monitoreo de rendimiento muestran tiempos de respuesta en milisegundos. Las aplicaciones científicas muestran mediciones con precisión inferior al segundo. Las aplicaciones de video y audio muestran marcas de tiempo hasta el milisegundo. Los sistemas de registro registran eventos con marcas de tiempo de segundos fraccionarios para distinguir eventos estrechamente espaciados.
El Intl.DateTimeFormat de JavaScript proporciona la opción fractionalSecondDigits para mostrar precisión por debajo del segundo. Esta lección explica qué son los segundos fraccionarios, cómo mostrarlos y cuándo necesitas este nivel de precisión.
Entendiendo la precisión de segundos fraccionarios
Un segundo es la unidad base de medición del tiempo. Los segundos fraccionarios representan partes de un segundo más pequeñas que un segundo completo.
Una décima de segundo equivale a 0.1 segundos, lo que equivale a 100 milisegundos. Esta precisión distingue eventos que ocurren dentro de una décima de segundo entre sí.
Una centésima de segundo equivale a 0.01 segundos, lo que equivale a 10 milisegundos. Esta precisión distingue eventos que ocurren dentro de una centésima de segundo entre sí.
Una milésima de segundo equivale a 0.001 segundos, lo que equivale a 1 milisegundo. Esta es la precisión más alta compatible con Intl.DateTimeFormat.
JavaScript representa los segundos fraccionarios como dígitos después de un punto decimal. Un dígito muestra décimas, dos dígitos muestran centésimas y tres dígitos muestran milésimas.
Acerca de los microsegundos
El título de la lección menciona microsegundos, pero Intl.DateTimeFormat no admite precisión de microsegundos. Los microsegundos representan millonésimas de segundo y requerirían seis dígitos después del punto decimal. La API admite un máximo de tres dígitos, lo que proporciona precisión de milisegundos.
Los objetos Date de JavaScript almacenan internamente el tiempo como milisegundos desde el 1 de enero de 1970 UTC. Esto significa que los datos subyacentes admiten precisión de milisegundos pero no precisión de microsegundos.
Uso de la opción fractionalSecondDigits
La opción fractionalSecondDigits controla cuántos dígitos aparecen después del punto decimal en el campo de segundos. Acepta valores de 1, 2 o 3.
Debes incluir la opción second cuando uses fractionalSecondDigits. Sin la opción second, el formateador omite completamente el campo de segundos, y la opción de segundos fraccionarios no tiene efecto.
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"
Este formateador muestra horas, minutos, segundos y tres dígitos de segundo fraccionario. El objeto Date contiene precisión de milisegundos, y el formateador muestra los tres dígitos.
Mostrar un dígito de segundo fraccionario
Establecer fractionalSecondDigits a 1 muestra décimas de segundo.
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"
El formateador redondea el valor a un decimal. El valor original contiene 678 milisegundos, lo que equivale a 0.678 segundos, que se redondea a 0.6 segundos cuando se muestra con un dígito.
Mostrar dos dígitos de segundo fraccionario
Establecer fractionalSecondDigits a 2 muestra centésimas de segundo.
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"
El formateador redondea el valor a dos decimales. El valor de 678 milisegundos equivale a 0.678 segundos, que se redondea a 0.67 segundos cuando se muestra con dos dígitos.
Mostrar tres dígitos de segundo fraccionario
Establecer fractionalSecondDigits a 3 muestra milésimas de segundo, lo que equivale a milisegundos.
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"
Esto muestra la precisión completa de milisegundos disponible en los objetos Date de JavaScript. Tres dígitos es la precisión máxima soportada por Intl.DateTimeFormat.
Combinar con formato de hora de 24 horas
Los segundos fraccionarios funcionan con cualquier opción de formato de hora, incluido el formato de 24 horas.
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"
El locale de inglés británico utiliza el formato de 24 horas por defecto, y la opción hourCycle asegura el formato de 24 horas. Los segundos fraccionarios aparecen después de los segundos con un separador de punto decimal.
Incluir zona horaria con segundos fraccionarios
Puedes mostrar segundos fraccionarios junto con información de zona horaria.
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"
Este formateador convierte la hora UTC a la hora de Nueva York y muestra el resultado con precisión de milisegundos y la abreviatura de la zona horaria.
Cómo se formatean los segundos fraccionarios en diferentes locales
Diferentes locales utilizan diferentes separadores decimales para números, pero los segundos fraccionarios utilizan consistentemente un punto como separador decimal en todos los 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: "٢:٢٣:٤٥٫٦٧٨ م"
El inglés utiliza formato de 12 horas con AM/PM. El alemán y el francés utilizan formato de 24 horas. El árabe utiliza dígitos árabe-índicos pero mantiene la misma estructura de formato de hora. Todos los locales utilizan un punto o separador similar para los segundos fraccionarios.
Casos de uso comunes para segundos fraccionarios
El monitoreo de rendimiento muestra tiempos de respuesta con precisión de milisegundos.
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"
Esto muestra la hora exacta de finalización con precisión de milisegundos para el análisis de rendimiento.
El registro de datos científicos requiere marcas de tiempo con precisión inferior al segundo.
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"
Esto crea marcas de tiempo con precisión de milisegundos para mediciones científicas.
Las marcas de tiempo del reproductor de video muestran la posición con precisión inferior al segundo.
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"
Esto formatea una marca de tiempo de video con precisión de centésimas de segundo. Establecer la zona horaria en UTC evita la conversión de zona horaria para el valor de duración.
Cuándo usar segundos fraccionarios
Utiliza segundos fraccionarios cuando necesites distinguir eventos que ocurren dentro del mismo segundo. El monitoreo de rendimiento, la depuración, las mediciones científicas y las aplicaciones multimedia comúnmente requieren esta precisión.
No utilices segundos fraccionarios para el control del tiempo cotidiano. Las citas, horarios y marcas de tiempo orientadas al usuario raramente necesitan precisión inferior al segundo. Agregar precisión innecesaria hace que los tiempos sean más difíciles de leer y comprender.
Elige el número apropiado de dígitos para tus necesidades. Un dígito proporciona precisión adecuada para muchos casos de uso mientras mantiene la legibilidad. Tres dígitos proporcionan máxima precisión pero crean marcas de tiempo más largas y de apariencia más técnica.
Resumen
La opción fractionalSecondDigits muestra precisión de subsegundos en el formato de tiempo. Acepta valores de 1, 2 o 3 para mostrar décimas, centésimas o milésimas de segundo. Debes incluir la opción second cuando uses fractionalSecondDigits.
El Intl.DateTimeFormat de JavaScript admite precisión de milisegundos pero no precisión de microsegundos. Tres dígitos fraccionarios representan milisegundos, la mayor precisión disponible.
Los segundos fraccionarios funcionan con todas las demás opciones de formato de tiempo, incluyendo formato de 12 y 24 horas, zonas horarias y diferentes configuraciones regionales. El separador decimal para segundos fraccionarios se mantiene consistente en todas las configuraciones regionales.
Utiliza segundos fraccionarios para monitoreo de rendimiento, datos científicos, registros de depuración y marcas de tiempo en medios. Evita los segundos fraccionarios en el control de tiempo cotidiano donde la precisión de segundos es suficiente.