시간에 밀리초 또는 마이크로초를 표시하는 방법
Intl.DateTimeFormat을 사용하여 시간 표시에서 초 미만 정밀도 표시하기
소개
대부분의 시간 표시는 시, 분, 초를 표시합니다. 이러한 정밀도는 일정, 약속 및 일상적인 시간 기록에 적합합니다. 그러나 일부 애플리케이션은 1/10초, 1/100초 또는 1/1000초를 표시하기 위해 초 미만 정밀도가 필요합니다.
성능 모니터링 도구는 응답 시간을 밀리초 단위로 표시합니다. 과학 애플리케이션은 초 미만 정밀도로 측정값을 표시합니다. 비디오 및 오디오 애플리케이션은 밀리초 단위까지 타임스탬프를 표시합니다. 로깅 시스템은 밀접하게 발생한 이벤트를 구별하기 위해 소수점 이하 초 단위의 타임스탬프로 이벤트를 기록합니다.
JavaScript의 Intl.DateTimeFormat는 초 미만 정밀도를 표시하기 위한 fractionalSecondDigits 옵션을 제공합니다. 이 레슨에서는 소수 초가 무엇인지, 이를 표시하는 방법, 그리고 이러한 수준의 정밀도가 필요한 경우에 대해 설명합니다.
소수점 이하 초 정밀도 이해하기
초는 시간 측정의 기본 단위입니다. 소수점 이하 초는 1초보다 작은 초의 일부를 나타냅니다.
1/10초는 0.1초와 같으며, 이는 100밀리초와 같습니다. 이 정밀도는 서로 1/10초 이내에 발생하는 이벤트를 구별합니다.
1/100초는 0.01초와 같으며, 이는 10밀리초와 같습니다. 이 정밀도는 서로 1/100초 이내에 발생하는 이벤트를 구별합니다.
1/1000초는 0.001초와 같으며, 이는 1밀리초와 같습니다. 이것은 Intl.DateTimeFormat가 지원하는 최고 정밀도입니다.
JavaScript는 소수점 이하 초를 소수점 뒤의 숫자로 나타냅니다. 한 자리는 1/10초, 두 자리는 1/100초, 세 자리는 1/1000초를 나타냅니다.
마이크로초에 대하여
레슨 제목에서는 마이크로초를 언급하지만, Intl.DateTimeFormat는 마이크로초 정밀도를 지원하지 않습니다. 마이크로초는 1/1000000초를 나타내며 소수점 이하 6자리가 필요합니다. 이 API는 최대 3자리를 지원하며, 이는 밀리초 정밀도를 제공합니다.
JavaScript Date 객체는 내부적으로 1970년 1월 1일 UTC 이후의 밀리초 단위로 시간을 저장합니다. 즉, 기본 데이터는 밀리초 정밀도를 지원하지만 마이크로초 정밀도는 지원하지 않습니다.
fractionalSecondDigits 옵션 사용하기
fractionalSecondDigits 옵션은 초 필드의 소수점 이하에 표시되는 자릿수를 제어합니다. 1, 2 또는 3 값을 허용합니다.
fractionalSecondDigits를 사용할 때는 second 옵션을 반드시 포함해야 합니다. second 옵션이 없으면 포매터가 초 필드를 완전히 생략하며, 소수 초 옵션은 효과가 없습니다.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 3
});
console.log(formatter.format(date));
// Output: "2:23:45.678 PM"
이 포맷터는 시, 분, 초 및 소수 초 세 자리를 표시합니다. Date 객체는 밀리초 정밀도를 포함하며, 포맷터는 세 자리를 모두 표시합니다.
소수 초 한 자리 표시하기
fractionalSecondDigits를 1로 설정하면 1/10초를 표시합니다.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 1
});
console.log(formatter.format(date));
// Output: "2:23:45.6 PM"
포맷터는 값을 소수점 한 자리로 반올림합니다. 원래 값은 678밀리초를 포함하며, 이는 0.678초와 같고, 한 자리로 표시할 때 0.6초로 반올림됩니다.
소수 초 두 자리 표시하기
fractionalSecondDigits를 2로 설정하면 1/100초를 표시합니다.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 2
});
console.log(formatter.format(date));
// Output: "2:23:45.67 PM"
포맷터는 값을 소수점 두 자리로 반올림합니다. 678밀리초 값은 0.678초와 같으며, 두 자리로 표시할 때 0.67초로 반올림됩니다.
소수 초 세 자리 표시하기
fractionalSecondDigits를 3으로 설정하면 1/1000초를 표시하며, 이는 밀리초와 같습니다.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 3
});
console.log(formatter.format(date));
// Output: "2:23:45.678 PM"
이는 JavaScript Date 객체에서 사용 가능한 전체 밀리초 정밀도를 표시합니다. 3자리는 Intl.DateTimeFormat가 지원하는 최대 정밀도입니다.
24시간 형식과 결합하기
소수 초는 24시간 형식을 포함한 모든 시간 형식 옵션과 함께 작동합니다.
const date = new Date('2025-10-15T14:23:45.678');
const formatter = new Intl.DateTimeFormat('en-GB', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 3,
hourCycle: 'h23'
});
console.log(formatter.format(date));
// Output: "14:23:45.678"
영국 영어 로케일은 기본적으로 24시간 형식을 사용하며, hourCycle 옵션은 24시간 형식을 보장합니다. 소수 초는 소수점 구분 기호와 함께 초 뒤에 표시됩니다.
소수 초와 함께 시간대 포함
소수 초를 시간대 정보와 함께 표시할 수 있습니다.
const date = new Date('2025-10-15T14:23:45.678Z');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 3,
timeZone: 'America/New_York',
timeZoneName: 'short'
});
console.log(formatter.format(date));
// Output: "10:23:45.678 AM EDT"
이 포매터는 UTC 시간을 뉴욕 시간으로 변환하고 밀리초 정밀도와 시간대 약어와 함께 결과를 표시합니다.
로케일별 소수 초 형식
로케일마다 숫자에 대해 서로 다른 소수점 구분 기호를 사용하지만, 소수 초는 모든 로케일에서 일관되게 마침표를 소수점 구분 기호로 사용합니다.
const date = new Date('2025-10-15T14:23:45.678');
const options = {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
fractionalSecondDigits: 3
};
const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date));
// Output: "2:23:45.678 PM"
const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date));
// Output: "14:23:45.678"
const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date));
// Output: "14:23:45.678"
const ar = new Intl.DateTimeFormat('ar-SA', options);
console.log(ar.format(date));
// Output: "٢:٢٣:٤٥٫٦٧٨ م"
영어는 AM/PM과 함께 12시간 형식을 사용합니다. 독일어와 프랑스어는 24시간 형식을 사용합니다. 아랍어는 아랍-인도 숫자를 사용하지만 동일한 시간 형식 구조를 유지합니다. 모든 로케일은 소수 초에 대해 마침표 또는 유사한 구분 기호를 사용합니다.
소수 초의 일반적인 사용 사례
성능 모니터링은 밀리초 정밀도로 응답 시간을 표시합니다.
const startTime = new Date();
// Perform operation
const endTime = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 3,
hourCycle: 'h23'
});
console.log(`Operation completed at ${formatter.format(endTime)}`);
// Output: "Operation completed at 14:23:45.678"
이것은 성능 분석을 위해 밀리초 정밀도로 정확한 완료 시간을 표시합니다.
과학 데이터 로깅은 초 미만 타임스탬프가 필요합니다.
function logMeasurement(value) {
const timestamp = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 3,
hourCycle: 'h23'
});
console.log(`${formatter.format(timestamp)} - Measurement: ${value}`);
}
logMeasurement(23.5);
// Output: "10/15/2025, 14:23:45.678 - Measurement: 23.5"
이것은 과학적 측정을 위해 밀리초 정밀도로 타임스탬프를 생성합니다.
비디오 플레이어 타임스탬프는 초 미만 정밀도로 위치를 표시합니다.
function formatVideoTimestamp(milliseconds) {
const date = new Date(milliseconds);
const formatter = new Intl.DateTimeFormat('en-US', {
minute: '2-digit',
second: '2-digit',
fractionalSecondDigits: 2,
hourCycle: 'h23',
timeZone: 'UTC'
});
return formatter.format(date);
}
console.log(formatVideoTimestamp(125678));
// Output: "02:05.67"
이것은 100분의 1초 정밀도로 비디오 타임스탬프를 형식화합니다. 시간대를 UTC로 설정하면 지속 시간 값에 대한 시간대 변환이 방지됩니다.
소수 초를 사용해야 하는 경우
동일한 초 내에 발생하는 이벤트를 구별해야 할 때 소수 초를 사용하십시오. 성능 모니터링, 디버깅, 과학적 측정 및 미디어 애플리케이션은 일반적으로 이러한 정밀도가 필요합니다.
일상적인 시간 기록에는 소수 초를 사용하지 마십시오. 약속, 일정 및 사용자 대면 타임스탬프는 초 미만 정밀도가 거의 필요하지 않습니다. 불필요한 정밀도를 추가하면 시간을 읽고 이해하기가 더 어려워집니다.
필요에 따라 적절한 자릿수를 선택하세요. 한 자리는 가독성을 유지하면서 많은 사용 사례에 충분한 정밀도를 제공합니다. 세 자리는 최대 정밀도를 제공하지만 더 길고 기술적으로 보이는 타임스탬프를 생성합니다.
요약
fractionalSecondDigits 옵션은 시간 형식에서 초 미만의 정밀도를 표시합니다. 1, 2 또는 3의 값을 허용하여 1/10초, 1/100초 또는 1/1000초를 표시합니다. fractionalSecondDigits를 사용할 때는 second 옵션을 반드시 포함해야 합니다.
JavaScript의 Intl.DateTimeFormat는 밀리초 정밀도를 지원하지만 마이크로초 정밀도는 지원하지 않습니다. 소수점 이하 세 자리는 사용 가능한 최고 정밀도인 밀리초를 나타냅니다.
소수 초는 12시간 및 24시간 형식, 시간대, 다양한 로케일을 포함한 모든 다른 시간 형식 옵션과 함께 작동합니다. 소수 초의 소수점 구분 기호는 로케일 전체에서 일관되게 유지됩니다.
성능 모니터링, 과학 데이터, 디버깅 로그 및 미디어 타임스탬프에 소수 초를 사용하세요. 초 정밀도로 충분한 일상적인 시간 측정에서는 소수 초를 사용하지 마세요.