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

소개

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

국제 사용자를 대상으로 하는 애플리케이션은 사용자가 선호하는 달력 시스템을 선택할 수 있도록 해야 합니다. 날짜 선택기, 설정 인터페이스 및 일정 관리 도구는 사용자가 자신의 필요에 맞는 시스템을 선택할 수 있도록 달력 이름을 표시합니다. "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('en', { type: 'calendar' });

첫 번째 인수는 영어의 경우 'en', 프랑스어의 경우 'fr'와 같은 로케일 코드입니다. 두 번째 인수는 type: 'calendar'를 설정하는 옵션 객체입니다.

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

const calendarName = displayNames.of('gregory');
console.log(calendarName); // "Gregorian Calendar"

영어로 달력 이름 표시

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

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

다양한 언어로 달력 이름 현지화

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

아랍어로 달력 이름 표시:

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 객체를 생성합니다
사용 가능한 모든 달력 코드를 검색합니다
각 달력에 대한 option 요소를 생성합니다
option 텍스트를 현지화된 달력 이름으로 설정합니다
달력 선택을 처리하기 위한 이벤트 리스너를 추가합니다

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

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

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

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

달력 이름 표시는 그레고리력이 아닌 달력 시스템을 사용하는 사용자가 애플리케이션에 접근할 수 있도록 합니다. 애플리케이션이 날짜 및 이벤트에 사용하는 달력 시스템에 대한 모호함을 제거합니다.

Intl.DisplayNames API와 type: 'calendar'를 사용하면 번역 파일이나 달력 시스템 메타데이터를 유지 관리하지 않고도 현지화된 달력 이름에 즉시 액세스할 수 있습니다.