Cómo incluir fracciones de segundo en la visualización de duración

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 carrera muestra un tiempo de finalización 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 locales utilizan 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: mil milloné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 segundos fraccionarios a las duraciones

La opción fractionalDigits controla cuántos decimales aparecen en el valor de segundos. Establece esta opción para incluir segundos fraccionarios 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 enteras y fraccionarias en un único valor formateado con el separador decimal apropiado para la configuración regional.

Controlar la precisión de segundos fraccionarios

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 segundos fraccionarios en formato digital

El formato digital muestra duraciones con dos puntos como un temporizador. Los segundos fraccionarios 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 segundos fraccionarios en diferentes locales

Diferentes locales utilizan 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 utiliza el separador decimal correcto, los caracteres de dígitos y el espaciado adecuados para cada locale.

Formatear tiempos de cronómetro

Las aplicaciones de cronómetro necesitan mostrar el tiempo transcurrido con precisión de subsegundos. Utiliza el formato digital con segundos fraccionarios.

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 llegada en carreras

Los sistemas de cronometraje deportivo muestran los tiempos de llegada con alta precisión. Utiliza precisión de milisegundos para los 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 un 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 de subsegundos. Utiliza 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 un 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 precisas a nivel de fotograma. Utiliza 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 los milisegundos a segundos fraccionarios dividiéndolos 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 a 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 inferior a un segundo.

Elegir la precisión según el 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 de fractionalDigits a tus requisitos de precisión.

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

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

// Para mediciones precisas
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 fracciones de segundo cuando no sean necesarias

Establece fractionalDigits: 0 para mostrar segundos completos 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 del número entero.

Reutilizar formateadores con fracciones de segundo

La creación de 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 estándar en marzo de 2025. Funciona en las últimas versiones de Chrome, Edge, Firefox y Safari.

Verifica la compatibilidad antes de usar fracciones de segundo.

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 más antiguos mientras utiliza la API nativa cuando está disponible.