M

MLOG

Norsk

Lås opp global rekkevidde med JavaScript Intl API. Lær beste praksis for internasjonalisering for formatering av datoer, tall, valutaer og mer, og sikre en sømløs brukeropplevelse over hele verden.

JavaScript Intl API: Beste praksis for internasjonalisering for et globalt publikum

I dagens sammenkoblede verden er det avgjørende å lage webapplikasjoner som henvender seg til et globalt publikum. JavaScript Intl API tilbyr kraftige verktøy for internasjonalisering (i18n), slik at du kan formatere datoer, tall, valutaer og mer i henhold til konvensjonene for forskjellige lokaler. Denne artikkelen utforsker beste praksis for å utnytte Intl API for å bygge virkelig globale applikasjoner.

Forstå internasjonalisering (i18n) og lokalisering (l10n)

Før du dykker ned i detaljene for Intl API, er det viktig å forstå skillet mellom internasjonalisering (i18n) og lokalisering (l10n). I18n er prosessen med å designe og utvikle applikasjoner på en måte som gjør at de lett kan tilpasses for forskjellige språk og regioner uten å kreve tekniske endringer. L10n er derimot prosessen med å tilpasse en internasjonalisert applikasjon for en spesifikk lokal ved å oversette tekst og tilpasse andre lokalespesifikke elementer.

Intl API fokuserer på i18n-aspektet, og gir mekanismene for å håndtere lokalesensitive data, mens lokalisering typisk innebærer å tilby oversettelser og lokalespesifikke konfigurasjoner.

Nøkkelkomponenter i Intl API

Intl API består av flere nøkkelobjekter, hver ansvarlig for å håndtere spesifikke aspekter av internasjonalisering:

Beste praksis for bruk av Intl API

For å effektivt utnytte Intl API og sikre en positiv brukeropplevelse for ditt globale publikum, bør du vurdere følgende beste praksis:

1. Spesifiser riktig lokal

Grunnlaget for internasjonalisering er å spesifisere riktig lokal. Lokalen identifiserer språket, regionen og eventuelle spesifikke varianter som skal brukes for formatering. Du kan hente brukerens foretrukne lokal fra navigator.language-egenskapen eller Accept-Language HTTP-headeren.

Når du oppretter Intl-objekter, kan du spesifisere lokalen som en streng eller en rekke strenger. Hvis du oppgir en rekke, vil API-et forsøke å finne den best matchende lokalen fra de tilgjengelige alternativene.

Eksempel:

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

Hvis brukerens foretrukne lokal ikke er tilgjengelig, kan du oppgi en fallback-lokal. Du kan for eksempel bruke 'en-US' som standard hvis brukerens nettleser rapporterer en lokal som ikke støttes.

2. Utnytt Intl.DateTimeFormat for dato- og klokkeslettformatering

Formatering av datoer og klokkeslett riktig er avgjørende for å gi en lokalisert opplevelse. Intl.DateTimeFormat-objektet lar deg formatere datoer og klokkeslett i henhold til konvensjonene for en spesifikk lokal.

Du kan tilpasse formateringen ved å spesifisere forskjellige alternativer, for eksempel år, måned, dag, time, minutt og sekundformat. Du kan også spesifisere tidssonen for å sikre at datoer og klokkeslett vises riktig for brukere i forskjellige deler av verden.

Eksempel:

const locale = 'de-DE'; // Tysk (Tyskland)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Output: z.B. "22. Mai 2024, 14:30"
console.log(formattedDate);

Dette eksemplet formaterer gjeldende dato og klokkeslett i henhold til den tyske (Tyskland) lokalen, inkludert år, måned, dag, time og minutt. Den spesifiserer også tidssonen 'Europe/Berlin'.

Husk å vurdere forskjellige dato- og klokkeslettformater som brukes rundt om i verden. For eksempel bruker USA MM/DD/YYYY, mens mange andre land bruker DD/MM/YYYY.

3. Bruk Intl.NumberFormat for tall-, valuta- og prosentformatering

Intl.NumberFormat-objektet gir en fleksibel måte å formatere tall, valutaer og prosenter i henhold til lokalespesifikke konvensjoner. Du kan tilpasse formateringen ved å spesifisere alternativer som valuta, stil (desimal, valuta eller prosent), minimum og maksimum antall desimaler og mer.

Eksempel (valutaformatering):

const locale = 'ja-JP'; // Japansk (Japan)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Output: z.B. "\u00A512,346"
console.log(formattedAmount);

Dette eksemplet formaterer tallet 12345.67 som japanske yen (JPY). Legg merke til hvordan valutasymbolet (￥) og gruppeseparatoren (,) justeres automatisk i henhold til den japanske lokalen.

Eksempel (prosentformatering):

const locale = 'ar-EG'; // Arabisk (Egypt)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Output: z.B. "\u0667\u0665\u066B\u0660\u0660\u066A"
console.log(formattedPercentage);

Dette eksemplet formaterer tallet 0,75 som en prosentandel på arabisk (Egypt). Utdataene inkluderer det arabiske prosenttegnet (٪) og to desimaler.

Viktige hensyn for valutaformatering:

4. Håndter flertallsformer riktig med Intl.PluralRules

Flertallsregler varierer betydelig mellom språk. For eksempel har engelsk enkle regler med entalls- og flertallsformer, mens andre språk har mer komplekse regler basert på tallverdien. Intl.PluralRules-objektet hjelper deg med å bestemme riktig flertallsform for et gitt tall og en gitt lokal.

Eksempel:

const locale = 'ru-RU'; // Russisk (Russland)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (entall)
    case 'few': return 'товара'; // tovara (få)
    case 'many': return 'товаров'; // tovarov (mange)
    default: return 'товаров'; // Standard til mange
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Output: "5 товаров"

Dette eksemplet viser hvordan du bruker Intl.PluralRules for å få riktig flertallsform for ordet "товар" (vare) på russisk. Russisk har forskjellige flertallsformer avhengig av om tallet slutter på 1, 2-4 eller 5-9.

5. Formater lister med Intl.ListFormat

Når du presenterer lister over elementer, kan formateringen variere på tvers av lokaler. Intl.ListFormat-objektet lar deg formatere lister i henhold til lokalespesifikke konvensjoner, inkludert bruk av forskjellige konjunksjoner (f.eks. "og", "eller") og listeseparatorer (f.eks. komma, semikolon).

Eksempel:

const locale = 'es-ES'; // Spansk (Spania)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Output: "manzanas, naranjas y plátanos"
console.log(formattedList);

Dette eksemplet formaterer en liste over frukt på spansk (Spania), ved hjelp av konjunksjonen "y" (og) for å koble sammen de to siste elementene.

6. Formater relative tider med Intl.RelativeTimeFormat

Visning av relative tider (f.eks. "i går", "om 2 timer") gir en brukervennlig måte å presentere tidsinformasjon på. Intl.RelativeTimeFormat-objektet lar deg formatere relative tider i henhold til lokalespesifikke konvensjoner.

Eksempel:

const locale = 'fr-CA'; // Fransk (Canada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Output: "hier"
console.log(rtf.format(2, 'day')); // Output: "dans 2 jours"

Dette eksemplet formaterer relative tider på fransk (Canada). Utdataene viser "hier" (i går) og "dans 2 jours" (om 2 dager).

`numeric`-alternativet styrer hvordan tall vises. `'auto'` viser relative ord når de er tilgjengelige (som "i går"), og tall ellers. `'always'` viser alltid tall.

7. Sammenlign strenger med Intl.Collator

Strengsammenligning er lokalesensitiv. Måten strenger sorteres på varierer avhengig av språket. For eksempel, på tysk, sorteres tegnet "ä" vanligvis som "a", mens det på svensk sorteres etter "z". Intl.Collator-objektet lar deg sammenligne strenger i henhold til reglene for en spesifikk lokal.

Eksempel:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Output: ["äpfel", "aprikosen", "bananen", "birnen"]

Dette eksemplet sorterer en rekke tyske ord ved hjelp av Intl.Collator. Legg merke til at "äpfel" sorteres før "aprikosen", selv om "ä" kommer senere i alfabetet.

8. Håndter grensetilfeller og manglende data

Ikke alle lokaler støttes av alle nettlesere eller miljøer. Det er viktig å håndtere grensetilfeller der en lokal ikke er tilgjengelig eller når data mangler. Vurder følgende strategier:

9. Test grundig med forskjellige lokaler

Grundig testing er avgjørende for å sikre at din internasjonaliserte applikasjon fungerer korrekt for alle støttede lokaler. Test applikasjonen din med en rekke lokaler, inkludert språk som bruker forskjellige tegnsett, dato- og klokkeslettformater, tallformater og flertallsregler.

Vurder å bruke automatiserte testverktøy for å verifisere at applikasjonen din oppfører seg som forventet i forskjellige lokaler.

10. Vurder ytelsespåvirkninger

Selv om Intl API generelt er effektivt, kan det være relativt kostbart å opprette Intl-objekter. For å optimalisere ytelsen, bør du vurdere følgende:

Utover Intl API: Ytterligere hensyn for internasjonalisering

Selv om Intl API gir kraftige verktøy for formatering av data, innebærer internasjonalisering mer enn bare formatering. Vurder følgende tilleggsaspekter:

Konklusjon

JavaScript Intl API er et uvurderlig verktøy for å bygge webapplikasjoner som henvender seg til et globalt publikum. Ved å følge de beste fremgangsmåtene som er skissert i denne artikkelen, kan du lage applikasjoner som ikke bare er funksjonelle, men også kulturelt sensitive og brukervennlige for brukere over hele verden. Omfavn kraften i Intl API og frigjør potensialet til applikasjonen din på den globale scenen. Å mestre Intl API vil resultere i en mer inkluderende og tilgjengelig opplevelse for alle brukerne dine, uavhengig av deres plassering eller språk.