지속 시간 표시에 소수점 초를 포함하는 방법

포맷된 시간 범위에 초 이하 정밀도 표시하기

소개

초 단위 이하의 정밀도로 지속 시간을 표시할 때는 소수점 초를 표시해야 합니다. 스톱워치는 1.234초를 표시하고, 성능 프로파일러는 0.853초의 로드 시간을 표시하며, 경주 타이머는 45.678초의 완주 시간을 표시합니다. 적절한 형식 지정 없이는 다음과 같은 코드를 작성할 수 있습니다:

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

이는 하드코딩된 소수점 구분자로 "1.234s"를 생성합니다. 프랑스 사용자는 소수점 구분자로 쉼표를 사용하는 "1,234 s"를 기대하지만 "1.234s"를 보게 됩니다. 다양한 로케일은 서로 다른 소수점 구분자와 간격 규칙을 사용합니다.

JavaScript는 Intl.DurationFormat에서 fractionalDigits 옵션을 제공하여 형식이 지정된 지속 시간에서 소수점 초가 어떻게 표시되는지 제어합니다. 이 강의에서는 지속 시간 표시에 소수점 초를 추가하고 그 정밀도를 제어하는 방법을 설명합니다.

소수점 초란 무엇인가

소수점 초는 1초보다 작은 시간 간격을 나타냅니다. 1.5초 값은 1초 반을 의미합니다. 0.250초 값은 1/4초를 의미합니다.

소수점 초는 세 가지 형태로 나타납니다:

  • 밀리초: 1초의 1/1000 (0.001초)
  • 마이크로초: 1초의 1/1000000 (0.000001초)
  • 나노초: 1초의 1/1000000000 (0.000000001초)

fractionalDigits 옵션은 초 값 뒤에 표시되는 소수점 자릿수를 제어합니다. fractionalDigits: 3으로 설정하면 밀리초 정밀도를 표시합니다. fractionalDigits: 6으로 설정하면 마이크로초 정밀도를 표시합니다.

소수점 초 없이 지속 시간 형식 지정하기

기본적으로 지속 시간 형식 지정은 소수점 구성 요소 없이 전체 초를 표시합니다.

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"

밀리초를 별도의 단위로 포함하더라도 소수점 초가 아닌 별개의 단위로 표시됩니다.

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

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

이는 두 개의 별도 단위를 표시합니다. "1.234 seconds" 대신 표시하려면 fractionalDigits 옵션이 필요합니다.

기간에 소수점 초 추가하기

fractionalDigits 옵션은 초 값에 표시되는 소수점 자릿수를 제어합니다. 출력에 소수점 초를 포함하려면 이 옵션을 설정하세요.

const duration = { seconds: 1.234 };

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

이 API는 로케일에 맞는 적절한 소수점 구분자를 사용하여 정수부와 소수부를 단일 형식 값으로 결합합니다.

소수점 초 정밀도 제어하기

fractionalDigits 옵션은 0부터 9까지의 값을 허용합니다. 이는 소수점 이하에 표시되는 자릿수를 결정합니다.

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"

지정된 정밀도가 사용 가능한 자릿수를 초과하면 포맷터는 0으로 채웁니다.

const duration = { seconds: 1.5 };

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

반올림이 필요한 경우, 포맷터는 0을 향해 반올림합니다.

const duration = { seconds: 1.9999 };

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

디지털 형식에서 소수점 초 사용하기

디지털 형식은 타이머처럼 콜론으로 기간을 표시합니다. 소수점 초는 초 값 뒤에 표시됩니다.

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"

이는 디지털 형식의 모든 시간 단위 조합에서 작동합니다.

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

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

다양한 로케일에서 소수부 초 형식 지정

다양한 로케일은 서로 다른 소수점 구분 기호를 사용합니다. 영어는 마침표를 사용하고, 많은 유럽 언어는 쉼표를 사용합니다.

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

이 API는 각 로케일에 맞는 올바른 소수점 구분 기호, 숫자 문자 및 간격을 사용합니다.

스톱워치 시간 형식 지정

스톱워치 애플리케이션은 초 미만의 정밀도로 경과 시간을 표시해야 합니다. 소수부 초를 포함한 디지털 형식을 사용하세요.

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"

이는 센티초 정밀도를 위해 소수점 이하 두 자리를 포함하여 "1:05.47"과 같은 시간을 표시합니다.

경주 완주 시간 형식 지정

스포츠 타이밍 시스템은 높은 정밀도로 완주 시간을 표시합니다. 경주 결과에는 밀리초 정밀도를 사용하세요.

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"

소수점 이하 세 자리는 정확한 경주 타이밍을 위한 밀리초 정밀도를 보여줍니다.

성능 지표 형식 지정

성능 프로파일러는 초 미만의 정밀도로 로드 시간과 실행 시간을 표시합니다. 소수부 초를 포함한 짧은 형식을 사용하세요.

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"

이는 밀리초 정밀도를 갖춘 간결한 형식으로 성능 지표를 표시합니다.

비디오 프레임 타임스탬프 형식 지정

비디오 편집 애플리케이션은 프레임 단위로 정확한 타임스탬프를 표시합니다. 프레임 속도에 기반한 소수점 초를 사용하세요.

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"

이는 100fps 비디오에 대한 프레임 수준의 정밀도로 타임스탬프를 표시합니다.

밀리초를 소수점 초로 변환

시간 계산은 종종 밀리초 단위로 결과를 생성합니다. 밀리초를 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"

이는 전체 밀리초를 소수점 초 값으로 변환합니다.

매우 작은 지속 시간 처리

1초 미만의 지속 시간의 경우, 소수점 자릿수가 있는 초 단위만 포함하세요.

const duration = { seconds: 0.045 };

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

소수점 앞의 0은 1초 미만의 지속 시간을 나타냅니다.

사용 사례에 맞는 정밀도 선택

다양한 애플리케이션은 서로 다른 수준의 정밀도가 필요합니다:

  • 스톱워치: 소수점 2자리(센티초)
  • 스포츠 타이밍: 소수점 3자리(밀리초)
  • 성능 프로파일링: 소수점 3자리(밀리초)
  • 과학적 측정: 소수점 6-9자리(마이크로초에서 나노초)

정밀도 요구 사항에 맞게 fractionalDigits 값을 설정하세요.

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

// 일반 타이밍용
new Intl.DurationFormat(locale, {
  style: 'digital',
  fractionalDigits: 2
}).format(duration);
// "0:00:01.23"

// 정밀 측정용
new Intl.DurationFormat(locale, {
  style: 'short',
  fractionalDigits: 6
}).format(duration);
// "1.234568 sec"

측정 시스템이 제공하는 것보다 더 높은 정밀도를 표시하지 마세요.

필요하지 않을 때 소수점 초 생략하기

소수점 구성 요소 없이 전체 초를 표시하려면 fractionalDigits: 0으로 설정하세요.

const duration = { seconds: 1.7 };

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

이렇게 하면 값을 반올림하고 정수 부분만 표시합니다.

소수점 초가 있는 포맷터 재사용하기

특정 정밀도 설정으로 포맷터를 생성하는 것은 다른 포맷터와 동일한 성능 최적화를 따릅니다.

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

이렇게 하면 여러 시간을 포맷팅할 때 더 나은 성능을 위해 포맷터 인스턴스를 재사용합니다.

브라우저 지원

fractionalDigits 옵션은 Intl.DurationFormat API의 일부로, 2025년 3월에 기준선이 되었습니다. 최신 버전의 Chrome, Edge, Firefox 및 Safari에서 작동합니다.

소수점 초를 사용하기 전에 지원 여부를 확인하세요.

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

이는 네이티브 API를 사용할 수 있을 때 사용하면서 오래된 브라우저를 위한 대체 방안을 제공합니다.