그레고리안, 히브리, 이슬람과 같은 달력 이름을 어떻게 표시하나요?

소개

다양한 문화와 종교는 날짜를 기록하고 시간을 조직하기 위해 서로 다른 달력 시스템을 사용합니다. 그레고리력은 세계 여러 지역에서 일반적으로 사용되지만, 다른 달력 시스템은 종교적 의식, 문화 행사 및 일상생활에 사용됩니다. 히브리력은 이스라엘과 전 세계 유대인 공동체에서 사용됩니다. 이슬람력은 무슬림의 종교적 관행을 안내합니다. 불교력은 태국 및 다른 동남아시아 국가에서 사용됩니다.

국제적인 사용자층을 대상으로 하는 애플리케이션은 사용자가 선호하는 달력 시스템을 선택할 수 있도록 해야 합니다. 날짜 선택기, 설정 인터페이스 및 일정 도구는 달력 이름을 표시하여 사용자가 자신의 필요에 맞는 시스템을 선택할 수 있도록 합니다. "gregory" 또는 "islamic-umalqura"와 같은 암호화된 코드 대신, "그레고리력" 또는 "움 알쿠라력"과 같은 읽기 쉬운 이름을 표시합니다.

JavaScript의 Intl.DisplayNames API는 달력 시스템 코드를 사람이 읽을 수 있는 이름으로 변환합니다. 이 API는 번역을 자동으로 처리하여 사용자의 언어로 달력 이름을 표시하며, 수동 번역 파일이 필요하지 않습니다.

달력 코드란 무엇인가

달력 코드는 서로 다른 달력 시스템을 나타내는 짧은 문자열 식별자입니다. JavaScript는 이러한 표준화된 코드를 내부적으로 사용하여 달력을 식별합니다.

일반적인 달력 코드에는 다음이 포함됩니다:

gregory: 그레고리력
hebrew: 히브리력
islamic: 이슬람력
buddhist: 불교력
chinese: 중국력
japanese: 일본력

이 코드는 유니코드 로케일 식별자 사양을 따릅니다. 항상 소문자로 작성되며, 필요한 경우 단어를 구분하기 위해 하이픈을 사용합니다. 예: islamic-umalqura 또는 islamic-civil.

Intl.DisplayNames와 달력의 작동 방식

Intl.DisplayNames 생성자는 코드를 읽기 쉬운 텍스트로 번역하는 객체를 생성합니다. 출력 언어를 위한 로케일과 번역하려는 코드 유형을 지정합니다.

달력 이름을 표시하려면 "calendar"를 유형으로 전달합니다:

const displayNames = new Intl.DisplayNames('ko', { type: 'calendar' });

첫 번째 인수는 'ko'와 같은 로케일 코드입니다. 두 번째 인수는 type: 'calendar'를 설정하는 옵션 객체입니다.

DisplayNames 객체를 생성한 후, of() 메서드를 사용하여 달력 코드를 이름으로 변환합니다:

const calendarName = displayNames.of('gregory');
console.log(calendarName); // "그레고리력"

영어로 달력 이름 표시하기

그레고리력, 히브리력, 이슬람력의 이름을 영어로 표시하는 방법은 다음과 같습니다:

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "Gregorian Calendar"
console.log(displayNames.of('hebrew')); // "Hebrew Calendar"
console.log(displayNames.of('islamic')); // "Islamic Calendar"

of() 메서드에 코드를 전달하여 지원되는 모든 달력을 표시할 수 있습니다:

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('buddhist')); // "Buddhist Calendar"
console.log(displayNames.of('chinese')); // "Chinese Calendar"
console.log(displayNames.of('japanese')); // "Japanese Calendar"
console.log(displayNames.of('persian')); // "Persian Calendar"

이슬람력은 다양한 계산 방법에 따라 여러 변형이 있습니다:

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('islamic')); // "Islamic Calendar"
console.log(displayNames.of('islamic-umalqura')); // "Umm al-Qura Calendar"
console.log(displayNames.of('islamic-civil')); // "Islamic Civil Calendar"
console.log(displayNames.of('islamic-tbla')); // "Islamic Tabular Calendar"

사용 가능한 모든 달력 시스템 가져오기

JavaScript는 17개의 달력 시스템을 제공합니다. Intl.supportedValuesOf()를 사용하여 프로그래밍 방식으로 전체 목록을 가져올 수 있습니다:

const calendars = Intl.supportedValuesOf('calendar');
console.log(calendars);

이는 지원되는 모든 달력 코드의 배열을 반환합니다:

[
  'buddhist',
  'chinese',
  'coptic',
  'dangi',
  'ethioaa',
  'ethiopic',
  'gregory',
  'hebrew',
  'indian',
  'islamic',
  'islamic-umalqura',
  'islamic-tbla',
  'islamic-civil',
  'islamic-rgsa',
  'iso8601',
  'japanese',
  'persian',
  'roc'
]

이 배열을 반복하여 모든 달력 이름을 표시할 수 있습니다:

const calendars = Intl.supportedValuesOf('calendar');
const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

calendars.forEach(calendar => {
  console.log(`${calendar}: ${displayNames.of(calendar)}`);
});

이는 다음과 같이 출력됩니다:

buddhist: Buddhist Calendar
chinese: Chinese Calendar
coptic: Coptic Calendar
dangi: Dangi Calendar
ethioaa: Ethiopic Amete Alem Calendar
ethiopic: Ethiopic Calendar
gregory: Gregorian Calendar
hebrew: Hebrew Calendar
indian: Indian National Calendar
islamic: Islamic Calendar
islamic-umalqura: Umm al-Qura Calendar
islamic-tbla: Islamic Tabular Calendar
islamic-civil: Islamic Civil Calendar
islamic-rgsa: Islamic Calendar (Saudi Arabia)
iso8601: ISO-8601 Calendar
japanese: Japanese Calendar
persian: Persian Calendar
roc: Minguo Calendar

다양한 언어로 달력 이름 지역화하기

달력 이름은 locale 매개변수에 지정한 언어로 표시됩니다. 이를 통해 사용자가 선호하는 언어로 달력 이름을 보여줄 수 있습니다.

아랍어로 달력 이름 표시하기:

const displayNames = new Intl.DisplayNames('ar', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "التقويم الميلادي"
console.log(displayNames.of('hebrew')); // "التقويم العبري"
console.log(displayNames.of('islamic')); // "التقويم الهجري"

프랑스어로 달력 이름 표시하기:

const displayNames = new Intl.DisplayNames('fr', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "calendrier grégorien"
console.log(displayNames.of('hebrew')); // "calendrier hébraïque"
console.log(displayNames.of('islamic')); // "calendrier musulman"

히브리어로 달력 이름 표시하기:

const displayNames = new Intl.DisplayNames('he', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "לוח השנה הגרגוריאני"
console.log(displayNames.of('hebrew')); // "לוח השנה העברי"
console.log(displayNames.of('islamic')); // "לוח השנה ההיג'רי"

중국어로 달력 이름 표시하기:

const displayNames = new Intl.DisplayNames('zh', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "公历"
console.log(displayNames.of('hebrew')); // "希伯来历"
console.log(displayNames.of('islamic')); // "伊斯兰历"

브라우저가 모든 번역을 자동으로 처리합니다. 번역 파일이나 수동 문자열 관리가 필요하지 않습니다.

달력 선택기 드롭다운 구축하기

다음은 사용자가 달력 시스템을 선택할 수 있는 드롭다운 메뉴를 만드는 방법입니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calendar Selector</title>
</head>
<body>
  <label for="calendar-select">Choose a calendar:</label>
  <select id="calendar-select"></select>

  <script>
    const userLocale = navigator.language || 'en';
    const displayNames = new Intl.DisplayNames(userLocale, { type: 'calendar' });
    const calendars = Intl.supportedValuesOf('calendar');
    const selectElement = document.getElementById('calendar-select');

    calendars.forEach(calendar => {
      const option = document.createElement('option');
      option.value = calendar;
      option.textContent = displayNames.of(calendar);
      selectElement.appendChild(option);
    });

    selectElement.addEventListener('change', (event) => {
      console.log('Selected calendar:', event.target.value);
    });
  </script>
</body>
</html>

이 코드는 다음과 같은 작업을 수행합니다:

navigator.language로 사용자의 브라우저 로케일을 가져옵니다
사용자의 로케일로 DisplayNames 객체를 생성합니다
사용 가능한 모든 달력 코드를 검색합니다
각 달력에 대한 옵션 요소를 생성합니다
옵션 텍스트를 지역화된 달력 이름으로 설정합니다
달력 선택을 처리하기 위한 이벤트 리스너를 추가합니다

드롭다운은 사용자의 언어로 달력 이름을 자동으로 표시합니다. 아랍어 브라우저를 사용하는 사용자는 아랍어 달력 이름을 보게 됩니다. 프랑스어 브라우저를 사용하는 사용자는 프랑스어 달력 이름을 보게 됩니다.

달력 이름 표시를 사용해야 하는 경우

다음과 같은 상황에서 달력 이름을 표시하세요:

사용자가 선호하는 달력 시스템을 선택하는 설정 페이지
여러 달력 시스템을 지원하는 날짜 선택 컴포넌트
사용자가 어떤 달력을 사용할지 지정하는 이벤트 생성 양식
달력 환경설정이 저장되는 사용자 프로필 페이지
서로 다른 달력 시스템 간에 작동하는 일정 관리 애플리케이션
특정 달력을 참조하는 종교적 또는 문화적 애플리케이션

달력 이름 표시는 비그레고리안 달력 시스템을 사용하는 사용자들에게 애플리케이션을 접근 가능하게 만듭니다. 애플리케이션이 날짜와 이벤트에 어떤 달력 시스템을 사용하는지에 대한 모호함을 제거합니다.

type: 'calendar'를 사용한 Intl.DisplayNames API는 번역 파일이나 달력 시스템 메타데이터를 유지할 필요 없이 어떤 언어로든 지역화된 달력 이름에 즉시 접근할 수 있게 해줍니다.