JavaScript Intl API: Najlepsze praktyki internacjonalizacji dla globalnej publiczności

W dzisiejszym połączonym świecie kluczowe jest tworzenie aplikacji internetowych, które odpowiadają globalnej publiczności. JavaScript Intl API zapewnia potężne narzędzia do internacjonalizacji (i18n), umożliwiając formatowanie dat, liczb, walut i innych zgodnie z konwencjami różnych lokalizacji. Ten artykuł omawia najlepsze praktyki wykorzystania Intl API do tworzenia prawdziwie globalnych aplikacji.

Zrozumienie internacjonalizacji (i18n) i lokalizacji (l10n)

Zanim zagłębimy się w szczegóły Intl API, ważne jest, aby zrozumieć różnicę między internacjonalizacją (i18n) a lokalizacją (l10n). I18n to proces projektowania i tworzenia aplikacji w sposób, który można łatwo dostosować do różnych języków i regionów bez konieczności wprowadzania zmian inżynieryjnych. L10n, z drugiej strony, to proces adaptacji internacjonalizowanej aplikacji do określonej lokalizacji poprzez tłumaczenie tekstu i dostosowywanie innych elementów specyficznych dla lokalizacji.

Intl API skupia się na aspekcie i18n, dostarczając mechanizmy do obsługi danych wrażliwych na lokalizację, podczas gdy lokalizacja zazwyczaj obejmuje dostarczanie tłumaczeń i konfiguracji specyficznych dla lokalizacji.

Kluczowe komponenty Intl API

Intl API składa się z kilku kluczowych obiektów, z których każdy jest odpowiedzialny za obsługę określonych aspektów internacjonalizacji:

• Intl.Collator: Do porównywania ciągów znaków w sposób uwzględniający lokalizację.
• Intl.DateTimeFormat: Do formatowania dat i godzin.
• Intl.NumberFormat: Do formatowania liczb, w tym walut i procentów.
• Intl.PluralRules: Do obsługi zasad liczebnikowych w różnych językach.
• Intl.ListFormat: Do formatowania list w sposób uwzględniający lokalizację.
• Intl.RelativeTimeFormat: Do formatowania czasów względnych (np. "wczoraj", "za 2 godziny").

Najlepsze praktyki korzystania z Intl API

Aby skutecznie wykorzystać Intl API i zapewnić pozytywne doświadczenie użytkownika dla globalnej publiczności, rozważ następujące najlepsze praktyki:

1. Określ poprawną lokalizację

Podstawą internacjonalizacji jest określenie poprawnej lokalizacji. Lokalizacja identyfikuje język, region i wszelkie specyficzne warianty do wykorzystania do formatowania. Preferowaną lokalizację użytkownika można uzyskać z właściwości navigator.language lub nagłówka HTTP Accept-Language.

Podczas tworzenia obiektów Intl możesz określić lokalizację jako ciąg znaków lub tablicę ciągów znaków. Jeśli podasz tablicę, API spróbuje znaleźć najlepiej pasującą lokalizację spośród dostępnych opcji.

Przykład:

const locale = navigator.language || 'pl-PL';
const numberFormat = new Intl.NumberFormat(locale);

Jeśli preferowana lokalizacja użytkownika nie jest dostępna, możesz podać lokalizację zastępczą. Na przykład, możesz użyć 'pl-PL' jako domyślnej, jeśli przeglądarka użytkownika zgłasza nieobsługiwaną lokalizację.

2. Wykorzystaj Intl.DateTimeFormat do formatowania dat i godzin

Poprawne formatowanie dat i godzin jest kluczowe dla zapewnienia zlokalizowanego doświadczenia. Obiekt Intl.DateTimeFormat pozwala na formatowanie dat i godzin zgodnie z konwencjami określonej lokalizacji.

Możesz dostosować formatowanie, określając różne opcje, takie jak format roku, miesiąca, dnia, godziny, minuty i sekundy. Możesz również określić strefę czasową, aby zapewnić poprawne wyświetlanie dat i godzin użytkownikom w różnych częściach świata.

Przykład:

const locale = 'pl-PL'; // Polski (Polska)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Warsaw'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Wyjście: np. "22 maja 2024, 14:30"
console.log(formattedDate);

Ten przykład formatuje bieżącą datę i godzinę zgodnie z polską lokalizacją (Polska), w tym rok, miesiąc, dzień, godzinę i minutę. Określa również strefę czasową 'Europe/Warsaw'.

Pamiętaj, aby uwzględnić różne formaty daty i godziny używane na całym świecie. Na przykład, USA używają MM/DD/RRRR, podczas gdy wiele innych krajów używa DD/MM/RRRR.

3. Użyj Intl.NumberFormat do formatowania liczb, walut i procentów

Obiekt Intl.NumberFormat zapewnia elastyczny sposób formatowania liczb, walut i procentów zgodnie z konwencjami specyficznymi dla lokalizacji. Możesz dostosować formatowanie, określając opcje, takie jak waluta, styl (dziesiętny, walutowy lub procentowy), minimalna i maksymalna liczba cyfr po przecinku i inne.

Przykład (Formatowanie walut):

const locale = 'pl-PL'; // Polski (Polska)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'PLN'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Wyjście: np. "12 345,67 zł"
console.log(formattedAmount);

Ten przykład formatuje liczbę 12345,67 jako polskie złote (PLN). Zauważ, jak symbol waluty (zł) i separator grupowania (spacja) są automatycznie dostosowywane zgodnie z polską lokalizacją.

Przykład (Formatowanie procentów):

const locale = 'pl-PL'; // Polski (Polska)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Wyjście: np. "75,00%"
console.log(formattedPercentage);

Ten przykład formatuje liczbę 0,75 jako procent w języku polskim (Polska). Wyjście zawiera polski znak procentu (%) i dwie cyfry po przecinku.

Ważne uwagi dotyczące formatowania walut:

• Kody walut: Używaj poprawnych kodów walut ISO 4217 (np. USD, EUR, PLN).
• Pozycja symbolu: Pamiętaj, że pozycja symbolu waluty różni się w zależności od lokalizacji (np. przed lub po kwocie).
• Separatory dziesiętne i separatory grupowania: Zrozum różne konwencje dotyczące separatorów dziesiętnych (np. kropka lub przecinek) i separatorów grupowania (np. przecinek lub kropka).

4. Poprawnie obsługuj liczebniki za pomocą Intl.PluralRules

Zasady liczebników znacznie różnią się w zależności od języka. Na przykład, angielski ma proste zasady z formami liczby pojedynczej i mnogiej, podczas gdy inne języki mają bardziej złożone zasady oparte na wartości liczby. Obiekt Intl.PluralRules pomaga określić poprawną formę liczebnika dla danej liczby i lokalizacji.

Przykład:

const locale = 'pl-PL'; // Polski (Polska)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'produkt'; // pojedynczy
    case 'few': return 'produkty'; // kilka
    case 'many': return 'produktów'; // wiele
    default: return 'produktów'; // Domyślnie wiele
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Wyjście: "5 produktów"

Ten przykład pokazuje, jak używać Intl.PluralRules do uzyskania poprawnej formy liczebnika dla słowa "produkt" w języku polskim. Polski ma różne formy liczebników w zależności od tego, czy liczba kończy się na 1, 2-4, czy 5 i więcej.

5. Formatuj listy za pomocą Intl.ListFormat

Podczas prezentowania list elementów formatowanie może się różnić w zależności od lokalizacji. Obiekt Intl.ListFormat pozwala na formatowanie list zgodnie z konwencjami specyficznymi dla lokalizacji, w tym użycie różnych spójników (np. "i", "lub") i separatorów list (np. przecinki, średniki).

Przykład:

const locale = 'pl-PL'; // Polski (Polska)
const list = ['jabłka', 'pomarańcze', 'banany'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Wyjście: "jabłka, pomarańcze i banany"
console.log(formattedList);

Ten przykład formatuje listę owoców w języku polskim (Polska), używając spójnika "i" do połączenia dwóch ostatnich elementów.

6. Formatuj czasy względne za pomocą Intl.RelativeTimeFormat

Wyświetlanie czasów względnych (np. "wczoraj", "za 2 godziny") to przyjazny dla użytkownika sposób prezentowania informacji o czasie. Obiekt Intl.RelativeTimeFormat pozwala na formatowanie czasów względnych zgodnie z konwencjami specyficznymi dla lokalizacji.

Przykład:

const locale = 'pl-PL'; // Polski (Polska)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Wyjście: "wczoraj"
console.log(rtf.format(2, 'day')); // Wyjście: "za 2 dni"

Ten przykład formatuje czasy względne w języku polskim (Polska). Wyjście pokazuje "wczoraj" i "za 2 dni".

Opcja `numeric` kontroluje sposób wyświetlania liczb. `'auto'` wyświetla słowa względne, gdy są dostępne (jak "wczoraj"), a w przeciwnym razie liczby. `'always'` zawsze wyświetla liczby.

7. Kolacje ciągów znaków za pomocą Intl.Collator

Porównywanie ciągów znaków jest wrażliwe na lokalizację. Sposób sortowania ciągów znaków różni się w zależności od języka. Na przykład, w języku niemieckim znak "ä" jest zazwyczaj sortowany jak "a", podczas gdy w języku szwedzkim jest sortowany po "z". Obiekt Intl.Collator pozwala na porównywanie ciągów znaków zgodnie z zasadami określonej lokalizacji.

Przykład:

const locale = 'pl-PL';
const collator = new Intl.Collator(locale);

const strings = ['jabłka', 'banany', 'czereśnie', 'gruszki'];
strings.sort(collator.compare);

console.log(strings); // Wyjście: ["banany", "czereśnie", "gruszki", "jabłka"]

Ten przykład sortuje tablicę polskich słów przy użyciu Intl.Collator. Zauważ, że kolejność sortowania jest zgodna z polskim alfabetem.

8. Obsługa przypadków brzegowych i brakujących danych

Nie wszystkie lokalizacje są obsługiwane przez każdą przeglądarkę lub środowisko. Konieczne jest obsługiwanie przypadków brzegowych, gdy lokalizacja nie jest dostępna lub gdy dane brakuje. Rozważ następujące strategie:

• Zapewnij lokalizacje zastępcze: Określ domyślną lokalizację do użycia, gdy preferowana lokalizacja użytkownika nie jest obsługiwana.
• Stopniowe przywracanie funkcjonalności: Jeśli określone opcje formatowania nie są obsługiwane dla danej lokalizacji, zapewnij rozsądne rozwiązanie zastępcze. Na przykład, możesz wyświetlić datę w mniej szczegółowym formacie.
• Używaj bloków try-catch: Opakuj wywołania Intl API w bloki try-catch, aby w sposób przyjazny obsługiwać potencjalne błędy.

9. Dokładnie testuj z różnymi lokalizacjami

Dokładne testowanie jest kluczowe, aby upewnić się, że Twoja zinternacjonalizowana aplikacja działa poprawnie dla wszystkich obsługiwanych lokalizacji. Przetestuj swoją aplikację z różnymi lokalizacjami, w tym językami używającymi różnych zestawów znaków, formatów daty i godziny, formatów liczb i zasad liczebnikowych.

Rozważ użycie zautomatyzowanych narzędzi do testowania, aby zweryfikować, czy Twoja aplikacja działa zgodnie z oczekiwaniami w różnych lokalizacjach.

10. Rozważ implikacje wydajnościowe

Chociaż Intl API jest generalnie wydajne, tworzenie obiektów Intl może być stosunkowo kosztowne. Aby zoptymalizować wydajność, rozważ następujące kwestie:

• Cache obiektów Intl: Twórz obiekty Intl raz i używaj ich ponownie, gdy tylko jest to możliwe, zamiast tworzyć nowe obiekty dla każdej operacji formatowania.
• Lazy loading danych lokalizacji: Ładuj dane lokalizacji tylko wtedy, gdy są potrzebne, zamiast ładować wszystkie dane lokalizacji z góry.

Poza Intl API: Dodatkowe uwagi dotyczące internacjonalizacji

Chociaż Intl API zapewnia potężne narzędzia do formatowania danych, internacjonalizacja obejmuje więcej niż tylko formatowanie. Rozważ następujące dodatkowe aspekty:

• Kierunek tekstu (RTL/LTR): Obsługuj języki od prawej do lewej (RTL), takie jak arabski i hebrajski, używając CSS do dostosowania układu aplikacji.
• Kodowanie znaków: Używaj kodowania UTF-8, aby upewnić się, że Twoja aplikacja może obsługiwać szeroki zakres znaków.
• Zarządzanie tłumaczeniami: Użyj systemu zarządzania tłumaczeniami, aby usprawnić proces tłumaczenia tekstu aplikacji.
• Projektowanie uwzględniające wrażliwość kulturową: Bądź świadomy różnic kulturowych podczas projektowania aplikacji. Na przykład, symbolika kolorów może się różnić w zależności od kultury.

Wniosek

JavaScript Intl API jest nieocenionym narzędziem do tworzenia aplikacji internetowych, które obsługują globalną publiczność. Postępując zgodnie z najlepszymi praktykami opisanymi w tym artykule, możesz tworzyć aplikacje, które są nie tylko funkcjonalne, ale także uwzględniają wrażliwość kulturową i są przyjazne dla użytkowników na całym świecie. Wykorzystaj moc Intl API i odblokuj potencjał swojej aplikacji na globalnej scenie. Opanowanie Intl API zapewni bardziej inkluzywne i dostępne doświadczenie dla wszystkich Twoich użytkowników, niezależnie od ich lokalizacji czy języka.