0Pricing
React Academy · Lektion

Pluralisierung und Interpolation

Verarbeiten Sie an Mengen orientierte Pluralformen und fügen Sie dynamische Werte in übersetzte Zeichenfolgen ein.

Pluralisierung und Interpolation ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion behandeln Sie pluralische Formen abhängig von einer Anzahl und fügen mithilfe der Interpolation und Pluralunterstützung von i18next dynamische Werte in übersetzte Zeichenfolgen ein.

Grundlagen der Interpolation

Verwenden Sie doppelte geschweifte Klammern in Ihren Übersetzungszeichenfolgen als Platzhalter. Übergeben Sie ein Objekt mit den Variablenwerten als zweites Argument an t().
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Mehrere Interpolationsvariablen

Sie können in einer einzelnen Zeichenfolge beliebig viele Interpolationsvariablen verwenden.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

HTML maskieren

Standardmäßig maskiert i18next HTML-Zeichen in interpolierten Werten. Um HTML innerhalb eines interpolierten Werts zu rendern, setzen Sie `escapeValue: false` in der Initialisierungskonfiguration (in React bereits sicher, da React JSX maskiert).

Pluralformen

i18next unterstützt Pluralformen automatisch. Definieren Sie `key` für den Singular und `key_other` (oder `key_plural`) für den Plural. Übergeben Sie `count` im Interpolationsobjekt.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

Sprachspezifische Pluralregeln

Verschiedene Sprachen haben unterschiedliche Pluralregeln. Im Russischen gibt es 4 Pluralformen, im Arabischen 6. i18next verwendet automatisch die Unicode-CLDR-Regeln der jeweiligen Sprache. Definieren Sie alle erforderlichen Formen in der Übersetzungsdatei.
// Russian (ru):
// key_one, key_few, key_many, key_other

Nullform

i18next unterstützt auch eine spezielle `key_zero`-Form für den Fall, dass count 0 ist. Dadurch ist eine andere Formulierung möglich, beispielsweise „Keine Elemente“ statt „0 Elemente“.
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

Verschachtelte Schlüssel mit Pluralformen

Sie können Pluralschlüssel in verschachtelten Objekten verwenden. Greifen Sie wie bei gewöhnlichen verschachtelten Schlüsseln über die Punktnotation darauf zu.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Datums- und Zahlenformatierung

i18next lässt sich für die lokalisierte Datums- und Zahlenformatierung in die Intl-API integrieren. Verwenden Sie i18n.format() oder das intlify-Plugin, um Datumsangaben als Teil von Übersetzungen zu formatieren.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Kontextabhängige Übersetzungen

Verwenden Sie die Option `context` für grammatikalisch unterschiedliche Formen in verschiedenen Kontexten, beispielsweise bei geschlechtsspezifischen Wörtern. Definieren Sie Varianten `key_male` und `key_female` in der Übersetzungsdatei.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Kurztest

Wie übergeben Sie einen dynamischen Wert namens 'username' an eine Übersetzungszeichenfolge mit i18next?

Zusammenfassung

Verwenden Sie {{variable}} für Interpolation, key_other/key_one für Pluralformen und key_zero für Nullformen. i18next wendet automatisch die Unicode-CLDR-Pluralregeln der jeweiligen Sprache an. Verwenden Sie context für grammatikalische Varianten.

Als Nächstes

Nächste Lektion: **Sprachumschalter und verzögertes Laden von Übersetzungen** — Sie erstellen einen Locale-Umschalter und laden Übersetzungspakete bei Bedarf.

Häufig gestellte Fragen

Ist die Lektion „Pluralisierung und Interpolation“ kostenlos?

Ja — der vollständige Text von „Pluralisierung und Interpolation“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Pluralisierung und Interpolation“?

Verarbeiten Sie an Mengen orientierte Pluralformen und fügen Sie dynamische Werte in übersetzte Zeichenfolgen ein. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Pluralisierung und Interpolation“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. react-i18next einrichten
  2. Den useTranslation-Hook verwenden
  3. Pluralisierung und Interpolation
  4. Sprachauswahl und Lazy Loading von Übersetzungen
← Zurück zu React Academy