시간을 짧게, 중간, 길게 또는 전체로 포맷하는 방법
사전 설정된 시간 스타일을 사용하여 개별적으로 구성하지 않고도 표시할 시간 구성 요소를 제어할 수 있습니다
소개
시간 형식을 지정하려면 표시할 구성 요소를 선택해야 합니다. 회의 시간을 위해 시간과 분을 표시하거나, 정확한 타임스탬프를 위해 초를 추가하거나, 지역 간 조정을 위해 시간대 정보를 포함할 수 있습니다. 각 구성 요소에는 고유한 형식 지정 옵션이 있습니다. 이러한 모든 옵션을 개별적으로 구성하면 코드가 장황해지고 어떤 조합이 잘 작동하는지 이해해야 합니다.
JavaScript의 Intl.DateTimeFormat은 일반적인 형식 지정 선택을 간단한 옵션으로 묶은 사전 설정 스타일을 제공합니다. 숫자 시간, 숫자 분, 숫자 초를 지정하는 대신 timeStyle: "medium"을 요청할 수 있습니다. 시간과 분 표시를 별도로 구성하는 대신 timeStyle: "short"를 요청할 수 있습니다.
이러한 사전 설정은 모든 로케일에서 작동합니다. 동일한 스타일이 미국 영어, 독일어, 일본어 또는 아랍어로 형식을 지정하든 적절한 출력을 생성합니다. 이 레슨에서는 각 스타일 수준이 제공하는 내용과 각각을 사용해야 하는 시기를 설명합니다.
timeStyle이란 무엇인가
'timeStyle' 옵션은 시간이 표시되는 방식을 제어합니다. 이는 어떤 시간 구성 요소가 표시되고 얼마나 상세하게 표시되는지에 영향을 미칩니다. 이 옵션은 "short", "medium", "long", "full" 네 가지 값을 허용합니다.
이 옵션은 여러 형식 지정 옵션을 한 번에 설정하는 단축키를 제공합니다. 스타일을 지정하면 포맷터는 로케일에 따라 시간, 분, 초, 시간대 이름과 같은 구성 요소에 대한 적절한 값을 자동으로 선택합니다.
const formatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short"
});
console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// 출력: "2:30 PM"
이 단일 옵션은 여러 개별 구성 요소 옵션을 설정해야 하는 것을 대체합니다.
네 가지 스타일 수준 이해하기
각 스타일 수준은 간결함과 세부 정보 사이의 다른 균형을 나타냅니다. 짧은 스타일은 필수 구성 요소만 표시하여 공간을 최소화합니다. 전체 스타일은 시간대 이름과 같은 모든 관련 구성 요소를 포함하여 명확성을 극대화합니다.
"short" 스타일은 시간과 분을 보여주는 간결한 출력을 생성합니다. 초와 시간대 정보는 생략하여 대부분의 일상적인 시간 표시 요구에 적합합니다.
"medium" 스타일은 더 정확한 정보를 제공하기 위해 초를 추가합니다. 여전히 시간대 정보는 생략하지만 초 단위까지 정확한 타이밍을 제공합니다.
"long" 스타일은 약식 시간대 정보를 추가합니다. 시간, 분, 초 및 PST 또는 GMT와 같은 짧은 시간대 코드를 포함합니다.
"full" 스타일은 가장 완전한 표현을 생성합니다. Pacific Standard Time과 같이 시간대가 완전히 철자로 표기된 모든 시간 구성 요소를 포함합니다.
각 스타일에 대한 정확한 구성 요소와 형식은 로케일에 따라 다릅니다. 미국 영어는 일반적으로 AM/PM이 있는 12시간 형식을 사용하는 반면, 독일어는 24시간 형식을 사용합니다. 상대적인 세부 수준은 로케일 전체에서 일관되게 유지됩니다.
timeStyle로 시간 형식 지정하기
'timeStyle' 옵션은 시간 형식을 제어합니다. 각 스타일 레벨은 동일한 시간에 대해 다른 출력을 생성합니다.
const date = new Date("2025-03-15T14:30:45");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "full"
});
console.log(shortFormatter.format(date));
// 출력: "2:30 PM"
console.log(mediumFormatter.format(date));
// 출력: "2:30:45 PM"
console.log(longFormatter.format(date));
// 출력: "2:30:45 PM PST"
console.log(fullFormatter.format(date));
// 출력: "2:30:45 PM Pacific Standard Time"
'short' 스타일은 시간과 분만 표시하여 가장 간결합니다. 'medium' 스타일은 정밀도를 위해 초를 추가합니다. 'long' 스타일은 약식 시간대 코드를 포함합니다. 'full' 스타일은 최대한의 명확성을 위해 전체 시간대 이름을 표기합니다.
dateStyle과 timeStyle 결합하기
전체 타임스탬프 형식을 지정하기 위해 두 옵션을 함께 사용할 수 있습니다. 포맷터는 두 스타일을 독립적으로 적용합니다.
const date = new Date("2025-03-15T14:30:45");
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "short"
});
console.log(formatter.format(date));
// 출력: "March 15, 2025 at 2:30 PM"
날짜는 'long' 형식으로 표시되고 시간은 'short' 형식을 사용합니다. 이 조합은 시간을 간결하게 유지하면서 상세한 날짜 컨텍스트를 제공합니다.
필요에 따라 모든 날짜 스타일과 시간 스타일을 조합할 수 있습니다.
const date = new Date("2025-03-15T14:30:45");
const combinations = [
{ dateStyle: "short", timeStyle: "short" },
{ dateStyle: "medium", timeStyle: "medium" },
{ dateStyle: "long", timeStyle: "long" },
{ dateStyle: "full", timeStyle: "full" }
];
combinations.forEach(options => {
const formatter = new Intl.DateTimeFormat("en-US", options);
console.log(formatter.format(date));
});
// 출력:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
일치하는 스타일 레벨을 사용하면 날짜와 시간 모두에서 일관된 세부 정보를 얻을 수 있습니다. 스타일을 혼합하면 한 측면을 다른 측면보다 강조할 수 있습니다.
로케일에 따라 시간 스타일이 다양하게 변하는 방식
각 로케일은 자체 규칙에 따라 시간을 형식화합니다. 동일한 스타일이라도 로케일에 따라 다른 출력을 생성하지만, 상대적인 세부 수준은 일관되게 유지됩니다.
const date = new Date("2025-03-15T14:30:45");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "short"
});
const longFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Long: ${longFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 2:30 PM
// Long: 2:30:45 PM PST
// de-DE:
// Short: 14:30
// Long: 14:30:45 PST
// fr-FR:
// Short: 14:30
// Long: 14:30:45 UTC−8
// ja-JP:
// Short: 14:30
// Long: 14:30:45 PST
미국 영어는 AM/PM이 있는 12시간 형식을 사용합니다. 독일어, 프랑스어, 일본어는 24시간 형식을 사용합니다. 긴 스타일은 각 로케일에 적합한 형식으로 시간대 정보를 추가합니다.
이러한 차이점은 시간을 표시하는 각 문화의 관례를 반영합니다. API는 로케일 식별자를 기반으로 이러한 변형을 자동으로 처리합니다.
짧은 스타일을 사용해야 하는 경우
짧은 스타일은 대부분의 일상적인 시간 표시에 가장 적합합니다. 초 단위나 시간대 세부 정보로 인터페이스를 복잡하게 만들지 않고 사용자가 일반적으로 필요로 하는 정보를 보여줍니다.
회의 시간, 약속 일정 또는 초 단위 정밀도가 불필요한 모든 상황에서 짧은 시간 스타일을 사용하세요. 대부분의 사용자는 정확한 초보다는 시간과 분 단위로 생각합니다.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "short"
});
const meetings = [
{ title: "Team standup", time: new Date("2025-03-15T09:00:00") },
{ title: "Client call", time: new Date("2025-03-15T14:30:00") },
{ title: "Code review", time: new Date("2025-03-15T16:45:00") }
];
meetings.forEach(meeting => {
console.log(`${meeting.title}: ${formatter.format(meeting.time)}`);
});
// Output:
// Team standup: 9:00 AM
// Client call: 2:30 PM
// Code review: 4:45 PM
캘린더 애플리케이션, 일정 관리 인터페이스 및 시간 선택기는 짧은 스타일의 이점을 얻습니다. 간결한 형식은 인터페이스를 깔끔하게 유지하면서 사용자가 이벤트 발생 시간을 이해하는 데 필요한 모든 정보를 제공합니다.
짧은 스타일은 사용자가 시간대 컨텍스트를 이해한다고 가정합니다. 모든 사용자가 동일한 시간대에서 작업하거나 애플리케이션이 시간대 변환을 투명하게 처리할 때는 명시적인 시간대 표시가 중복됩니다.
중간 스타일을 사용해야 하는 경우
중간 스타일은 시간대 정보를 암시적으로 유지하면서 초 단위의 정밀도를 제공합니다. 이는 정확한 시간이 중요하지만 시간대가 문맥에서 이해되는 상황에 적합합니다.
애플리케이션 로그, 활동 피드 또는 감사 추적에서 정확한 타임스탬프를 표시할 때 중간 시간 스타일을 사용하세요. 이러한 상황에서는 초 단위까지 정확히 언제 작업이 발생했는지 알아야 합니다.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "medium"
});
const activities = [
{ action: "User logged in", time: new Date("2025-03-15T09:15:23") },
{ action: "File uploaded", time: new Date("2025-03-15T09:18:47") },
{ action: "Settings updated", time: new Date("2025-03-15T09:22:11") }
];
activities.forEach(activity => {
console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});
// Output:
// User logged in: 9:15:23 AM
// File uploaded: 9:18:47 AM
// Settings updated: 9:22:11 AM
개발자 도구, 디버깅 인터페이스 및 성능 모니터링 대시보드는 중간 스타일을 사용하여 정확한 시간 정보를 표시합니다. 초 단위 정밀도는 패턴 식별, 지속 시간 측정 및 이벤트 상관관계 파악에 도움이 됩니다.
중간 스타일은 짧은 스타일보다 더 자세한 정보가 필요하지만 시간대 정보의 상세함은 필요하지 않을 때 적합합니다. 대부분의 사용자는 애플리케이션 컨텍스트에서 시간대를 유추할 수 있습니다.
긴 스타일을 사용해야 하는 경우
긴 스타일은 시간 표시에 약식 시간대 정보를 추가합니다. 이는 사용자가 자신의 시간대를 기준으로 이벤트가 언제 발생했거나 발생할 예정인지 이해하는 데 도움이 됩니다.
시간대 간 조정이 필요하거나 시청자의 위치에 따라 다르게 해석될 수 있는 시간을 표시할 때 긴 시간 스타일을 사용하세요. 약식 시간대 코드는 과도한 공간을 차지하지 않으면서 컨텍스트를 제공합니다.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const events = [
{ name: "Webinar starts", time: new Date("2025-03-15T14:00:00") },
{ name: "Registration closes", time: new Date("2025-03-15T13:30:00") }
];
events.forEach(event => {
console.log(`${event.name}: ${formatter.format(event.time)}`);
});
// Output:
// Webinar starts: 2:00:00 PM EST
// Registration closes: 1:30:00 PM EST
국제 애플리케이션, 분산된 팀을 위한 일정 관리 도구 및 이벤트 조정 플랫폼은 긴 스타일의 이점을 얻습니다. 시간대 코드는 시간이 어떤 시간대를 나타내는지에 대한 모호함을 제거합니다.
항공권 예약 시스템, 컨퍼런스 일정 애플리케이션 및 원격 작업 도구는 긴 스타일을 사용하여 사용자가 다른 시간대의 시간을 이해하는 데 도움을 줍니다. 이 형식은 명확성과 공간 효율성의 균형을 맞춥니다.
전체 스타일을 사용해야 하는 경우
전체 스타일은 가장 완전한 시간 표현을 제공합니다. 전체 시간대 이름을 모두 표기하여 시간이 어떤 시간대를 나타내는지에 대한 모든 모호성을 제거합니다.
최대한의 명확성이 필요한 시간을 표시할 때 전체 시간 스타일을 사용하세요. 전체 시간대 이름을 표기하면 다른 지역의 사용자들이 이벤트가 정확히 언제 발생하는지 이해하는 데 도움이 됩니다.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full",
timeStyle: "full"
});
const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// 출력: "2025년 3월 15일 토요일 오후 2시 30분 45초 태평양 표준시"
전체 스타일은 중요한 단일 이벤트, 확인 메시지 또는 사용자가 완전한 시간적 맥락을 볼 때 이점이 있는 모든 곳에서 잘 작동합니다. 국제 회의 초대, 이벤트 확인 및 공식 일정 관련 커뮤니케이션은 이 수준의 세부 정보가 유용합니다.
시간에 민감한 법적 문서, 공식 기록 및 규정 준수 관련 타임스탬프는 전체 스타일을 사용하여 명확한 시간 정보를 제공합니다. 완전한 시간대 이름은 이벤트가 발생한 시간에 대한 혼란을 방지합니다.
제한 사항 이해하기
timeStyle 옵션은 개별 시간 구성 요소 옵션과 함께 사용할 수 없습니다. 스타일 프리셋을 사용하거나 구성 요소를 개별적으로 구성하는 방법 중 하나를 선택해야 합니다.
다음은 작동하지 않습니다:
const formatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium",
hour: "2-digit" // 오류: 함께 사용할 수 없음
});
timeStyle 옵션은 이미 시간 형식을 결정합니다. 명시적인 hour 옵션을 추가하면 충돌이 발생합니다. 이 제한은 minute, second 또는 timeZoneName과 같은 다른 구성 요소 옵션에도 적용됩니다.
특정 구성 요소에 대한 더 많은 제어가 필요한 경우, 스타일 옵션을 생략하고 구성 요소를 개별적으로 구성하세요.
const formatter = new Intl.DateTimeFormat("en-US", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
console.log(formatter.format(new Date("2025-03-15T14:30:45")));
// 출력: "오후 02:30:45"
dateStyle과 timeStyle은 서로 다른 형식 지정 측면을 제어하기 때문에 함께 사용할 수 있습니다. 또한 timeZone, calendar 또는 numberingSystem과 같이 충돌하지 않는 옵션과 함께 사용할 수 있습니다.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "long",
timeZone: "America/New_York"
});
console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// 출력: "2025년 3월 15일 오후 2시 30분 45초 EST"
사용자 로케일에 맞게 시간 형식 지정
브라우저의 언어 환경설정을 사용하여 각 사용자의 기대에 맞게 시간 형식을 지정합니다. navigator.language 속성은 사용자가 선호하는 로케일을 제공합니다.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "short"
});
const time = new Date("2025-03-15T14:30:00");
console.log(formatter.format(time));
// 출력은 사용자의 로케일에 따라 다름
// en-US의 경우: "2:30 PM"
// de-DE의 경우: "14:30"
// fr-FR의 경우: "14:30"
전체 navigator.languages 배열을 전달하여 폴백 동작을 활성화할 수도 있습니다. 포맷터는 배열에서 지원하는 첫 번째 로케일을 사용합니다.
const formatter = new Intl.DateTimeFormat(navigator.languages, {
timeStyle: "medium"
});
성능을 위해 포맷터 재사용
Intl.DateTimeFormat 인스턴스를 생성하는 것은 로케일 데이터와 옵션을 처리하는 작업을 포함합니다. 동일한 설정으로 여러 번 형식을 지정할 때는 포맷터를 한 번 생성하고 재사용하세요.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "short"
});
const times = [
new Date("2025-03-15T09:00:00"),
new Date("2025-03-15T14:30:00"),
new Date("2025-03-15T16:45:00")
];
times.forEach(time => {
console.log(formatter.format(time));
});
// 출력:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"
이 패턴은 시간 배열을 형식화하거나 사용자 인터페이스에 많은 타임스탬프를 표시할 때 성능을 향상시킵니다.
기억해야 할 사항
timeStyle 옵션은 "short", "medium", "long", "full" 등의 사전 설정된 형식 수준을 제공합니다. 각 수준은 간결함과 세부 정보 사이의 균형을 나타냅니다. short는 시간과 분을 표시하고, medium은 초를 추가하며, long은 약식 시간대를 추가하고, full은 완전한 시간대 이름을 포함합니다.
개별 시간 구성 요소를 수동으로 구성하는 대신 이러한 사전 설정을 사용하세요. 사전 설정은 로케일별 형식 지정 규칙을 이해할 필요 없이 모든 로케일에 대해 적절한 출력을 생성합니다.
timeStyle을 dateStyle과 함께 사용할 수 있지만 hour나 minute과 같은 개별 구성 요소 옵션과 결합할 수는 없습니다. 단순성을 위해 사전 설정 스타일을 선택하거나 세밀한 제어를 위해 개별 구성 요소를 선택하세요.
navigator.language에서 사용자의 로케일을 사용하여 각 사용자의 기대에 맞게 시간을 형식화하세요. 더 나은 성능을 위해 여러 시간을 형식화할 때 포맷터 인스턴스를 재사용하세요.