M

MLOG

Dansk

Opnå global rækkevidde med JavaScript Intl API. Lær bedste praksis for internationalisering af datoer, tal, valutaer med mere, hvilket sikrer en problemfri brugeroplevelse verden over.

JavaScript Intl API: Bedste Praksis for Internationalisering til et Globalt Publikum

I dagens forbundne verden er det afgørende at skabe webapplikationer, der henvender sig til et globalt publikum. JavaScript Intl API tilbyder kraftfulde værktøjer til internationalisering (i18n), der giver dig mulighed for at formatere datoer, tal, valutaer og mere i henhold til konventionerne i forskellige sprogindstillinger. Denne artikel udforsker bedste praksis for at udnytte Intl API til at bygge virkelig globale applikationer.

Forstå Internationalisering (i18n) og Lokalisering (l10n)

Før du dykker ned i detaljerne i Intl API, er det vigtigt at forstå forskellen mellem internationalisering (i18n) og lokalisering (l10n). I18n er processen med at designe og udvikle applikationer på en måde, der gør det nemt at tilpasse dem til forskellige sprog og regioner uden at kræve ingeniørmæssige ændringer. L10n er derimod processen med at tilpasse en internationaliseret applikation til en bestemt sprogindstilling ved at oversætte tekst og tilpasse andre sprogspecifikke elementer.

Intl API fokuserer på i18n-aspektet og leverer mekanismerne til håndtering af sprogspecifikke data, mens lokalisering typisk involverer levering af oversættelser og sprogspecifikke konfigurationer.

Nøglekomponenter i Intl API

Intl API består af flere nøgleobjekter, der hver især er ansvarlige for at håndtere specifikke aspekter af internationalisering:

Bedste Praksis for Brug af Intl API

For effektivt at udnytte Intl API og sikre en positiv brugeroplevelse for dit globale publikum, skal du overveje følgende bedste praksis:

1. Angiv den Korrekte Sprogindstilling

Grundlaget for internationalisering er at angive den korrekte sprogindstilling. Sprogindstillingen identificerer sproget, regionen og eventuelle specifikke varianter, der skal bruges til formatering. Du kan hente brugerens foretrukne sprogindstilling fra navigator.language-egenskaben eller Accept-Language HTTP-headeren.

Når du opretter Intl-objekter, kan du angive sprogindstillingen som en streng eller en række strenge. Hvis du angiver en række, vil API'et forsøge at finde den bedst matchende sprogindstilling fra de tilgængelige muligheder.

Eksempel:

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

Hvis brugerens foretrukne sprogindstilling ikke er tilgængelig, kan du angive en fallback-sprogindstilling. Du kan f.eks. bruge 'en-US' som standard, hvis brugerens browser rapporterer en ikke-understøttet sprogindstilling.

2. Udnyt Intl.DateTimeFormat til Dato- og Tidsformatering

Formatering af datoer og tidspunkter korrekt er afgørende for at levere en lokaliseret oplevelse. Intl.DateTimeFormat-objektet giver dig mulighed for at formatere datoer og tidspunkter i henhold til konventionerne i en specifik sprogindstilling.

Du kan tilpasse formateringen ved at angive forskellige indstillinger, f.eks. formatet for år, måned, dag, time, minut og sekund. Du kan også angive tidszonen for at sikre, at datoer og tidspunkter vises korrekt for brugere i forskellige dele af 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 eksempel formaterer den aktuelle dato og tid i henhold til den tyske (Tyskland) sprogindstilling, inklusive år, måned, dag, time og minut. Det angiver også 'Europe/Berlin'-tidszonen.

Husk at tage hensyn til forskellige dato- og tidsformater, der bruges rundt om i verden. For eksempel bruger USA MM/DD/YYYY, mens mange andre lande bruger DD/MM/YYYY.

3. Brug Intl.NumberFormat til Tal-, Valuta- og Procentformatering

Intl.NumberFormat-objektet giver en fleksibel måde at formatere tal, valutaer og procenter i henhold til sprogspecifikke konventioner. Du kan tilpasse formateringen ved at angive indstillinger som f.eks. valutaen, stilen (decimal, valuta eller procent), minimums- og maksimumsbrøkdifferencer og mere.

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. "￥12,346"
console.log(formattedAmount);

Dette eksempel formaterer tallet 12345,67 som japanske yen (JPY). Bemærk, hvordan valutasymbolet (￥) og gruppeseparator (,) automatisk justeres i henhold til den japanske sprogindstilling.

Eksempel (Procentformatering):

const locale = 'ar-EG'; // Arabisk (Egypten)
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. "٧٥٫٠٠٪"
console.log(formattedPercentage);

Dette eksempel formaterer tallet 0,75 som en procent i arabisk (Egypten). Outputtet indeholder det arabiske procenttegn (٪) og to decimaler.

Vigtige Overvejelser for Valutaformatering:

4. Håndter Pluralisering Korrekt med Intl.PluralRules

Pluraliseringsregler varierer betydeligt på tværs af sprog. For eksempel har engelsk enkle regler med entals- og flertalsformer, mens andre sprog har mere komplekse regler baseret på tallets værdi. Intl.PluralRules-objektet hjælper dig med at bestemme den korrekte flertalsform for et givet tal og en given sprogindstilling.

Eksempel:

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

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (entals)
    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 eksempel demonstrerer, hvordan du bruger Intl.PluralRules til at få den korrekte flertalsform for ordet "товар" (vare) på russisk. Russisk har forskellige flertalsformer afhængigt af om tallet ender på 1, 2-4 eller 5-9.

5. Formater Lister med Intl.ListFormat

Når du præsenterer lister over elementer, kan formateringen variere på tværs af sprogindstillinger. Intl.ListFormat-objektet giver dig mulighed for at formatere lister i henhold til sprogspecifikke konventioner, herunder brugen af forskellige konjunktioner (f.eks. "og", "eller") og listeseparatorer (f.eks. kommaer, semikolon).

Eksempel:

const locale = 'es-ES'; // Spansk (Spanien)
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 eksempel formaterer en liste over frugter på spansk (Spanien) ved hjælp af konjunktionen "y" (og) til at forbinde de sidste to elementer.

6. Formater Relative Tidspunkter med Intl.RelativeTimeFormat

Visning af relative tidspunkter (f.eks. "i går", "om 2 timer") giver en brugervenlig måde at præsentere tidsinformation på. Intl.RelativeTimeFormat-objektet giver dig mulighed for at formatere relative tidspunkter i henhold til sprogspecifikke konventioner.

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 eksempel formaterer relative tidspunkter på fransk (Canada). Outputtet viser "hier" (i går) og "dans 2 jours" (om 2 dage).

Indstillingen `numeric` styrer, hvordan tal vises. `'auto'` viser relative ord, når de er tilgængelige (som "i går"), og ellers tal. `'always'` viser altid tal.

7. Sorter Strenge med Intl.Collator

Sammenligning af strenge er sprogspecifik. Den måde, strenge sorteres på, varierer afhængigt af sproget. For eksempel sorteres tegnet "ä" på tysk typisk som "a", mens det på svensk sorteres efter "z". Intl.Collator-objektet giver dig mulighed for at sammenligne strenge i henhold til reglerne for en bestemt sprogindstilling.

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 eksempel sorterer en række tyske ord ved hjælp af Intl.Collator. Bemærk, at "äpfel" sorteres før "aprikosen", selvom "ä" kommer senere i alfabetet.

8. Håndter Grænsetilfælde og Manglende Data

Ikke alle sprogindstillinger understøttes af alle browsere eller miljøer. Det er vigtigt at håndtere grænsetilfælde, hvor en sprogindstilling ikke er tilgængelig, eller når data mangler. Overvej følgende strategier:

9. Test Grundigt med Forskellige Sprogindstillinger

Grundig testning er afgørende for at sikre, at din internationaliserede applikation fungerer korrekt for alle understøttede sprogindstillinger. Test din applikation med en række sprogindstillinger, herunder sprog, der bruger forskellige tegnsæt, dato- og tidsformater, talformater og pluraliseringsregler.

Overvej at bruge automatiserede testværktøjer til at verificere, at din applikation fungerer som forventet i forskellige sprogindstillinger.

10. Overvej Ydelsesimplikationer

Selvom Intl API generelt er effektivt, kan oprettelse af Intl-objekter være relativt dyrt. For at optimere ydeevnen skal du overveje følgende:

Ud over Intl API: Yderligere Overvejelser for Internationalisering

Selvom Intl API tilbyder kraftfulde værktøjer til formatering af data, involverer internationalisering mere end blot formatering. Overvej følgende yderligere aspekter:

Konklusion

JavaScript Intl API er et uvurderligt værktøj til at bygge webapplikationer, der henvender sig til et globalt publikum. Ved at følge den bedste praksis, der er beskrevet i denne artikel, kan du oprette applikationer, der ikke kun er funktionelle, men også kulturelt følsomme og brugervenlige for brugere over hele verden. Omfavn kraften i Intl API og frigør potentialet i din applikation på den globale scene. At mestre Intl API vil resultere i en mere inkluderende og tilgængelig oplevelse for alle dine brugere, uanset deres placering eller sprog.