구성 요소에서 로케일 식별자를 빌드하는 방법

JavaScript에서 언어, 문자 체계 및 지역 코드를 결합하여 로케일 식별자 구성

소개

en-US 또는 zh-Hans-CN와 같은 로케일 식별자는 언어, 문자 체계 및 지역에 대한 정보를 인코딩합니다. 때로는 고정된 문자열을 사용하는 대신 이러한 식별자를 프로그래밍 방식으로 구성해야 할 수 있습니다. 예를 들어, 사용자가 언어와 지역을 별도로 선택하도록 한 다음 이를 유효한 로케일 식별자로 결합할 수 있습니다.

JavaScript의 Intl.Locale 생성자를 사용하면 개별 구성 요소에서 로케일 식별자를 빌드할 수 있습니다. 언어, 스크립트 및 지역을 별도의 매개변수로 지정할 수 있으며, 생성자는 이를 적절한 형식의 식별자로 조합합니다.

이 가이드에서는 구성 요소에서 로케일 식별자를 구성하는 방법, 이 접근 방식을 사용하는 시기 및 예외 상황을 처리하는 방법을 설명합니다.

로케일 식별자 구성 요소 이해

로케일 식별자는 하이픈으로 구분된 구성 요소로 이루어져 있습니다. 각 구성 요소는 문화적 선호도의 다른 측면을 나타냅니다.

언어 코드는 사용할 언어를 지정합니다. ISO 639의 소문자 2자 또는 3자를 사용합니다.

  • 영어의 경우 en
  • 스페인어의 경우 es
  • 프랑스어의 경우 fr
  • 중국어의 경우 zh
  • 아랍어의 경우 ar

문자 체계 코드는 문자 체계를 지정합니다. ISO 15924의 첫 글자가 대문자인 4자를 사용합니다.

  • 간체 중국어 문자의 경우 Hans
  • 번체 중국어 문자의 경우 Hant
  • 키릴 문자의 경우 Cyrl
  • 라틴 문자의 경우 Latn

지역 코드는 지리적 영역을 지정합니다. ISO 3166-1의 대문자 2자 또는 UN M.49의 숫자 3자를 사용합니다.

  • 미국의 경우 US
  • 영국의 경우 GB
  • 중국의 경우 CN
  • 멕시코의 경우 MX

이러한 구성 요소는 특정 순서로 결합됩니다: 언어, 스크립트, 지역 순입니다. 예를 들어, zh-Hans-CN는 중국어, 간체 문자, 중국 지역을 의미합니다.

언어와 지역만으로 로케일 구성하기

가장 일반적인 시나리오는 언어 코드와 지역 코드를 결합하는 것입니다. 대부분의 애플리케이션은 각 언어에 기본 스크립트가 있기 때문에 스크립트를 지정할 필요가 없습니다.

첫 번째 인수로 언어 코드를 전달하고 지역이 포함된 옵션 객체를 전달하여 로케일을 구성할 수 있습니다:

const locale = new Intl.Locale("en", {
  region: "US"
});

console.log(locale.toString());
// Output: "en-US"

이것은 미국 영어에 대한 로케일 식별자를 생성합니다.

동일한 언어의 다양한 지역 변형을 구성할 수 있습니다:

const usEnglish = new Intl.Locale("en", { region: "US" });
const britishEnglish = new Intl.Locale("en", { region: "GB" });
const canadianEnglish = new Intl.Locale("en", { region: "CA" });

console.log(usEnglish.toString()); // "en-US"
console.log(britishEnglish.toString()); // "en-GB"
console.log(canadianEnglish.toString()); // "en-CA"

각 변형은 동일한 언어를 사용하지만 서로 다른 지역 형식 규칙을 사용합니다.

언어, 스크립트, 지역으로 로케일 구성하기

일부 언어는 명시적인 스크립트 코드가 필요합니다. 중국어, 세르비아어 및 기타 몇몇 언어는 여러 문자 체계를 사용합니다. 모호함을 피하기 위해 스크립트를 지정해야 합니다.

옵션 객체에 스크립트 구성 요소를 추가할 수 있습니다:

const simplifiedChinese = new Intl.Locale("zh", {
  script: "Hans",
  region: "CN"
});

console.log(simplifiedChinese.toString());
// Output: "zh-Hans-CN"

이것은 중국에서 사용되는 간체 중국어에 대한 로케일을 생성합니다.

번체 중국어는 다른 스크립트와 지역을 사용합니다:

const traditionalChinese = new Intl.Locale("zh", {
  script: "Hant",
  region: "TW"
});

console.log(traditionalChinese.toString());
// Output: "zh-Hant-TW"

스크립트 코드는 두 문자 체계를 구분합니다.

세르비아어는 키릴 문자와 라틴 문자를 모두 사용합니다. 어떤 스크립트를 사용할지 지정해야 합니다:

const serbianCyrillic = new Intl.Locale("sr", {
  script: "Cyrl",
  region: "RS"
});

const serbianLatin = new Intl.Locale("sr", {
  script: "Latn",
  region: "RS"
});

console.log(serbianCyrillic.toString()); // "sr-Cyrl-RS"
console.log(serbianLatin.toString()); // "sr-Latn-RS"

두 로케일 모두 세르비아의 세르비아어를 사용하지만 서로 다른 문자 체계를 사용합니다.

사용자 선택으로 로케일 구성하기

사용자 인터페이스는 종종 사용자가 언어와 지역을 별도로 선택할 수 있도록 합니다. 이러한 선택을 로케일 식별자로 결합할 수 있습니다.

두 개의 드롭다운 메뉴가 있는 설정 양식을 고려해 보세요:

function buildLocaleFromSelections(languageCode, regionCode) {
  const locale = new Intl.Locale(languageCode, {
    region: regionCode
  });

  return locale.toString();
}

const userLocale = buildLocaleFromSelections("es", "MX");
console.log(userLocale);
// Output: "es-MX"

이것은 독립적인 선택으로부터 로케일 식별자를 생성합니다.

생성자에서 오류를 포착하여 선택 항목을 검증할 수 있습니다:

function buildLocaleFromSelections(languageCode, regionCode) {
  try {
    const locale = new Intl.Locale(languageCode, {
      region: regionCode
    });
    return {
      success: true,
      locale: locale.toString()
    };
  } catch (error) {
    return {
      success: false,
      error: error.message
    };
  }
}

const valid = buildLocaleFromSelections("fr", "CA");
console.log(valid);
// Output: { success: true, locale: "fr-CA" }

const invalid = buildLocaleFromSelections("invalid", "XX");
console.log(invalid);
// Output: { success: false, error: "..." }

구성 요소가 유효하지 않으면 생성자는 RangeError를 발생시킵니다.

선택적 구성 요소로 로케일 구축하기

모든 로케일이 모든 구성 요소를 필요로 하는 것은 아닙니다. 필요하지 않은 구성 요소는 생략할 수 있습니다.

언어만 포함하는 로케일은 지역과 문자 체계를 생략합니다:

const locale = new Intl.Locale("fr");
console.log(locale.toString());
// Output: "fr"

이는 특정 지역이나 문자 체계를 지정하지 않은 프랑스어를 나타냅니다.

사용자 입력에 따라 구성 요소를 조건부로 포함할 수 있습니다:

function buildLocale(language, options = {}) {
  const localeOptions = {};

  if (options.region) {
    localeOptions.region = options.region;
  }

  if (options.script) {
    localeOptions.script = options.script;
  }

  const locale = new Intl.Locale(language, localeOptions);
  return locale.toString();
}

console.log(buildLocale("en"));
// Output: "en"

console.log(buildLocale("en", { region: "US" }));
// Output: "en-US"

console.log(buildLocale("zh", { script: "Hans", region: "CN" }));
// Output: "zh-Hans-CN"

이 함수는 사용 가능한 정보를 기반으로 가장 간단한 유효한 로케일 식별자를 구축합니다.

기존 로케일의 구성 요소 재정의하기

기존 로케일 식별자를 가져와서 특정 구성 요소를 재정의할 수 있습니다. 이는 다른 부분은 그대로 유지하면서 한 부분만 변경해야 할 때 유용합니다.

생성자의 두 번째 인수는 첫 번째 인수의 구성 요소를 재정의합니다:

const baseLocale = new Intl.Locale("en-US");
const withDifferentRegion = new Intl.Locale(baseLocale, {
  region: "GB"
});

console.log(withDifferentRegion.toString());
// Output: "en-GB"

새 로케일은 언어는 유지하되 지역을 변경합니다.

여러 구성 요소를 재정의할 수 있습니다:

const original = new Intl.Locale("zh-Hans-CN");
const modified = new Intl.Locale(original, {
  script: "Hant",
  region: "TW"
});

console.log(modified.toString());
// Output: "zh-Hant-TW"

이는 언어는 유지하면서 문자 체계와 지역을 모두 변경합니다.

구축된 로케일에 형식 기본 설정 추가하기

언어, 문자 체계, 지역 외에도 로케일에는 형식 기본 설정이 포함될 수 있습니다. 이러한 기본 설정은 날짜, 숫자 및 기타 값이 표시되는 방식을 제어합니다.

로케일을 구축할 때 달력 기본 설정을 추가할 수 있습니다:

const locale = new Intl.Locale("ar", {
  region: "SA",
  calendar: "islamic"
});

console.log(locale.toString());
// Output: "ar-SA-u-ca-islamic"

console.log(locale.calendar);
// Output: "islamic"

달력 기본 설정은 식별자 문자열에 유니코드 확장으로 나타납니다.

여러 형식 기본 설정을 지정할 수 있습니다:

const locale = new Intl.Locale("en", {
  region: "US",
  calendar: "gregory",
  numberingSystem: "latn",
  hourCycle: "h12"
});

console.log(locale.toString());
// Output: "en-US-u-ca-gregory-hc-h12-nu-latn"

생성자는 확장 키를 알파벳순으로 정렬합니다.

이러한 기본 설정은 포매터가 데이터를 표시하는 방식에 영향을 줍니다:

const locale = new Intl.Locale("ar", {
  region: "EG",
  numberingSystem: "arab"
});

const formatter = new Intl.NumberFormat(locale);
console.log(formatter.format(12345));
// Output: "١٢٬٣٤٥" (Arabic-Indic numerals)

숫자 체계 기본 설정은 표시되는 숫자를 제어합니다.

구성 요소 조합 검증

언어, 문자 체계, 지역의 모든 조합이 의미 있는 것은 아닙니다. 생성자는 구문적으로 유효한 모든 구성 요소를 허용하지만, 일부 조합은 실제 로케일을 나타내지 않을 수 있습니다.

생성자는 구문을 검증하지만 의미론적 정확성은 검증하지 않습니다:

// Syntactically valid but semantically questionable
const locale = new Intl.Locale("en", {
  script: "Arab",
  region: "JP"
});

console.log(locale.toString());
// Output: "en-Arab-JP"

이것은 일본에서 아랍 문자로 표기된 영어 로케일을 생성합니다. 식별자는 BCP 47에 따라 유효하지만, 실제 로케일을 나타내지는 않습니다.

maximize() 메서드를 사용하여 로케일이 일반적인 패턴과 일치하는지 확인할 수 있습니다.

const locale = new Intl.Locale("en", { region: "JP" });
const maximized = locale.maximize();

console.log(maximized.toString());
// Output: "en-Latn-JP"

이 메서드는 언어에 가장 적합한 문자 체계를 추가합니다. 결과가 예상 패턴과 일치하면 조합이 합리적입니다.

생성된 로케일에서 구성 요소 읽기

로케일을 생성한 후 해당 구성 요소를 속성으로 읽을 수 있습니다.

language 속성은 언어 코드를 반환합니다.

const locale = new Intl.Locale("fr", { region: "CA" });
console.log(locale.language);
// Output: "fr"

region 속성은 지역 코드를 반환합니다.

const locale = new Intl.Locale("fr", { region: "CA" });
console.log(locale.region);
// Output: "CA"

script 속성은 지정된 경우 스크립트 코드를 반환합니다.

const locale = new Intl.Locale("zh", {
  script: "Hans",
  region: "CN"
});

console.log(locale.script);
// Output: "Hans"

스크립트가 지정되지 않은 경우 속성은 undefined를 반환합니다.

const locale = new Intl.Locale("en", { region: "US" });
console.log(locale.script);
// Output: undefined

baseName 속성은 확장자를 제외한 완전한 식별자를 반환합니다.

const locale = new Intl.Locale("ar", {
  region: "SA",
  calendar: "islamic",
  numberingSystem: "arab"
});

console.log(locale.baseName);
// Output: "ar-SA"

이를 통해 형식 기본 설정 없이 언어-문자-지역 부분을 얻을 수 있습니다.

로케일 식별자를 문자열로 변환

toString() 메서드는 완전한 로케일 식별자를 문자열로 반환합니다.

const locale = new Intl.Locale("es", { region: "MX" });
const identifier = locale.toString();

console.log(identifier);
// Output: "es-MX"

다른 Intl API와 함께 문자열을 사용할 수 있습니다:

const locale = new Intl.Locale("de", { region: "DE" });
const formatter = new Intl.NumberFormat(locale.toString());

const price = 1234.56;
console.log(formatter.format(price));
// Output: "1.234,56"

포매터는 문자열 표현을 허용합니다.

대부분의 Intl API는 로케일 객체를 직접 허용합니다:

const locale = new Intl.Locale("de", { region: "DE" });
const formatter = new Intl.NumberFormat(locale);

API는 필요할 때 내부적으로 toString()를 호출합니다.

실용적인 사용 사례

구성 요소에서 로케일 식별자를 구축하면 국제화된 애플리케이션의 여러 일반적인 문제를 해결할 수 있습니다.

로케일 선택기 생성

사용자 인터페이스는 종종 사용자가 언어와 지역을 별도로 선택할 수 있도록 합니다. 선택 항목을 결합할 수 있습니다:

function createLocaleFromPicker(languageSelect, regionSelect) {
  const language = languageSelect.value;
  const region = regionSelect.value;

  const locale = new Intl.Locale(language, { region });
  return locale.toString();
}

// User selects "Spanish" and "Mexico"
const selectedLocale = createLocaleFromPicker(
  { value: "es" },
  { value: "MX" }
);

console.log(selectedLocale);
// Output: "es-MX"

로케일 변형 생성

단일 언어 코드에서 여러 지역 변형을 생성할 수 있습니다:

function generateRegionalVariants(languageCode, regionCodes) {
  return regionCodes.map(regionCode => {
    const locale = new Intl.Locale(languageCode, {
      region: regionCode
    });
    return locale.toString();
  });
}

const englishVariants = generateRegionalVariants("en", [
  "US",
  "GB",
  "CA",
  "AU",
  "NZ"
]);

console.log(englishVariants);
// Output: ["en-US", "en-GB", "en-CA", "en-AU", "en-NZ"]

이는 다양한 영어권 지역에 대한 로케일 식별자 목록을 생성합니다.

URL 매개변수에서 로케일 구축

URL은 종종 로케일 기본 설정을 별도의 매개변수로 인코딩합니다. 이러한 매개변수에서 로케일을 구성할 수 있습니다:

function getLocaleFromURL(url) {
  const params = new URL(url).searchParams;
  const language = params.get("lang");
  const region = params.get("region");

  if (!language) {
    return null;
  }

  const options = {};
  if (region) {
    options.region = region;
  }

  try {
    const locale = new Intl.Locale(language, options);
    return locale.toString();
  } catch (error) {
    return null;
  }
}

const locale1 = getLocaleFromURL("https://example.com?lang=fr&region=CA");
console.log(locale1);
// Output: "fr-CA"

const locale2 = getLocaleFromURL("https://example.com?lang=ja");
console.log(locale2);
// Output: "ja"

로케일 식별자 정규화

로케일 식별자를 파싱하고 재구성하여 정규화할 수 있습니다:

function normalizeLocale(identifier) {
  try {
    const locale = new Intl.Locale(identifier);
    return locale.toString();
  } catch (error) {
    return null;
  }
}

console.log(normalizeLocale("EN-us"));
// Output: "en-US"

console.log(normalizeLocale("zh_Hans_CN"));
// Output: null (invalid separator)

생성자는 대소문자를 정규화하고 구조를 검증합니다.

사용자 기본 설정으로 포매터 구성하기

사용자 설정을 기반으로 형식 기본 설정이 포함된 로케일 식별자를 빌드할 수 있습니다:

function buildFormatterLocale(language, region, preferences) {
  const locale = new Intl.Locale(language, {
    region,
    hourCycle: preferences.use24Hour ? "h23" : "h12",
    numberingSystem: preferences.numberingSystem
  });

  return locale;
}

const userPreferences = {
  use24Hour: true,
  numberingSystem: "latn"
};

const locale = buildFormatterLocale("fr", "FR", userPreferences);

const timeFormatter = new Intl.DateTimeFormat(locale, {
  hour: "numeric",
  minute: "numeric"
});

const now = new Date("2025-10-15T14:30:00");
console.log(timeFormatter.format(now));
// Output: "14:30" (24-hour format)

로케일에는 사용자 설정의 형식 기본 설정이 포함됩니다.

구성 요소에서 로케일을 빌드해야 하는 경우

구성 요소에서 로케일을 빌드하는 것은 특정 시나리오에서 유용합니다. 언어와 지역 데이터가 분리되어 있거나, 사용자 입력을 처리하거나, 프로그래밍 방식으로 로케일 변형을 생성할 때 이 접근 방식을 사용하세요.

고정된 로케일에는 리터럴 문자열을 사용하세요:

// Good for fixed locales
const locale = new Intl.Locale("en-US");

값이 변수에서 올 때는 구성 요소에서 빌드하세요:

// Good for dynamic locales
const locale = new Intl.Locale(userLanguage, {
  region: userRegion
});

생성자는 구성 요소를 검증하고 올바르게 형식화된 식별자를 생성합니다.

브라우저 지원

Intl.Locale 생성자는 모든 최신 브라우저에서 작동합니다. Chrome, Firefox, Safari 및 Edge는 구성 요소에서 로케일을 빌드하기 위한 생성자와 옵션 객체를 지원합니다.

Node.js는 버전 12부터 Intl.Locale를 지원하며, 버전 14 이상에서 모든 생성자 옵션을 완전히 지원합니다.

요약

Intl.Locale 생성자는 개별 구성 요소에서 로케일 식별자를 빌드합니다. 첫 번째 인수로 언어 코드를 전달하고 옵션 객체에 문자 체계, 지역 및 형식 기본 설정을 제공합니다.

주요 개념:

  • 로케일 식별자는 언어, 문자 체계 및 지역 구성 요소로 구성됩니다
  • 생성자는 language, script, region 속성이 포함된 옵션 객체를 허용합니다
  • 기존 로케일을 첫 번째 인수로 전달하여 구성 요소를 재정의할 수 있습니다
  • calendar 및 hourCycle와 같은 형식 기본 설정은 유니코드 확장으로 표시됩니다
  • toString() 메서드는 전체 식별자 문자열을 반환합니다
  • language, region, script와 같은 속성을 사용하여 구성 요소를 읽을 수 있습니다
  • 생성자는 구문을 검증하지만 의미적 정확성은 검증하지 않습니다

사용자 입력으로 로케일을 구성하거나, 지역 변형을 생성하거나, 별도의 언어 및 지역 선택을 결합할 때 이 방식을 사용하세요. 고정된 로케일의 경우 문자열 리터럴을 대신 사용하세요.