기간 표시에 소수점 이하 초를 포함하는 방법

형식화된 시간 범위에서 초 미만 정밀도 표시

소개

초 미만 정밀도로 기간을 표시할 때는 소수점 이하 초를 표시해야 합니다. 스톱워치는 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/1000초 (0.001초)
  • 마이크로초: 1/1000000초 (0.000001초)
  • 나노초: 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초"로 표시하려면 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은 초 미만 지속 시간을 나타냅니다.

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

애플리케이션마다 다른 수준의 정밀도가 필요합니다:

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

fractionalDigits 값을 정밀도 요구 사항에 맞추세요.

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"

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

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

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 옵션은 2025년 3월에 베이스라인이 된 Intl.DurationFormat API의 일부입니다. 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를 사용하면서 이전 브라우저에 대한 대체 방법을 제공합니다.