¿Cómo muestro milisegundos o microsegundos en la hora?

Introducción

La mayoría de las visualizaciones de hora muestran horas, minutos y segundos. Esta precisión funciona para horarios, citas y cronometraje cotidiano. Sin embargo, algunas aplicaciones requieren precisión de subsegundos 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 de subsegundos. Las aplicaciones de vídeo y audio muestran marcas de tiempo hasta el milisegundo. Los sistemas de registro guardan eventos con marcas de tiempo de fracciones de segundo para distinguir eventos muy próximos.

El Intl.DateTimeFormat de JavaScript proporciona la opción fractionalSecondDigits para mostrar precisión de subsegundos. Esta lección explica qué son los segundos fraccionarios, cómo mostrarlos y cuándo necesitas este nivel de precisión.

Comprender la precisión de segundos fraccionarios

Un segundo es la unidad base de medición de tiempo. Los segundos fraccionarios representan partes de un segundo menores 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 soportada por Intl.DateTimeFormat.

JavaScript representa los segundos fraccionarios como dígitos después de una coma 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 soporta precisión de microsegundos. Los microsegundos representan millonésimas de segundo y requerirían seis dígitos después de la coma decimal. La API soporta 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 segundos fraccionarios. 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 en 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 hacia abajo a 0,6 segundos cuando se muestra con un dígito.

Mostrar dos dígitos de segundos fraccionarios

Establecer fractionalSecondDigits en 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 678 milisegundos equivale a 0,678 segundos, que se redondea hacia abajo a 0,67 segundos cuando se muestra con dos dígitos.

Mostrar tres dígitos de segundos fraccionarios

Establecer fractionalSecondDigits en 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 admitida por Intl.DateTimeFormat.

Combinar con formato de tiempo de 24 horas

Los segundos fraccionarios funcionan con cualquier opción de formato de tiempo, incluyendo el formato de tiempo 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"

La configuración regional del 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 configuraciones regionales

Diferentes configuraciones regionales utilizan diferentes separadores decimales para números, pero los segundos fraccionarios utilizan consistentemente un punto como separador decimal en todas las configuraciones regionales.

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 arábigo-índicos pero mantiene la misma estructura de formato de hora. Todas las configuraciones regionales 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 el tiempo exacto de finalización con precisión de milisegundos para 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 vídeo 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 vídeo 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 utilizar 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 de tiempo cotidiano. Las citas, los horarios y las marcas de tiempo orientadas al usuario rara vez necesitan precisión inferior al segundo. Agregar precisión innecesaria hace que las horas 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 permanece legible. Tres dígitos proporcionan precisión máxima pero crean marcas de tiempo más largas y de aspecto más técnico.

Resumen

La opción fractionalSecondDigits muestra precisión de subsegundos en el formato de hora. Acepta valores de 1, 2 o 3 para mostrar décimas, centésimas o milésimas de segundo. Debes incluir la opción second al usar fractionalSecondDigits.

El Intl.DateTimeFormat de JavaScript soporta precisión de milisegundos pero no precisión de microsegundos. Tres dígitos fraccionarios representan milisegundos, la precisión más alta disponible.

Los segundos fraccionarios funcionan con todas las demás opciones de formato de hora, incluido el formato de 12 y 24 horas, zonas horarias y diferentes configuraciones regionales. El separador decimal para segundos fraccionarios permanece consistente en todas las configuraciones regionales.

Utiliza segundos fraccionarios para monitoreo de rendimiento, datos científicos, registros de depuración y marcas de tiempo multimedia. Evita los segundos fraccionarios en el cronometraje cotidiano donde la precisión de segundos es suficiente.