M

MLOG

Deutsch

Erschließen Sie globale Reichweite mit der JavaScript Intl API. Lernen Sie Best Practices zur Internationalisierung für die Formatierung von Datum, Zahlen, Währungen und mehr, um ein nahtloses Nutzererlebnis weltweit zu gewährleisten.

JavaScript Intl API: Best Practices für die Internationalisierung für ein globales Publikum

In der heutigen vernetzten Welt ist es entscheidend, Webanwendungen zu erstellen, die sich an ein globales Publikum richten. Die JavaScript Intl API bietet leistungsstarke Werkzeuge für die Internationalisierung (i18n), mit denen Sie Daten, Zahlen, Währungen und mehr gemäß den Konventionen verschiedener Locales formatieren können. Dieser Artikel untersucht Best Practices für die Nutzung der Intl API, um wirklich globale Anwendungen zu erstellen.

Grundlegendes zur Internationalisierung (i18n) und Lokalisierung (l10n)

Bevor wir uns mit den Besonderheiten der Intl API befassen, ist es wichtig, den Unterschied zwischen Internationalisierung (i18n) und Lokalisierung (l10n) zu verstehen. I18n ist der Prozess des Entwerfens und Entwickelns von Anwendungen auf eine Weise, dass sie leicht für verschiedene Sprachen und Regionen angepasst werden können, ohne dass technische Änderungen erforderlich sind. L10n hingegen ist der Prozess der Anpassung einer internationalisierten Anwendung an ein bestimmtes Locale durch Übersetzung von Texten und Anpassung anderer sprachspezifischer Elemente.

Die Intl API konzentriert sich auf den i18n-Aspekt und stellt die Mechanismen zur Handhabung sprachsensitiver Daten bereit, während die Lokalisierung typischerweise die Bereitstellung von Übersetzungen und sprachspezifischen Konfigurationen umfasst.

Schlüsselkomponenten der Intl API

Die Intl API besteht aus mehreren Schlüsselobjekten, von denen jedes für die Handhabung spezifischer Aspekte der Internationalisierung verantwortlich ist:

Best Practices für die Verwendung der Intl API

Um die Intl API effektiv zu nutzen und eine positive Benutzererfahrung für Ihr globales Publikum zu gewährleisten, sollten Sie die folgenden Best Practices berücksichtigen:

1. Das korrekte Locale angeben

Die Grundlage der Internationalisierung ist die Angabe des korrekten Locales. Das Locale identifiziert die Sprache, die Region und alle spezifischen Varianten, die für die Formatierung verwendet werden sollen. Sie können das bevorzugte Locale des Benutzers aus der navigator.language Eigenschaft oder dem Accept-Language HTTP-Header abrufen.

Beim Erstellen von Intl-Objekten können Sie das Locale als Zeichenkette oder als Array von Zeichenketten angeben. Wenn Sie ein Array angeben, versucht die API, das am besten passende Locale aus den verfügbaren Optionen zu finden.

Beispiel:

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

Wenn das bevorzugte Locale des Benutzers nicht verfügbar ist, können Sie ein Fallback-Locale angeben. Sie könnten beispielsweise 'en-US' als Standard verwenden, wenn der Browser des Benutzers ein nicht unterstütztes Locale meldet.

2. Intl.DateTimeFormat für die Datums- und Uhrzeitformatierung nutzen

Die korrekte Formatierung von Daten und Uhrzeiten ist entscheidend für eine lokalisierte Erfahrung. Das Intl.DateTimeFormat-Objekt ermöglicht es Ihnen, Daten und Uhrzeiten gemäß den Konventionen eines bestimmten Locales zu formatieren.

Sie können die Formatierung anpassen, indem Sie verschiedene Optionen wie das Format für Jahr, Monat, Tag, Stunde, Minute und Sekunde angeben. Sie können auch die Zeitzone angeben, um sicherzustellen, dass Daten und Uhrzeiten für Benutzer in verschiedenen Teilen der Welt korrekt angezeigt werden.

Beispiel:

const locale = 'de-DE'; // German (Germany)
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); // Ausgabe: z.B. "22. Mai 2024, 14:30"
console.log(formattedDate);

Dieses Beispiel formatiert das aktuelle Datum und die Uhrzeit gemäß dem deutschen (Deutschland) Locale, einschließlich Jahr, Monat, Tag, Stunde und Minute. Es gibt auch die Zeitzone 'Europe/Berlin' an.

Denken Sie daran, die verschiedenen Datums- und Uhrzeitformate zu berücksichtigen, die weltweit verwendet werden. Zum Beispiel verwenden die USA MM/DD/YYYY, während viele andere Länder DD/MM/YYYY verwenden.

3. Intl.NumberFormat für die Formatierung von Zahlen, Währungen und Prozentwerten verwenden

Das Intl.NumberFormat-Objekt bietet eine flexible Möglichkeit, Zahlen, Währungen und Prozentwerte gemäß sprachspezifischen Konventionen zu formatieren. Sie können die Formatierung anpassen, indem Sie Optionen wie die Währung, den Stil (decimal, currency oder percent), die minimale und maximale Anzahl von Nachkommastellen und mehr angeben.

Beispiel (Währungsformatierung):

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

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

Dieses Beispiel formatiert die Zahl 12345.67 als Japanische Yen (JPY). Beachten Sie, wie das Währungssymbol (￥) und das Gruppentrennzeichen (,) automatisch an das japanische Locale angepasst werden.

Beispiel (Prozentformatierung):

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

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

Dieses Beispiel formatiert die Zahl 0.75 als Prozentsatz in Arabisch (Ägypten). Die Ausgabe enthält das arabische Prozentzeichen (٪) und zwei Dezimalstellen.

Wichtige Überlegungen zur Währungsformatierung:

4. Pluralisierung mit Intl.PluralRules korrekt handhaben

Pluralregeln variieren erheblich zwischen den Sprachen. Englisch hat zum Beispiel einfache Regeln mit Singular- und Pluralformen, während andere Sprachen komplexere Regeln haben, die auf dem Wert der Zahl basieren. Das Intl.PluralRules-Objekt hilft Ihnen, die korrekte Pluralform für eine bestimmte Zahl und ein bestimmtes Locale zu bestimmen.

Beispiel:

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

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // товар (Singular)
    case 'few': return 'товара'; // товара (wenige)
    case 'many': return 'товаров'; // товаров (viele)
    default: return 'товаров'; // Standardmäßig 'viele'
  }
}

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

Dieses Beispiel zeigt, wie Intl.PluralRules verwendet wird, um die korrekte Pluralform für das Wort „товар“ (Gegenstand) im Russischen zu erhalten. Russisch hat unterschiedliche Pluralformen, je nachdem, ob die Zahl auf 1, 2-4 oder 5-9 endet.

5. Listen mit Intl.ListFormat formatieren

Bei der Darstellung von Listen von Elementen kann die Formatierung je nach Locale variieren. Das Intl.ListFormat-Objekt ermöglicht es Ihnen, Listen gemäß sprachspezifischen Konventionen zu formatieren, einschließlich der Verwendung unterschiedlicher Konjunktionen (z.B. „und“, „oder“) und Listentrennzeichen (z.B. Kommas, Semikolons).

Beispiel:

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

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

Dieses Beispiel formatiert eine Liste von Früchten auf Spanisch (Spanien) und verwendet die Konjunktion „y“ (und), um die letzten beiden Elemente zu verbinden.

6. Relative Zeitangaben mit Intl.RelativeTimeFormat formatieren

Die Anzeige relativer Zeitangaben (z.B. „gestern“, „in 2 Stunden“) bietet eine benutzerfreundliche Möglichkeit, Zeitinformationen darzustellen. Das Intl.RelativeTimeFormat-Objekt ermöglicht es Ihnen, relative Zeitangaben gemäß sprachspezifischen Konventionen zu formatieren.

Beispiel:

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

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

Dieses Beispiel formatiert relative Zeitangaben auf Französisch (Kanada). Die Ausgabe zeigt „hier“ (gestern) und „dans 2 jours“ (in 2 Tagen).

Die Option `numeric` steuert, wie Zahlen angezeigt werden. `'auto'` zeigt relative Wörter an, wenn verfügbar (wie „gestern“), und ansonsten Zahlen. `'always'` zeigt immer Zahlen an.

7. Zeichenketten mit Intl.Collator sortieren

Der Vergleich von Zeichenketten ist sprachsensitiv. Die Art und Weise, wie Zeichenketten sortiert werden, variiert je nach Sprache. Im Deutschen wird zum Beispiel der Buchstabe „ä“ typischerweise wie „a“ sortiert, während er im Schwedischen nach „z“ sortiert wird. Das `Intl.Collator`-Objekt ermöglicht es Ihnen, Zeichenketten gemäß den Regeln eines bestimmten Locales zu vergleichen.

Beispiel:

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

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

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

Dieses Beispiel sortiert ein Array deutscher Wörter mit dem Intl.Collator. Beachten Sie, dass „äpfel“ vor „aprikosen“ sortiert wird, obwohl „ä“ später im Alphabet kommt.

8. Grenzfälle und fehlende Daten behandeln

Nicht alle Locales werden von jedem Browser oder jeder Umgebung unterstützt. Es ist wichtig, Grenzfälle zu behandeln, in denen ein Locale nicht verfügbar ist oder Daten fehlen. Betrachten Sie die folgenden Strategien:

9. Gründlich mit verschiedenen Locales testen

Gründliches Testen ist entscheidend, um sicherzustellen, dass Ihre internationalisierte Anwendung für alle unterstützten Locales korrekt funktioniert. Testen Sie Ihre Anwendung mit einer Vielzahl von Locales, einschließlich Sprachen, die unterschiedliche Zeichensätze, Datums- und Uhrzeitformate, Zahlenformate und Pluralregeln verwenden.

Erwägen Sie den Einsatz automatisierter Testwerkzeuge, um zu überprüfen, ob sich Ihre Anwendung in verschiedenen Locales wie erwartet verhält.

10. Leistungsaspekte berücksichtigen

Obwohl die Intl API im Allgemeinen effizient ist, kann das Erstellen von Intl-Objekten relativ aufwendig sein. Um die Leistung zu optimieren, sollten Sie Folgendes beachten:

Über die Intl API hinaus: Weitere Überlegungen zur Internationalisierung

Obwohl die Intl API leistungsstarke Werkzeuge zur Formatierung von Daten bereitstellt, umfasst die Internationalisierung mehr als nur die Formatierung. Berücksichtigen Sie die folgenden zusätzlichen Aspekte:

Fazit

Die JavaScript Intl API ist ein unschätzbares Werkzeug für die Erstellung von Webanwendungen, die sich an ein globales Publikum richten. Indem Sie die in diesem Artikel beschriebenen Best Practices befolgen, können Sie Anwendungen erstellen, die nicht nur funktional, sondern auch kulturell sensibel und benutzerfreundlich für Benutzer auf der ganzen Welt sind. Nutzen Sie die Leistungsfähigkeit der Intl API und erschließen Sie das Potenzial Ihrer Anwendung auf der globalen Bühne. Die Beherrschung der Intl API führt zu einer inklusiveren und zugänglicheren Erfahrung für alle Ihre Benutzer, unabhängig von ihrem Standort oder ihrer Sprache.