M

MLOG

Svenska

Nå ut globalt med JavaScript Intl API. Lär dig bästa praxis för att formatera datum, tal och valutor för en sömlös användarupplevelse världen över.

JavaScript Intl API: Bästa praxis för internationalisering för en global publik

I dagens uppkopplade värld är det avgörande att skapa webbapplikationer som riktar sig till en global publik. JavaScript Intl API erbjuder kraftfulla verktyg för internationalisering (i18n), vilket gör det möjligt att formatera datum, tal, valutor med mera enligt konventionerna för olika locales. Den här artikeln utforskar bästa praxis för att utnyttja Intl API för att bygga verkligt globala applikationer.

Förståelse för internationalisering (i18n) och lokalisering (l10n)

Innan vi går in på detaljerna i Intl API är det viktigt att förstå skillnaden mellan internationalisering (i18n) och lokalisering (l10n). I18n är processen att designa och utveckla applikationer på ett sätt som gör att de enkelt kan anpassas för olika språk och regioner utan att kräva tekniska ändringar. L10n, å andra sidan, är processen att anpassa en internationaliserad applikation för en specifik locale genom att översätta text och anpassa andra platsspecifika element.

Intl API fokuserar på i18n-aspekten genom att tillhandahålla mekanismerna för att hantera platsspecifika data, medan lokalisering vanligtvis innebär att tillhandahålla översättningar och platsspecifika konfigurationer.

Nyckelkomponenter i Intl API

Intl API består av flera nyckelobjekt, där vart och ett ansvarar för att hantera specifika aspekter av internationalisering:

Bästa praxis för att använda Intl API

För att effektivt utnyttja Intl API och säkerställa en positiv användarupplevelse för din globala publik, överväg följande bästa praxis:

1. Ange rätt locale

Grunden för internationalisering är att ange rätt locale. En locale identifierar språket, regionen och eventuella specifika varianter som ska användas för formatering. Du kan hämta användarens föredragna locale från egenskapen navigator.language eller från HTTP-headern Accept-Language.

När du skapar Intl-objekt kan du ange locale som en sträng eller en array av strängar. Om du anger en array kommer API:et att försöka hitta den bäst matchande locale bland de tillgängliga alternativen.

Exempel:

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

Om användarens föredragna locale inte är tillgänglig kan du ange en reserv-locale. Till exempel kan du använda 'en-US' som standard om användarens webbläsare rapporterar en locale som inte stöds.

2. Utnyttja Intl.DateTimeFormat för datum- och tidsformatering

Att formatera datum och tider korrekt är avgörande för att erbjuda en lokaliserad upplevelse. Objektet Intl.DateTimeFormat låter dig formatera datum och tider enligt konventionerna för en specifik locale.

Du kan anpassa formateringen genom att ange olika alternativ, såsom format för år, månad, dag, timme, minut och sekund. Du kan också ange tidszonen för att säkerställa att datum och tider visas korrekt för användare i olika delar av världen.

Exempel:

const locale = 'de-DE'; // Tyska (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: t.ex. "22. Mai 2024, 14:30"
console.log(formattedDate);

Detta exempel formaterar det aktuella datumet och tiden enligt den tyska (Tyskland) locale, inklusive år, månad, dag, timme och minut. Det specificerar också tidszonen 'Europe/Berlin'.

Kom ihåg att ta hänsyn till olika datum- och tidsformat som används runt om i världen. Till exempel använder USA MM/DD/ÅÅÅÅ, medan många andra länder använder DD/MM/ÅÅÅÅ.

3. Använd Intl.NumberFormat för formatering av tal, valuta och procent

Objektet Intl.NumberFormat erbjuder ett flexibelt sätt att formatera tal, valutor och procentandelar enligt platsspecifika konventioner. Du kan anpassa formateringen genom att ange alternativ som valuta, stil (decimal, currency eller percent), minsta och högsta antal decimaler med mera.

Exempel (Valutaformatering):

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

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Output: t.ex. "￥12,346"
console.log(formattedAmount);

Detta exempel formaterar talet 12345.67 som japanska yen (JPY). Notera hur valutasymbolen (￥) och tusentalsavgränsaren (,) automatiskt anpassas enligt den japanska locale.

Exempel (Procentformatering):

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

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Output: t.ex. "٧٥٫٠٠٪"
console.log(formattedPercentage);

Detta exempel formaterar talet 0.75 som en procentandel på arabiska (Egypten). Utdata inkluderar det arabiska procenttecknet (٪) och två decimaler.

Viktiga överväganden för valutaformatering:

4. Hantera pluralisering korrekt med Intl.PluralRules

Pluralregler varierar avsevärt mellan olika språk. Engelska har till exempel enkla regler med singular- och pluralformer, medan andra språk har mer komplexa regler baserade på talets värde. Objektet Intl.PluralRules hjälper dig att bestämma den korrekta pluralformen för ett givet tal och en given locale.

Exempel:

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

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

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

Detta exempel visar hur man använder Intl.PluralRules för att få den korrekta pluralformen för ordet "товар" (vara) på ryska. Ryskan har olika pluralformer beroende på om talet slutar på 1, 2-4 eller 5-9.

5. Formatera listor med Intl.ListFormat

När man presenterar listor med objekt kan formateringen variera mellan olika locales. Objektet Intl.ListFormat låter dig formatera listor enligt platsspecifika konventioner, inklusive användning av olika konjunktioner (t.ex. "och", "eller") och listavgränsare (t.ex. kommatecken, semikolon).

Exempel:

const locale = 'es-ES'; // Spanska (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);

Detta exempel formaterar en lista med frukter på spanska (Spanien) och använder konjunktionen "y" (och) för att binda samman de två sista objekten.

6. Formatera relativa tider med Intl.RelativeTimeFormat

Att visa relativa tider (t.ex. "igår", "om 2 timmar") är ett användarvänligt sätt att presentera tidsinformation. Objektet Intl.RelativeTimeFormat låter dig formatera relativa tider enligt platsspecifika konventioner.

Exempel:

const locale = 'fr-CA'; // Franska (Kanada)
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"

Detta exempel formaterar relativa tider på franska (Kanada). Resultatet visar "hier" (igår) och "dans 2 jours" (om 2 dagar).

Alternativet `numeric` styr hur tal visas. `'auto'` visar relativa ord när det är möjligt (som "igår"), och annars tal. `'always'` visar alltid tal.

7. Sortera strängar med Intl.Collator

Strängjämförelse är platsspecifik. Sättet strängar sorteras på varierar beroende på språket. Till exempel sorteras tecknet "ä" i tyska vanligtvis som "a", medan det i svenska sorteras efter "z". Objektet `Intl.Collator` låter dig jämföra strängar enligt reglerna för en specifik locale.

Exempel:

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"]

Detta exempel sorterar en array av tyska ord med hjälp av Intl.Collator. Notera att "äpfel" sorteras före "aprikosen", trots att "ä" kommer senare i alfabetet.

8. Hantera kantfall och saknad data

Alla locales stöds inte av alla webbläsare eller miljöer. Det är viktigt att hantera kantfall där en locale inte är tillgänglig eller när data saknas. Överväg följande strategier:

9. Testa noggrant med olika locales

Noggranna tester är avgörande för att säkerställa att din internationaliserade applikation fungerar korrekt för alla locales som stöds. Testa din applikation med en mängd olika locales, inklusive språk som använder olika teckenuppsättningar, datum- och tidsformat, talformat och pluralregler.

Överväg att använda automatiserade testverktyg för att verifiera att din applikation beter sig som förväntat i olika locales.

10. Tänk på prestandakonsekvenser

Även om Intl API generellt sett är effektivt, kan det vara relativt kostsamt att skapa Intl-objekt. För att optimera prestandan, överväg följande:

Utöver Intl API: Ytterligare överväganden för internationalisering

Även om Intl API erbjuder kraftfulla verktyg för att formatera data, innebär internationalisering mer än bara formatering. Tänk på följande ytterligare aspekter:

Slutsats

JavaScript Intl API är ett ovärderligt verktyg för att bygga webbapplikationer som riktar sig till en global publik. Genom att följa de bästa praxis som beskrivs i denna artikel kan du skapa applikationer som inte bara är funktionella utan också kulturellt medvetna och användarvänliga för användare runt om i världen. Omfamna kraften i Intl API och frigör potentialen hos din applikation på den globala arenan. Att bemästra Intl API kommer att resultera i en mer inkluderande och tillgänglig upplevelse för alla dina användare, oavsett deras plats eller språk.