M

MLOG

Nederlands

Bereik wereldwijd met de JavaScript Intl API. Leer best practices voor internationalisering voor het formatteren van data, en zorg voor een naadloze gebruikerservaring wereldwijd.

JavaScript Intl API: Best Practices voor Internationalisering voor een Wereldwijd Publiek

In de huidige, onderling verbonden wereld is het essentieel om webapplicaties te creëren die zich richten op een wereldwijd publiek. De JavaScript Intl API biedt krachtige tools voor internationalisering (i18n), waarmee u datums, getallen, valuta's en meer kunt formatteren volgens de conventies van verschillende landinstellingen. Dit artikel onderzoekt best practices voor het benutten van de Intl API om echt globale applicaties te bouwen.

Inzicht in Internationalisering (i18n) en Lokalisatie (l10n)

Voordat we ingaan op de details van de Intl API, is het belangrijk om het onderscheid te begrijpen tussen internationalisering (i18n) en lokalisatie (l10n). I18n is het proces van het ontwerpen en ontwikkelen van applicaties op een manier dat ze gemakkelijk kunnen worden aangepast voor verschillende talen en regio's zonder dat er technische wijzigingen nodig zijn. L10n daarentegen is het proces van het aanpassen van een geïnternationaliseerde applicatie voor een specifieke landinstelling door tekst te vertalen en andere landspecifieke elementen aan te passen.

De Intl API richt zich op het i18n-aspect en biedt de mechanismen voor het afhandelen van landinstelling-gevoelige gegevens, terwijl lokalisatie doorgaans het leveren van vertalingen en landspecifieke configuraties omvat.

Belangrijkste componenten van de Intl API

De Intl API bestaat uit verschillende belangrijke objecten, elk verantwoordelijk voor het afhandelen van specifieke aspecten van internationalisering:

Best Practices voor het Gebruiken van de Intl API

Om de Intl API effectief te gebruiken en een positieve gebruikerservaring voor uw wereldwijde publiek te garanderen, kunt u de volgende best practices overwegen:

1. Specificeer de Juiste Landinstelling

De basis van internationalisering is het specificeren van de juiste landinstelling. De landinstelling identificeert de taal, regio en eventuele specifieke varianten die moeten worden gebruikt voor de formattering. U kunt de voorkeurslandinstelling van de gebruiker verkrijgen via de navigator.language-eigenschap of de Accept-Language HTTP-header.

Bij het maken van Intl-objecten kunt u de landinstelling opgeven als een string of een array van strings. Als u een array opgeeft, probeert de API de best passende landinstelling te vinden uit de beschikbare opties.

Voorbeeld:

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

Als de voorkeurslandinstelling van de gebruiker niet beschikbaar is, kunt u een fallback-landinstelling opgeven. U kunt bijvoorbeeld 'en-US' als standaard gebruiken als de browser van de gebruiker een niet-ondersteunde landinstelling rapporteert.

2. Gebruik Intl.DateTimeFormat voor Datum- en Tijdformattering

Het correct formatteren van datums en tijden is cruciaal voor het bieden van een gelokaliseerde ervaring. Met het object Intl.DateTimeFormat kunt u datums en tijden formatteren volgens de conventies van een specifieke landinstelling.

U kunt de formattering aanpassen door verschillende opties op te geven, zoals het jaar, de maand, de dag, het uur, de minuut en het secondenformaat. U kunt ook de tijdzone opgeven om ervoor te zorgen dat datums en tijden correct worden weergegeven voor gebruikers in verschillende delen van de wereld.

Voorbeeld:

const locale = 'de-DE'; // Duits (Duitsland)
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);

Dit voorbeeld formatteert de huidige datum en tijd volgens de Duitse (Duitsland) landinstelling, inclusief het jaar, de maand, de dag, het uur en de minuut. Het specificeert ook de tijdzone 'Europe/Berlin'.

Vergeet niet om rekening te houden met verschillende datum- en tijdformaten die over de hele wereld worden gebruikt. De VS gebruikt bijvoorbeeld MM/DD/YYYY, terwijl veel andere landen DD/MM/YYYY gebruiken.

3. Gebruik Intl.NumberFormat voor Getal-, Valuta- en Percentageformattering

Het object Intl.NumberFormat biedt een flexibele manier om getallen, valuta's en percentages te formatteren volgens landspecifieke conventies. U kunt de formattering aanpassen door opties op te geven zoals de valuta, stijl (decimaal, valuta of percentage), minimum- en maximumfractionele cijfers, en meer.

Voorbeeld (Valutaformattering):

const locale = 'ja-JP'; // Japans (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);

Dit voorbeeld formatteert het getal 12345.67 als Japanse yen (JPY). Merk op hoe het valutateken (￥) en de groeperingsscheidingsteken (,) automatisch worden aangepast aan de Japanse landinstelling.

Voorbeeld (Percentageformattering):

const locale = 'ar-EG'; // Arabisch (Egypte)
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);

Dit voorbeeld formatteert het getal 0.75 als een percentage in het Arabisch (Egypte). De uitvoer bevat het Arabische procentteken (٪) en twee decimalen.

Belangrijke overwegingen voor valutaformattering:

4. Verwerk meervoudsvorming correct met Intl.PluralRules

Meervoudsvormingsregels variëren aanzienlijk per taal. Het Engels heeft bijvoorbeeld eenvoudige regels met enkelvoudige en meervoudsvormen, terwijl andere talen complexere regels hebben op basis van de waarde van het getal. Het object Intl.PluralRules helpt u de juiste meervoudsvorm te bepalen voor een bepaald getal en landinstelling.

Voorbeeld:

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

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (enkelvoud)
    case 'few': return 'товара'; // tovara (weinig)
    case 'many': return 'товаров'; // tovarov (veel)
    default: return 'товаров'; // Standaard naar veel
  }
}

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

Dit voorbeeld laat zien hoe u Intl.PluralRules kunt gebruiken om de juiste meervoudsvorm te krijgen voor het woord "товар" (item) in het Russisch. Het Russisch heeft verschillende meervoudsvormen, afhankelijk van of het getal eindigt op 1, 2-4 of 5-9.

5. Formatteer lijsten met Intl.ListFormat

Bij het presenteren van lijsten met items kan de formattering per landinstelling verschillen. Met het object Intl.ListFormat kunt u lijsten formatteren volgens landspecifieke conventies, inclusief het gebruik van verschillende voegwoorden (bijv. "en", "of") en lijstscheidingstekens (bijv. komma's, puntkomma's).

Voorbeeld:

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

Dit voorbeeld formatteert een lijst met fruit in het Spaans (Spanje) met behulp van het voegwoord "y" (en) om de laatste twee items te verbinden.

6. Formatteer relatieve tijden met Intl.RelativeTimeFormat

Het weergeven van relatieve tijden (bijv. "gisteren", "over 2 uur") biedt een gebruiksvriendelijke manier om tijdinformatie te presenteren. Met het object Intl.RelativeTimeFormat kunt u relatieve tijden formatteren volgens landspecifieke conventies.

Voorbeeld:

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

Dit voorbeeld formatteert relatieve tijden in het Frans (Canada). De uitvoer laat "hier" (gisteren) en "dans 2 jours" (over 2 dagen) zien.

De optie `numeric` bepaalt hoe getallen worden weergegeven. `'auto'` geeft relatieve woorden weer wanneer ze beschikbaar zijn (zoals "gisteren") en anders getallen. `'always'` geeft altijd getallen weer.

7. Sorteer strings met Intl.Collator

Stringvergelijking is landinstelling-gevoelig. De manier waarop strings worden gesorteerd, verschilt afhankelijk van de taal. In het Duits wordt het teken "ä" bijvoorbeeld meestal gesorteerd als "a", terwijl het in het Zweeds na "z" wordt gesorteerd. Met het object Intl.Collator kunt u strings vergelijken volgens de regels van een specifieke landinstelling.

Voorbeeld:

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

Dit voorbeeld sorteert een array van Duitse woorden met behulp van de Intl.Collator. Merk op dat "äpfel" vóór "aprikosen" wordt gesorteerd, ook al komt "ä" later in het alfabet voor.

8. Verwerk uitzonderlijke gevallen en ontbrekende gegevens

Niet alle landinstellingen worden ondersteund door elke browser of omgeving. Het is essentieel om uitzonderlijke gevallen af te handelen waarin een landinstelling niet beschikbaar is of wanneer gegevens ontbreken. Overweeg de volgende strategieën:

9. Test grondig met verschillende landinstellingen

Grondig testen is cruciaal om ervoor te zorgen dat uw geïnternationaliseerde applicatie correct werkt voor alle ondersteunde landinstellingen. Test uw applicatie met een verscheidenheid aan landinstellingen, waaronder talen die verschillende tekensets, datum- en tijdformaten, nummerformaten en meervoudsvormingsregels gebruiken.

Overweeg om geautomatiseerde testtools te gebruiken om te verifiëren dat uw applicatie zich in verschillende landinstellingen zoals verwacht gedraagt.

10. Overweeg prestatie-implicaties

Hoewel de Intl API over het algemeen efficiënt is, kan het maken van Intl-objecten relatief duur zijn. Om de prestaties te optimaliseren, kunt u het volgende overwegen:

Naast de Intl API: verdere overwegingen voor internationalisering

Hoewel de Intl API krachtige tools biedt voor het formatteren van gegevens, omvat internationalisering meer dan alleen formattering. Overweeg de volgende extra aspecten:

Conclusie

De JavaScript Intl API is een onschatbare tool voor het bouwen van webapplicaties die zich richten op een wereldwijd publiek. Door de best practices te volgen die in dit artikel worden beschreven, kunt u applicaties maken die niet alleen functioneel zijn, maar ook cultureel gevoelig en gebruiksvriendelijk voor gebruikers over de hele wereld. Omarm de kracht van de Intl API en ontgrendel het potentieel van uw applicatie op het wereldtoneel. Het beheersen van de Intl API resulteert in een meer inclusieve en toegankelijke ervaring voor al uw gebruikers, ongeacht hun locatie of taal.