Cómo incluir segundos fraccionarios en la visualización de duraciones

Mostrar precisión de subsegundos en intervalos de tiempo formateados

Introducción

Cuando muestras duraciones con precisión de subsegundos, necesitas mostrar segundos fraccionarios. Un cronómetro muestra 1,234 segundos, un perfilador de rendimiento muestra un tiempo de carga de 0,853 segundos, un temporizador de carreras muestra un tiempo final de 45,678 segundos. Sin el formato adecuado, podrías escribir código como este:

const seconds = 1.234;
const duration = `${seconds}s`;

Esto produce "1.234s" con un separador decimal codificado. Los usuarios franceses ven "1.234s" cuando esperan "1,234 s" con una coma como separador decimal. Diferentes configuraciones regionales usan diferentes separadores decimales y convenciones de espaciado.

JavaScript proporciona la opción fractionalDigits en Intl.DurationFormat para controlar cómo aparecen los segundos fraccionarios en las duraciones formateadas. Esta lección explica cómo añadir segundos fraccionarios a las visualizaciones de duración y controlar su precisión.

Qué son los segundos fraccionarios

Los segundos fraccionarios representan intervalos de tiempo menores a un segundo. El valor 1,5 segundos significa un segundo y medio. El valor 0,250 segundos significa un cuarto de segundo.

Los segundos fraccionarios aparecen en tres formas:

  • Milisegundos: milésimas de segundo (0,001 segundos)
  • Microsegundos: millonésimas de segundo (0,000001 segundos)
  • Nanosegundos: milmillonésimas de segundo (0,000000001 segundos)

La opción fractionalDigits controla cuántos decimales aparecen después del valor de segundos. Establecer fractionalDigits: 3 muestra precisión de milisegundos. Establecer fractionalDigits: 6 muestra precisión de microsegundos.

Formatear duraciones sin segundos fraccionarios

Por defecto, el formato de duración muestra segundos enteros sin ningún componente fraccionario.

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"

Incluso si incluyes milisegundos como una unidad separada, se muestran como una unidad distinta en lugar de como segundos fraccionarios.

const duration = { seconds: 1, milliseconds: 234 };

new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second and 234 milliseconds"

Esto muestra dos unidades separadas. Para mostrar "1,234 segundos" en su lugar, necesitas la opción fractionalDigits.

Añadir fracciones de segundo a las duraciones

La opción fractionalDigits controla cuántos decimales aparecen en el valor de segundos. Establece esta opción para incluir fracciones de segundo en la salida.

const duration = { seconds: 1.234 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1.234 seconds"

La API combina las partes entera y fraccionaria en un único valor formateado con el separador decimal apropiado para la configuración regional.

Controlar la precisión de las fracciones de segundo

La opción fractionalDigits acepta valores de 0 a 9. Esto determina cuántos dígitos aparecen después del punto decimal.

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"

Cuando la precisión especificada excede los dígitos disponibles, el formateador rellena con ceros.

const duration = { seconds: 1.5 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 4
}).format(duration);
// "1.5000 seconds"

Cuando es necesario redondear, el formateador redondea hacia cero.

const duration = { seconds: 1.9999 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 2
}).format(duration);
// "1.99 seconds"

Usar fracciones de segundo en formato digital

El formato digital muestra duraciones con dos puntos como un cronómetro. Las fracciones de segundo aparecen después del valor de segundos.

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"

Esto funciona para cualquier combinación de unidades de tiempo en formato digital.

const duration = { minutes: 5, seconds: 30.678 };

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
}).format(duration);
// "5:30.678"

Formatear fracciones de segundo en diferentes configuraciones regionales

Diferentes configuraciones regionales usan diferentes separadores decimales. El inglés usa un punto, muchos idiomas europeos usan una coma.

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);
// "١٫٢٣٤ ثانية"

La API usa el separador decimal, los caracteres de dígitos y el espaciado correctos para cada configuración regional.

Formatear tiempos de cronómetro

Las aplicaciones de cronómetro necesitan mostrar el tiempo transcurrido con precisión de subsegundos. Usa el formato digital con fracciones de segundo.

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"

Esto muestra tiempos como "1:05.47" con dos decimales para precisión de centésimas de segundo.

Formatear tiempos de finalización de carreras

Los sistemas de cronometraje deportivo muestran tiempos de finalización con alta precisión. Usa precisión de milisegundos para resultados de carreras.

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"

Los tres decimales muestran precisión de milisegundos para cronometraje preciso de carreras.

Formatear métricas de rendimiento

Los perfiladores de rendimiento muestran tiempos de carga y tiempos de ejecución con precisión subsegundo. Usa formato corto con segundos fraccionarios.

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"

Esto muestra métricas de rendimiento en formato compacto con precisión de milisegundos.

Formatear marcas de tiempo de fotogramas de vídeo

Las aplicaciones de edición de vídeo muestran marcas de tiempo con precisión de fotograma. Usa segundos fraccionarios basados en la velocidad de fotogramas.

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"

Esto muestra marcas de tiempo con precisión a nivel de fotograma para vídeo de 100fps.

Convertir milisegundos a segundos fraccionarios

Los cálculos de tiempo a menudo producen milisegundos. Convierte milisegundos a segundos fraccionarios dividiendo por 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"

Esto convierte milisegundos enteros en un valor de segundos fraccionarios.

Manejar duraciones muy pequeñas

Para duraciones menores de un segundo, incluye solo la unidad de segundos con dígitos fraccionarios.

const duration = { seconds: 0.045 };

new Intl.DurationFormat('en', {
  style: 'short',
  fractionalDigits: 3
}).format(duration);
// "0.045 sec"

El cero antes del punto decimal indica una duración subsegundo.

Elegir precisión para tu caso de uso

Diferentes aplicaciones requieren diferentes niveles de precisión:

  • Cronómetros: 2 decimales (centésimas de segundo)
  • Cronometraje deportivo: 3 decimales (milisegundos)
  • Perfilado de rendimiento: 3 decimales (milisegundos)
  • Mediciones científicas: 6-9 decimales (microsegundos a nanosegundos)

Ajusta el valor fractionalDigits a tus requisitos de precisión.

const duration = { seconds: 1.23456789 };
const locale = navigator.language;

// For general timing
new Intl.DurationFormat(locale, {
  style: 'digital',
  fractionalDigits: 2
}).format(duration);
// "0:00:01.23"

// For precise measurements
new Intl.DurationFormat(locale, {
  style: 'short',
  fractionalDigits: 6
}).format(duration);
// "1.234568 sec"

Evita mostrar más precisión de la que proporciona tu sistema de medición.

Omitir segundos fraccionarios cuando no sean necesarios

Establece fractionalDigits: 0 para mostrar segundos enteros sin ningún componente fraccionario.

const duration = { seconds: 1.7 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 0
}).format(duration);
// "1 second"

Esto redondea el valor y muestra solo la parte entera.

Reutilizar formateadores con segundos fraccionarios

Crear formateadores con configuraciones de precisión específicas sigue la misma optimización de rendimiento que otros formateadores.

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"]

Esto reutiliza la instancia del formateador para un mejor rendimiento al formatear múltiples duraciones.

Compatibilidad con navegadores

La opción fractionalDigits es parte de la API Intl.DurationFormat, que se convirtió en Baseline en marzo de 2025. Funciona en las últimas versiones de Chrome, Edge, Firefox y Safari.

Verifica la compatibilidad antes de usar segundos fraccionarios.

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)}`;
}

Esto proporciona una alternativa para navegadores antiguos mientras usa la API nativa cuando está disponible.