로케일이 사용하는 달력 또는 번호 체계를 확인하는 방법

JavaScript를 사용하여 모든 로케일의 달력 시스템 및 번호 형식을 감지하고 검증하기

소개

태국에 있는 사용자가 웹 앱에서 날짜를 볼 때, 그들은 서양 국가에서 사용하는 그레고리력이 아닌 불기(불교 달력)로 표시된 날짜를 보기를 기대합니다. 마찬가지로, 아랍어 사용자들은 123 대신 ١٢٣과 같이 렌더링된 숫자를 보기를 기대합니다. 다양한 문화권에서는 서로 다른 달력 시스템과 숫자 시스템을 사용하며, JavaScript는 특정 로케일에 적용되는 시스템을 감지하는 도구를 제공합니다.

Intl.Locale API는 로케일이 사용하는 달력 및 숫자 시스템을 보여주는 속성과 메서드를 포함합니다. 이 정보는 다양한 문화권이 선호하는 시스템에 대한 가정을 하드코딩하지 않고도 날짜와 숫자를 올바르게 포맷팅하는 데 도움이 됩니다.

이 가이드에서는 로케일의 달력 및 숫자 시스템을 확인하는 방법, 다양한 시스템의 의미를 이해하는 방법, 그리고 이 정보를 사용하여 콘텐츠를 적절하게 포맷팅하는 방법을 설명합니다.

달력 시스템 이해하기

달력 시스템은 시간을 연도, 월, 일로 조직화하는 방법입니다. 그레고리력이 널리 사용되고 있지만, 많은 문화권에서는 종교적, 역사적, 또는 문화적 목적으로 다른 달력 시스템을 사용합니다.

가장 일반적인 달력 시스템은 다음과 같습니다:

  • gregory: 대부분의 서양 국가에서 사용되는 그레고리력
  • buddhist: 태국, 캄보디아, 미얀마에서 사용되는 불교 달력
  • islamic: 무슬림 국가에서 종교적 목적으로 사용되는 이슬람 태음력
  • hebrew: 이스라엘과 유대교 종교 의식에서 사용되는 히브리 달력
  • japanese: 일본 황실 연호를 사용하는 일본 달력
  • chinese: 전통 명절에 사용되는 중국 태음태양력
  • persian: 이란과 아프가니스탄에서 사용되는 페르시아 태양력
  • indian: 인도 국가 달력
  • coptic: 이집트의 콥트 기독교인들이 사용하는 콥트 달력

다양한 지역에서는 서로 다른 달력을 기본값으로 사용하며, 일부 지역에서는 여러 달력 시스템을 일반적으로 사용합니다.

숫자 체계 이해하기

숫자 체계는 숫자를 표현하는 데 사용되는 기호의 집합입니다. 서양 국가들은 라틴 숫자(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)를 사용하지만, 다른 문화권에서는 동일한 숫자 값을 표현하기 위해 다른 기호를 사용합니다.

일반적인 숫자 체계는 다음과 같습니다:

  • latn 라틴 숫자: 0 1 2 3 4 5 6 7 8 9
  • arab 아랍-인도 숫자: ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩
  • arabext 동부 아랍-인도 숫자: ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹
  • deva 데바나가리 숫자: ० १ २ ३ ४ ५ ६ ७ ८ ९
  • beng 벵골 숫자: ০ ১ ২ ৩ ৪ ৫ ৬ ৭ ৮ ৯
  • thai 태국 숫자: ๐ ๑ ๒ ๓ ๔ ๕ ๖ ๗ ๘ ๙
  • hanidec 중국 십진법 숫자
  • fullwide 동아시아 타이포그래피에서 사용되는 전각 숫자

모든 숫자 체계는 동일한 숫자 값을 나타내지만, 해당 언어의 문자 체계에 따라 다른 시각적 기호를 사용합니다.

로케일의 기본 달력 확인하기

getCalendars() 메서드는 로케일에서 일반적으로 사용되는 달력 시스템의 배열을 선호도에 따라 정렬하여 반환합니다. 첫 번째 요소가 기본 달력입니다.

const locale = new Intl.Locale("th-TH");
const calendars = locale.getCalendars();
console.log(calendars);
// ["buddhist", "gregory"]

태국 로케일은 기본적으로 불교 달력을 사용하지만 그레고리안 달력도 일반적으로 사용합니다. 이는 태국 사용자를 위해 날짜를 포맷팅할 때 불교 달력이 선호된다는 것을 알려줍니다.

다른 로케일은 다른 달력 선호도를 반환합니다:

const usLocale = new Intl.Locale("en-US");
console.log(usLocale.getCalendars());
// ["gregory"]

const saLocale = new Intl.Locale("ar-SA");
console.log(saLocale.getCalendars());
// ["gregory", "islamic", "islamic-civil"]

const jpLocale = new Intl.Locale("ja-JP");
console.log(jpLocale.getCalendars());
// ["gregory", "japanese"]

미국 영어는 그레고리안 달력만 사용합니다. 사우디아라비아 아랍어는 일반적으로 그레고리안 달력과 이슬람 달력을 모두 사용합니다. 일본 로케일은 그레고리안 달력과 일본 황실 달력을 모두 사용합니다.

배열에는 해당 로케일에서 일반적으로 사용되는 모든 달력이 포함되어 있어, 필요한 경우 여러 달력 옵션을 제공할 수 있습니다.

로케일의 기본 숫자 체계 확인하기

getNumberingSystems() 메서드는 로케일에서 일반적으로 사용되는 숫자 체계의 배열을 반환합니다. 첫 번째 요소가 기본 숫자 체계입니다.

const locale = new Intl.Locale("ar-EG");
const numberingSystems = locale.getNumberingSystems();
console.log(numberingSystems);
// ["arab"]

이집트 아랍어는 기본적으로 아랍-인도 숫자를 사용합니다. 이집트 아랍어 사용자를 위해 숫자를 포맷팅할 때는 사용자가 다르게 지정하지 않는 한 아랍-인도 숫자 체계를 사용하세요.

다양한 로케일은 서로 다른 기본 숫자 체계를 사용합니다:

const usLocale = new Intl.Locale("en-US");
console.log(usLocale.getNumberingSystems());
// ["latn"]

const inLocale = new Intl.Locale("hi-IN");
console.log(inLocale.getNumberingSystems());
// ["latn"]

const thLocale = new Intl.Locale("th-TH");
console.log(thLocale.getNumberingSystems());
// ["latn"]

미국 영어는 라틴 숫자를 사용합니다. 인도의 힌디어도 데바나가리 숫자가 존재하지만 현대적인 맥락에서는 기본적으로 라틴 숫자를 사용합니다. 태국어도 대부분의 현대적인 맥락에서 기본적으로 라틴 숫자를 사용합니다.

많은 현대 로케일은 전통적인 숫자 체계가 존재하더라도 현재의 사용 패턴을 반영하여 기본적으로 라틴 숫자를 사용합니다.

로케일에서 활성화된 달력 읽기

'calendar' 속성은 로케일에 명시적으로 설정된 달력 시스템을 반환합니다. 달력이 지정되지 않은 경우 'undefined'를 반환합니다.

const locale = new Intl.Locale("en-US");
console.log(locale.calendar);
// undefined

달력 확장이 없는 기본 로케일은 'undefined'를 반환합니다. 로케일은 날짜를 포맷팅할 때 기본 달력을 사용합니다.

유니코드 확장을 사용하여 명시적인 달력 환경설정이 있는 로케일을 생성할 수 있습니다:

const locale = new Intl.Locale("en-US-u-ca-buddhist");
console.log(locale.calendar);
// "buddhist"

'-u-ca-buddhist' 확장은 불교 달력을 지정합니다. 'calendar' 속성은 '"buddhist"'를 반환합니다.

로케일을 생성할 때 달력을 설정할 수도 있습니다:

const locale = new Intl.Locale("en-US", { calendar: "islamic" });
console.log(locale.calendar);
// "islamic"

옵션 객체는 로케일 문자열에 지정된 달력보다 우선순위가 높습니다.

로케일에서 활성 번호 체계 읽기

'numberingSystem' 속성은 로케일에 명시적으로 설정된 번호 체계를 반환합니다. 번호 체계가 지정되지 않은 경우 'undefined'를 반환합니다.

const locale = new Intl.Locale("en-US");
console.log(locale.numberingSystem);
// undefined

번호 체계 확장이 없는 기본 로케일은 'undefined'를 반환합니다. 로케일은 숫자 형식을 지정할 때 기본 번호 체계를 사용합니다.

명시적인 번호 체계 환경설정으로 로케일을 생성할 수 있습니다:

const locale = new Intl.Locale("en-US-u-nu-arab");
console.log(locale.numberingSystem);
// "arab"

'-u-nu-arab' 확장은 아랍-인도 숫자를 지정합니다. 'numberingSystem' 속성은 '"arab"'를 반환합니다.

로케일을 생성할 때 번호 체계를 설정할 수도 있습니다:

const locale = new Intl.Locale("ar-SA", { numberingSystem: "latn" });
console.log(locale.numberingSystem);
// "latn"

이는 기본 아랍-인도 숫자 대신 라틴 숫자를 사용하는 아랍어 로케일을 생성합니다.

로케일에 명시적 캘린더가 있는지 감지하기

로케일이 기본값을 사용하는 대신 명시적으로 설정된 캘린더를 가지고 있는지 확인하려면 'calendar' 속성이 정의되어 있는지 확인하세요:

function hasExplicitCalendar(localeString) {
  const locale = new Intl.Locale(localeString);
  return locale.calendar !== undefined;
}

console.log(hasExplicitCalendar("en-US"));
// false

console.log(hasExplicitCalendar("en-US-u-ca-buddhist"));
// true

이 구분은 사용자가 명시적으로 캘린더 환경설정을 선택했는지 또는 로케일의 기본값을 사용해야 하는지 결정해야 할 때 중요합니다.

로케일에 명시적 번호 체계가 있는지 감지하기

마찬가지로, 명시적 번호 체계 환경설정을 감지하려면 'numberingSystem' 속성이 정의되어 있는지 확인하세요:

function hasExplicitNumberingSystem(localeString) {
  const locale = new Intl.Locale(localeString);
  return locale.numberingSystem !== undefined;
}

console.log(hasExplicitNumberingSystem("ar-EG"));
// false

console.log(hasExplicitNumberingSystem("ar-EG-u-nu-latn"));
// true

첫 번째 로케일은 이집트 아랍어의 기본 번호 체계를 사용합니다. 두 번째 로케일은 명시적으로 라틴 숫자를 요청합니다.

날짜 형식을 지정하기 위해 달력 정보 사용하기

로케일이 어떤 달력을 사용하는지 알게 되면, Intl.DateTimeFormat으로 날짜 형식을 지정할 때 이를 적용하세요:

const date = new Date("2025-03-15");

const gregorianLocale = new Intl.Locale("en-US");
const gregorianFormatter = new Intl.DateTimeFormat(gregorianLocale, {
  year: "numeric",
  month: "long",
  day: "numeric"
});
console.log(gregorianFormatter.format(date));
// "March 15, 2025"

const buddhistLocale = new Intl.Locale("th-TH");
const buddhistFormatter = new Intl.DateTimeFormat(buddhistLocale, {
  year: "numeric",
  month: "long",
  day: "numeric"
});
console.log(buddhistFormatter.format(date));
// "15 มีนาคม 2568"

태국 불교 달력은 동일한 날짜를 2568년으로 표시하는데, 이는 그레고리안 달력보다 543년 앞서 있습니다.

달력을 명시적으로 재정의할 수도 있습니다:

const date = new Date("2025-03-15");

const locale = new Intl.Locale("en-US", { calendar: "hebrew" });
const formatter = new Intl.DateTimeFormat(locale, {
  year: "numeric",
  month: "long",
  day: "numeric"
});
console.log(formatter.format(date));
// "15 Adar II 5785"

이는 히브리 달력으로 날짜 형식을 지정하여 해당하는 히브리 연도와 월을 표시합니다.

숫자 형식을 지정하기 위해 숫자 체계 정보 사용하기

Intl.NumberFormat으로 숫자 형식을 지정할 때 숫자 체계 정보를 적용하세요:

const number = 123456;

const latinLocale = new Intl.Locale("ar-EG", { numberingSystem: "latn" });
const latinFormatter = new Intl.NumberFormat(latinLocale);
console.log(latinFormatter.format(number));
// "123,456"

const arabicLocale = new Intl.Locale("ar-EG", { numberingSystem: "arab" });
const arabicFormatter = new Intl.NumberFormat(arabicLocale);
console.log(arabicFormatter.format(number));
// "١٢٣٬٤٥٦"

동일한 숫자가 숫자 체계에 따라 다른 숫자 기호로 렌더링됩니다.

달력 선택기 구축하기

사용자가 선호하는 달력을 선택할 수 있는 사용자 인터페이스를 구축하기 위해 달력 정보를 사용하세요:

function getCalendarOptions(localeString) {
  const locale = new Intl.Locale(localeString);
  const calendars = locale.getCalendars();

  return calendars.map(calendar => ({
    value: calendar,
    label: calendar.charAt(0).toUpperCase() + calendar.slice(1)
  }));
}

const options = getCalendarOptions("ar-SA");
console.log(options);
// [
//   { value: "gregory", label: "Gregory" },
//   { value: "islamic", label: "Islamic" },
//   { value: "islamic-civil", label: "Islamic-civil" }
// ]

이는 여러 달력을 일반적으로 사용하는 사우디아라비아 아랍어 사용자에게 적합한 달력 옵션 목록을 생성합니다.

숫자 체계 선택기 구축하기

숫자 체계 환경설정을 위한 사용자 인터페이스 생성:

function getNumberingSystemOptions(localeString) {
  const locale = new Intl.Locale(localeString);
  const systems = locale.getNumberingSystems();

  const labels = {
    latn: "서양식 (0-9)",
    arab: "아랍-인도식 (٠-٩)",
    arabext: "동아랍식 (۰-۹)",
    deva: "데바나가리 (०-९)",
    beng: "벵골식 (০-৯)"
  };

  return systems.map(system => ({
    value: system,
    label: labels[system] || system
  }));
}

const options = getNumberingSystemOptions("ar-EG");
console.log(options);
// [{ value: "arab", label: "아랍-인도식 (٠-٩)" }]

이는 숫자 체계 옵션에 대한 명확한 레이블을 제공하여 사용자에게 각 선택이 어떻게 보이는지 보여줍니다.

달력 호환성 검증

로케일에 달력을 적용하기 전에 해당 로케일이 그 달력을 지원하는지 확인하세요:

function supportsCalendar(localeString, calendar) {
  const locale = new Intl.Locale(localeString);
  const supportedCalendars = locale.getCalendars();
  return supportedCalendars.includes(calendar);
}

console.log(supportsCalendar("th-TH", "buddhist"));
// true

console.log(supportsCalendar("en-US", "buddhist"));
// false

태국 로케일은 불교 달력을 지원하지만, 미국 영어 로케일은 일반적으로 이를 사용하지 않습니다.

숫자 체계 호환성 검증

로케일이 특정 숫자 체계를 지원하는지 확인하세요:

function supportsNumberingSystem(localeString, numberingSystem) {
  const locale = new Intl.Locale(localeString);
  const supportedSystems = locale.getNumberingSystems();
  return supportedSystems.includes(numberingSystem);
}

console.log(supportsNumberingSystem("ar-EG", "arab"));
// true

console.log(supportsNumberingSystem("en-US", "arab"));
// false

이집트 아랍어는 아랍-인도식 숫자를 지원하지만, 미국 영어는 이를 사용하지 않습니다.

형식 지정을 위한 유효 달력 결정

날짜 형식을 지정할 때 실제로 사용될 달력을 결정하세요:

function getEffectiveCalendar(localeString) {
  const locale = new Intl.Locale(localeString);

  if (locale.calendar) {
    return locale.calendar;
  }

  const defaultCalendars = locale.getCalendars();
  return defaultCalendars[0];
}

console.log(getEffectiveCalendar("th-TH"));
// "buddhist"

console.log(getEffectiveCalendar("en-US-u-ca-islamic"));
// "islamic"

이 함수는 명시적으로 설정된 달력이 있으면 해당 달력을 반환하고, 그렇지 않으면 로케일의 기본 달력을 반환합니다.

서식 지정에 사용할 유효 숫자 체계 결정하기

숫자 서식을 지정할 때 사용할 숫자 체계를 결정합니다:

function getEffectiveNumberingSystem(localeString) {
  const locale = new Intl.Locale(localeString);

  if (locale.numberingSystem) {
    return locale.numberingSystem;
  }

  const defaultSystems = locale.getNumberingSystems();
  return defaultSystems[0];
}

console.log(getEffectiveNumberingSystem("ar-EG"));
// "arab"

console.log(getEffectiveNumberingSystem("ar-EG-u-nu-latn"));
// "latn"

이 함수는 명시적으로 설정된 숫자 체계가 있으면 해당 체계를 반환하고, 그렇지 않으면 로케일의 기본값을 반환합니다.

사용자 달력 환경설정 저장하기

사용자가 달력 환경설정을 선택하면 확장자가 있는 로케일 문자열로 저장합니다:

function setUserCalendarPreference(baseLocale, calendar) {
  const locale = new Intl.Locale(baseLocale, { calendar });
  return locale.toString();
}

const preference = setUserCalendarPreference("en-US", "buddhist");
console.log(preference);
// "en-US-u-ca-buddhist"

이 함수는 달력 환경설정을 보존하는 완전한 로케일 문자열을 생성합니다. 이 문자열을 사용자 설정이나 쿠키에 저장하세요.

사용자 숫자 체계 환경설정 저장하기

숫자 체계 환경설정도 같은 방식으로 저장합니다:

function setUserNumberingPreference(baseLocale, numberingSystem) {
  const locale = new Intl.Locale(baseLocale, { numberingSystem });
  return locale.toString();
}

const preference = setUserNumberingPreference("ar-SA", "latn");
console.log(preference);
// "ar-SA-u-nu-latn"

로케일 문자열에는 숫자 체계 환경설정이 포함되어 있으며 서식 지정 API에서 직접 사용할 수 있습니다.

여러 환경설정 동시에 처리하기

사용자는 달력과 숫자 체계 환경설정을 모두 가질 수 있습니다:

function createLocaleWithPreferences(baseLocale, options) {
  const locale = new Intl.Locale(baseLocale, {
    calendar: options.calendar,
    numberingSystem: options.numberingSystem
  });
  return locale.toString();
}

const preference = createLocaleWithPreferences("ar-SA", {
  calendar: "islamic",
  numberingSystem: "latn"
});
console.log(preference);
// "ar-SA-u-ca-islamic-nu-latn"

이 함수는 여러 서식 환경설정을 단일 로케일 문자열로 결합합니다.

해결된 서식 옵션 확인하기

포맷터를 생성한 후 어떤 달력과 숫자 체계를 사용하는지 확인합니다:

const locale = new Intl.Locale("th-TH");
const formatter = new Intl.DateTimeFormat(locale, {
  year: "numeric",
  month: "long",
  day: "numeric"
});

const options = formatter.resolvedOptions();
console.log(options.calendar);
// "buddhist"
console.log(options.numberingSystem);
// "latn"

resolvedOptions() 메서드는 기본값과 사용자 환경설정을 해결한 후 포맷터가 실제로 사용하는 달력과 숫자 체계를 보여줍니다.

브라우저 지원

Intl.Locale API는 모든 최신 브라우저에서 지원됩니다. getCalendars() 및 getNumberingSystems() 메서드는 최신 브라우저 버전이 필요합니다. Chrome 99, Firefox 99, Safari 15.4 및 Edge 99에서 이러한 메서드를 지원합니다. Node.js는 버전 18부터 이를 지원합니다.

calendar 및 numberingSystem 속성은 더 넓은 지원 범위를 가지고 있으며, Chrome 74, Firefox 75, Safari 14 및 Node.js 12에서 Intl.Locale이 도입된 이후부터 사용 가능합니다.

메서드를 사용하기 전에 지원 여부를 확인하세요:

const locale = new Intl.Locale("th-TH");

if (typeof locale.getCalendars === "function") {
  const calendars = locale.getCalendars();
  console.log(calendars);
}

이렇게 하면 Intl.Locale은 지원하지만 최신 메서드는 지원하지 않는 환경에서도 코드가 작동합니다.

요약

JavaScript는 Intl.Locale API를 통해 로케일이 사용하는 달력 및 숫자 체계를 감지하는 도구를 제공합니다. 이러한 도구는 가정을 하드코딩하지 않고도 다양한 문화권에 맞게 날짜와 숫자를 올바르게 형식화하는 데 도움이 됩니다.

주요 개념:

  • getCalendars()를 사용하여 로케일에서 일반적으로 사용되는 달력 배열 가져오기
  • getNumberingSystems()를 사용하여 로케일에서 일반적으로 사용되는 숫자 체계 배열 가져오기
  • calendar 속성은 명시적으로 설정된 달력을 반환하거나 undefined를 반환
  • numberingSystem 속성은 명시적으로 설정된 숫자 체계를 반환하거나 undefined를 반환
  • 다양한 로케일은 서로 다른 달력과 숫자 체계를 기본값으로 사용
  • 포맷터를 생성할 때 달력 및 숫자 체계 정보 적용
  • 사용자 환경설정을 유니코드 확장자가 있는 로케일 문자열로 저장
  • 특정 달력 및 숫자 체계를 적용하기 전에 로케일이 이를 지원하는지 검증

이러한 메서드는 로케일 선택기 구축, 사용자 환경설정 저장, 형식 옵션 검증 또는 날짜와 숫자에 대한 문화적 관례를 존중하는 국제화된 애플리케이션을 만들 때 사용하세요.