How to include fractional seconds in duration display

Introduction

When you display durations with subsecond precision, you need to show fractional seconds. A stopwatch shows 1.234 seconds, a performance profiler displays load time of 0.853 seconds, a race timer shows finishing time of 45.678 seconds. Without proper formatting, you might write code like this:

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

This produces "1.234s" with a hardcoded decimal separator. French users see "1.234s" when they expect "1,234 s" with a comma as the decimal separator. Different locales use different decimal separators and spacing conventions.

JavaScript provides the fractionalDigits option in Intl.DurationFormat to control how fractional seconds appear in formatted durations. This lesson explains how to add fractional seconds to duration displays and control their precision.

What fractional seconds are

Fractional seconds represent time intervals smaller than one second. The value 1.5 seconds means one and a half seconds. The value 0.250 seconds means one quarter of a second.

Fractional seconds appear in three forms:

Milliseconds: thousandths of a second (0.001 seconds)
Microseconds: millionths of a second (0.000001 seconds)
Nanoseconds: billionths of a second (0.000000001 seconds)

The fractionalDigits option controls how many decimal places appear after the seconds value. Setting fractionalDigits: 3 shows millisecond precision. Setting fractionalDigits: 6 shows microsecond precision.

Format durations without fractional seconds

By default, duration formatting shows whole seconds without any fractional component.

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"

Even if you include milliseconds as a separate unit, they display as a distinct unit rather than as fractional seconds.

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

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

This displays two separate units. To show "1.234 seconds" instead, you need the fractionalDigits option.

Add fractional seconds to durations

The fractionalDigits option controls how many decimal places appear in the seconds value. Set this option to include fractional seconds in the output.

const duration = { seconds: 1.234 };

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

The API combines the whole and fractional parts into a single formatted value with the appropriate decimal separator for the locale.

Control fractional second precision

The fractionalDigits option accepts values from 0 to 9. This determines how many digits appear after the decimal point.

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"

When the specified precision exceeds the available digits, the formatter pads with zeros.

const duration = { seconds: 1.5 };

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

When rounding is necessary, the formatter rounds toward zero.

const duration = { seconds: 1.9999 };

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

Use fractional seconds in digital format

Digital format displays durations with colons like a timer. Fractional seconds appear after the seconds value.

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"

This works for any combination of time units in digital format.

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

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

Format fractional seconds in different locales

Different locales use different decimal separators. English uses a period, many European languages use a comma.

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

The API uses the correct decimal separator, digit characters, and spacing for each locale.

Format stopwatch times

Stopwatch applications need to display elapsed time with subsecond precision. Use digital format with fractional seconds.

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"

This displays times like "1:05.47" with two decimal places for centisecond precision.

Format race finishing times

Sports timing systems display finishing times with high precision. Use millisecond precision for race results.

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"

The three decimal places show millisecond precision for accurate race timing.

Format performance metrics

Performance profilers display load times and execution times with subsecond precision. Use short format with fractional seconds.

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"

This displays performance metrics in a compact format with millisecond precision.

Format video frame timestamps

Video editing applications display frame-accurate timestamps. Use fractional seconds based on the frame rate.

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"

This shows timestamps with frame-level precision for 100fps video.

Convert milliseconds to fractional seconds

Time calculations often produce milliseconds. Convert milliseconds to fractional seconds by dividing by 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"

This converts whole milliseconds into a fractional seconds value.

Handle very small durations

For durations less than one second, include only the seconds unit with fractional digits.

const duration = { seconds: 0.045 };

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

The zero before the decimal point indicates a subsecond duration.

Choose precision for your use case

Different applications require different levels of precision:

Stopwatches: 2 decimal places (centiseconds)
Sports timing: 3 decimal places (milliseconds)
Performance profiling: 3 decimal places (milliseconds)
Scientific measurements: 6-9 decimal places (microseconds to nanoseconds)

Match the fractionalDigits value to your precision requirements.

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"

Avoid showing more precision than your measurement system provides.

Omit fractional seconds when not needed

Set fractionalDigits: 0 to display whole seconds without any fractional component.

const duration = { seconds: 1.7 };

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

This rounds the value and displays only the whole number part.

Reuse formatters with fractional seconds

Creating formatters with specific precision settings follows the same performance optimization as other formatters.

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

This reuses the formatter instance for better performance when formatting multiple durations.

Browser support

The fractionalDigits option is part of the Intl.DurationFormat API, which became Baseline in March 2025. It works in the latest versions of Chrome, Edge, Firefox, and Safari.

Check support before using fractional seconds.

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

This provides a fallback for older browsers while using the native API when available.