브라우저 네이티브 국제화에 대한 결정적인 안내서-스매싱 잡지

국제화 (I18N)가 단순히 텍스트 번역에 관한 것이라는 일반적인 오해입니다. 중요하지만 번역은 단지 하나의 패싯입니다. 복잡성 중 하나가 있습니다 다양한 문화적 기대에 대한 정보를 조정합니다: 일본과 독일에서 날짜를 어떻게 표시합니까? 아랍어와 영어로 항목을 복수화하는 올바른 방법은 무엇입니까? 다양한 언어로 이름 목록을 어떻게 정렬합니까?

많은 개발자들은 이러한 과제를 해결하기 위해 Weighty Third-Party 라이브러리 또는 더 나쁜 맞춤형 형식 형식 기능에 의존했습니다. 이러한 솔루션은 기능적이지만 종종 번들 크기 증가, 잠재적 성능 병목 현상 및 진화하는 언어 규칙 및 로케일 데이터를 따라 잡기위한 지속적인 투쟁입니다.

입력하십시오 ECMAScript 국제화 API더 일반적으로 알려진 Intl 물체. 현대의 JavaScript 환경에 직접 지어진이 조용한 강국은 종종 중단되어 있지만 믿을 수 없을 정도로 강력하고, 기본, 수행자 및 표준 준수 솔루션 데이터 국제화 처리. 그것은 웹의 존재에 대한 헌신에 대한 증거입니다 세계적인특정 지역에 따르면 숫자, 날짜, 목록 등을 형식화하는 통일되고 효율적인 방법을 제공합니다.

`Intl` 및 로케일 : 언어 코드 이상의 것

의 핵심 Intl a의 개념이 있습니다 장소. 로케일은 단지 2 글자 언어 코드 이상입니다 ( en 영어 또는 es 스페인어). 그것은 특정 문화 그룹에 대한 정보를 적절하게 제시하는 데 필요한 완전한 맥락을 캡슐화합니다. 여기에는 다음이 포함됩니다.

언어: 1 차 언어 적 매체 (예 : en,,, es,,, fr).
스크립트: 스크립트 (예 : Latn 라틴어의 경우 Cyrl 키릴의 경우). 예를 들어, zh-Hans 단순화 된 중국인의 경우 Vs. zh-Hant 전통적인 중국어.
지역: 지리적 지역 (예 : US 미국의 경우 GB 영국을 위해 DE 독일). 이것은 같은 언어 내의 변형에 중요합니다. en-US vs. en-GB날짜, 시간 및 숫자 형식이 다릅니다.
선호도/변형: 더 구체적인 문화적 또는 언어 적 선호. 자세한 내용은 W3C에서 “언어 태그 선택”을 참조하십시오.

일반적으로 웹 페이지의 언어에 따라 로케일을 선택하려고합니다. 이것은에서 결정될 수 있습니다 lang 기인하다:

// Get the page's language from the HTML lang attribute
const pageLocale = document.documentElement.lang || 'en-US'; // Fallback to 'en-US'

때로는 여러 언어로 컨텐츠를 표시 할 때와 같은 특정 로케일로 페이지 로케일을 재정의 할 수 있습니다.

// Force a specific locale regardless of page language
const tutorialFormatter = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' });

console.log(`Chinese example: ${tutorialFormatter.format(199.99)}`); // Output: ¥199.99

경우에 따라 사용자가 선호하는 언어를 사용하고 싶을 수도 있습니다.

// Use the user's preferred language
const browserLocale = navigator.language || 'ja-JP';

const formatter = new Intl.NumberFormat(browserLocale, { style: 'currency', currency: 'JPY' });

인스턴스화 할 때 Intl Formatter, 선택적으로 하나 이상의 로케일 스트링을 통과 할 수 있습니다. 그런 다음 API는 가용성과 선호도에 따라 가장 적합한 로케일을 선택합니다.

핵심 서식 발전소

그만큼 Intl 개체는 각각 특정 형식의 형식 작업에 대해 여러 생성자를 노출시킵니다. 강력하고 자주 볼 수있는 보석과 함께 가장 자주 사용되는 것들을 탐구합시다.

1. `Intl.DateTimeFormat`: 전 세계적으로 날짜와 시간

서식 날짜와 시간은 고전적인 i18N 문제입니다. mm/dd/yyyy 또는 dd.mm.yyy이야합니까? 달이 숫자 또는 전체 단어 여야합니까? Intl.DateTimeFormat 이 모든 것을 쉽게 처리합니다.

const date = new Date(2025, 5, 27, 14, 30, 0); // June 27, 2025, 2:30 PM

// Specific locale and options (e.g., long date, short time)
const options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZoneName: 'shortOffset' // e.g., "GMT+8"
};

console.log(new Intl.DateTimeFormat('en-US', options).format(date));

// "Friday, June 27, 2025 at 2:30 PM GMT+8"
console.log(new Intl.DateTimeFormat('de-DE', options).format(date));

// "Freitag, 27. Juni 2025 um 14:30 GMT+8"

// Using dateStyle and timeStyle for common patterns
console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'short' }).format(date));

// "Friday 27 June 2025 at 14:30"

console.log(new Intl.DateTimeFormat('ja-JP', { dateStyle: 'long', timeStyle: 'short' }).format(date));

// "2025年6月27日 14:30"

유연성 options ~을 위한 DateTimeFormat 광대하며, 연도, 월, 주, 주중, 시간, 시간, 분, 두 번째, 시간대 등을 제어 할 수 있습니다.

2. `Intl.NumberFormat`: 문화적 뉘앙스가있는 숫자

단순한 소수점 이외의 장소 외에도 숫자는 신중한 취급이 필요합니다. 수천 개의 분리기, 소수점 마커, 통화 기호 및 백분율 표지판이 지역마다 크게 다릅니다.

const price = 123456.789;

// Currency formatting
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price));

// "$123,456.79" (auto-rounds)

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price));

// "123.456,79 €"

// Units
console.log(new Intl.NumberFormat('en-US', { style: 'unit', unit: 'meter', unitDisplay: 'long' }).format(100));

// "100 meters"

console.log(new Intl.NumberFormat('fr-FR', { style: 'unit', unit: 'kilogram', unitDisplay: 'short' }).format(5.5));

// "5,5 kg"

옵션과 같은 옵션 minimumFractionDigits,,, maximumFractionDigits그리고 notation (예 : scientific,,, compact) 더 미세한 제어를 제공합니다.

3. `Intl.ListFormat`: 자연어 목록

아이템 목록을 제시하는 것은 놀랍게도 까다 롭습니다. 영어는 “and”를 결합하고 분리에는 “또는”을 사용합니다. 많은 언어마다 다르고 일부 언어는 특정 구두점이 필요합니다.

이 API는 복잡한 조건부 논리가 필요한 작업을 단순화합니다.

const items = ['apples', 'oranges', 'bananas'];

// Conjunction ("and") list
console.log(new Intl.ListFormat('en-US', { type: 'conjunction' }).format(items));

// "apples, oranges, and bananas"

console.log(new Intl.ListFormat('de-DE', { type: 'conjunction' }).format(items));

// "Äpfel, Orangen und Bananen"

// Disjunction ("or") list
console.log(new Intl.ListFormat('en-US', { type: 'disjunction' }).format(items));

// "apples, oranges, or bananas"

console.log(new Intl.ListFormat('fr-FR', { type: 'disjunction' }).format(items));

// "apples, oranges ou bananas"

4. `Intl.RelativeTimeFormat`: 인간 친화적 인 타임 스탬프

UI에서는 “2 일 전”또는 “3 개월 내에”표시되는 것이 일반적이지만 이러한 문구를 정확하게 현지화하려면 광범위한 데이터가 필요합니다. Intl.RelativeTimeFormat 이것을 자동화합니다.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

console.log(rtf.format(-1, 'day'));    // "yesterday"
console.log(rtf.format(1, 'day'));     // "tomorrow"
console.log(rtf.format(-7, 'day'));    // "7 days ago"
console.log(rtf.format(3, 'month'));   // "in 3 months"
console.log(rtf.format(-2, 'year'));   // "2 years ago"

// French example:
const frRtf = new Intl.RelativeTimeFormat('fr-FR', { numeric: 'auto', style: 'long' });

console.log(frRtf.format(-1, 'day'));    // "hier"
console.log(frRtf.format(1, 'day'));     // "demain"
console.log(frRtf.format(-7, 'day'));    // "il y a 7 jours"
console.log(frRtf.format(3, 'month'));   // "dans 3 mois"

그만큼 numeric: 'always' 옵션은“어제”대신“1 일 전”을 강요합니다.

5. `Intl.PluralRules`: 복수 마스터 링

이것은 아마도 i18N의 가장 중요한 측면 중 하나입니다. 다른 언어마다 다원화 규칙이 크게 다릅니다 (예 : 영어는 단수/복수, 아랍어는 0, 1, 2, 많은…)를 가지고 있습니다. Intl.PluralRules 특정 로케일에서 주어진 숫자에 대한 “복수 범주”를 결정할 수 있습니다.

const prEn = new Intl.PluralRules('en-US');

console.log(prEn.select(0));    // "other" (for "0 items")
console.log(prEn.select(1));    // "one"   (for "1 item")
console.log(prEn.select(2));    // "other" (for "2 items")

const prAr = new Intl.PluralRules('ar-EG');

console.log(prAr.select(0));    // "zero"
console.log(prAr.select(1));    // "one"
console.log(prAr.select(2));    // "two"
console.log(prAr.select(10));   // "few"
console.log(prAr.select(100));  // "other"

이 API는 텍스트를 직접 복수화하지 않지만 메시지 번들에서 올바른 번역 문자열을 선택하는 데 필요한 필수 분류를 제공합니다. 예를 들어, 메시지 키가있는 경우 item.one,,, item.other당신은 사용할 것입니다 pr.select(count) 올바른 것을 선택합니다.

6. `Intl.DisplayNames`: 모든 것에 대한 현지화 된 이름

사용자가 선호하는 언어로 언어, 지역 또는 스크립트의 이름을 표시해야합니까? Intl.DisplayNames 포괄적 인 솔루션입니다.

// Display language names in English
const langNamesEn = new Intl.DisplayNames(['en'], { type: 'language' });

console.log(langNamesEn.of('fr'));      // "French"
console.log(langNamesEn.of('es-MX'));   // "Mexican Spanish"

// Display language names in French
const langNamesFr = new Intl.DisplayNames(['fr'], { type: 'language' });

console.log(langNamesFr.of('en'));      // "anglais"
console.log(langNamesFr.of('zh-Hans')); // "chinois (simplifié)"

// Display region names
const regionNamesEn = new Intl.DisplayNames(['en'], { type: 'region' });

console.log(regionNamesEn.of('US'));    // "United States"
console.log(regionNamesEn.of('DE'));    // "Germany"

// Display script names
const scriptNamesEn = new Intl.DisplayNames(['en'], { type: 'script' });

console.log(scriptNamesEn.of('Latn'));  // "Latin"
console.log(scriptNamesEn.of('Arab'));  // "Arabic"

와 함께 Intl.DisplayNames언어 이름, 지역 또는 스크립트에 대한 수많은 매핑을 하드 코딩하지 않아 응용 프로그램을 강력하고 린 상태로 유지합니다.

브라우저 지원

브라우저 호환성에 대해 궁금 할 것입니다. 좋은 소식은 그게됩니다 Intl 현대식 브라우저에서 우수한 지원이 있습니다. 모든 주요 브라우저 (Chrome, Firefox, Safari, Edge)가 논의 된 핵심 기능을 완전히 지원합니다.DateTimeFormat,,, NumberFormat,,, ListFormat,,, RelativeTimeFormat,,, PluralRules,,, DisplayNames). 대부분의 사용자 기반에 폴리 플릴 없이이 API를 자신있게 사용할 수 있습니다.

결론 : 글로벌 웹을 수용하십시오 `Intl`

그만큼 Intl API는 전 세계 잠재 고객을위한 현대 웹 개발의 초석입니다. 프론트 엔드 개발자가 제공 할 수 있습니다 고도로 현지화 된 사용자 경험 최소한의 노력으로 브라우저의 내장 된 최적화 기능을 활용합니다.

채택함으로써 Intl너 종속성을 줄입니다,,, 수축 번들 크기그리고 성능 향상애플리케이션이 전 세계 사용자의 다양한 언어 및 문화적 기대에 대한 존중과 적응을 보장하는 동안. 맞춤형 서식 로직으로 레슬링을 중지 하고이 표준 호환 도구를 수용하십시오!

그것을 기억하는 것이 중요합니다 Intl 처리합니다 서식 데이터의. 엄청나게 강력하지만 국제화의 모든 측면을 해결하는 것은 아닙니다. 내용 번역, 양방향 텍스트 (RTL/LTR), 로케일 관련 타이포그래피 및 데이터 형식 이외의 깊은 문화적 뉘앙스는 여전히 신중한 고려가 필요합니다. (앞으로 이것에 대해 쓸 수 있습니다!) 그러나 동적 데이터를 정확하고 직관적으로 제시하기 위해 Intl 브라우저 네이티브 답변입니다.