Pluralisierung in React umsetzen

17. Februar 2025

Archie McKenzie

guidepluralsinternationalizationreactnextjsi18nintl

Warum Pluralisierung in React wichtig ist

Wir stoßen oft auf Apps, die unnatürliche Meldungen anzeigen wie:

Sie haben 1 neue Nachricht(en)

Das ist ein untrügliches Zeichen für eine:n Entwickler:in, der:die sich nicht sorgfältig mit der User Experience auseinandergesetzt hat.

React-Apps brauchen häufig Pluralisierung – für Benachrichtigungszähler, Listenlängen oder Suchergebnisse. Und es ist gar nicht so schwer, Pluralisierung korrekt umzusetzen, besonders wenn deine App nur Englisch unterstützen muss. Aber es gibt viele schlechte Praktiken, in die neue Entwickler:innen verfallen, insbesondere bei mehrsprachigen Interfaces.

Dieser Leitfaden behandelt, wie Sie englische Plurale sauber handhaben, Zahlen für verschiedene Locales formatieren und ein vollständig mehrsprachiges Pluralsystem in React und Next.js aufbauen.

Das Problem mit hartcodierten Pluralen

Viele Projekte – darunter überraschend große und wichtige – haben die Plurallogik hartcodiert.

export default function Example({ n }) {
  return (
    <p>
      {n} Element{n === 1 ? '' : 'e'} angezeigt
    </p>
  )
}

Aber Pluralbildung ist oft komplexer, als nur ein „s“ an das Ende eines Wortes zu hängen. Einige Substantive haben unregelmäßige Pluralformen wie „child“ und „children“. Manchmal müssen auch andere Teile des Satzes geändert werden, um das Substantiv widerzuspiegeln, zum Beispiel „is“ und „are“, die sich je nach Anzahl ändern.

Die Tabelle unten veranschaulicht einige häufige Szenarien:

Scenario	Examples	Notes
Viewer count	„1 person is watching“ „2 people are watching“	Unregelmäßiges Substantiv („person“ → „people“) und notwendige Verbänderungen.
Item deletion	„Delete this message?“ „Delete these 2 messages?“	Änderung des Demonstrativpronomens („this“ vs. „these“) plus Pluralbildung des Substantivs.
Search results	„No results“ „1 result found“ „2 results found“	Unterschiedliche Formulierungen für null, ein und mehrere Ergebnisse.

Die Verwendung von bedingten Ausdrücken wird dabei schnell unhandlich.

Und es wird zum Albtraum, wenn du deine App in anderen Sprachen ausliefern musst. Was für Englisch funktioniert, bricht in Sprachen wie Polnisch oder Arabisch oft komplett, weil sie völlig andere Regeln für die Behandlung von Mengen haben. Unternehmen, mit denen wir zusammenarbeiten, schieben Internationalisierung oft vor sich her, weil das Refactoring von hart codiertem UI wie diesem so schmerzhaft ist.

So gehen Sie mit Pluralformen im Englischen um

Im Englischen ist die Verwendung der richtigen Pluralformen in Ihrer App in der Regel unkompliziert.

Für die einfache Pluralbildung von Substantiven schreiben Sie eine Hilfsfunktion:

export function pluralize(
  count: number,
  singular: string,
  plural: string = singular + 's'
) {
  return `${count === 1 ? singular : plural}`;
}

Jetzt gibt es eine einzige Funktion, die Ihre gesamte Plurallogik abdeckt, und sie funktioniert auch für unregelmäßige Pluralformen:

pluralize(2, 'user') // "users"
pluralize(2, 'person', 'people') // "people"
pluralize(2, 'child', 'children') // "children"

Aber was ist, wenn Sie komplexere Logik benötigen, etwa:

"No one is watching"
"1 person is watching"
"2 Personen schauen zu"

In diesem Stadium sollten Sie ernsthaft über eine wartungsarme Internationalisierungsbibliothek („i18n“) nachdenken.

Obwohl Entwickler*innen oft denken, dass i18n-Bibliotheken nur für mehrsprachige Benutzeroberflächen gedacht sind, können sie auch in einsprachigen Anwendungen für Pluralformen und die Formatierung von Variablen sehr nützlich sein. Unter der Haube verwenden die meisten i18n-Bibliotheken die in JavaScript eingebaute Intl.PluralRules-API, um die korrekte Pluralform für jede beliebige Sprache zu bestimmen.

Es gibt viele React-i18n-Bibliotheken, darunter unsere gt-react (oder gt-next, wenn Sie Next.js verwenden). Die Ausgabe eines englischen Plurals mit gt-react ist einfach:

import { Plural } from 'gt-react'

function Example({ count }) {
  return (
    <Plural n={count} zero={'Niemand schaut zu'} one={`${count} Person schaut zu`}>
      {count} Personen schauen zu
    </Plural>
  )
}

Die UI wird abhängig vom Wert von n konditional gerendert.

Die meisten Bibliotheken verwenden die JavaScript-API Intl.PluralRules, um zu entscheiden, welche Pluralform angezeigt wird. Das bedeutet, dass Sie im Englischen den Bezeichner "one" für den Singular und "other" für den Plural verwenden würden. Unsere <Plural>-Komponente greift auf ihre untergeordneten Elemente zurück, wenn die an n übergebene Zahl mit keiner der bereitgestellten Props übereinstimmt.

Die Verwendung einer Bibliothek ist hier Best Practice, selbst für rein englischsprachige Anwendungen, und macht eine zukünftige Internationalisierung deutlich einfacher.

Pluralisierung in mehrsprachigen React-Apps (i18n)

Wenn Ihre App ausschließlich englischsprachige Nutzer bedient, reicht der oben gezeigte Ansatz möglicherweise aus – aber die meisten produktiven Apps müssen früher oder später mehrere Sprachen unterstützen. Dann wird es interessant.

Im Arabischen haben Substantive unterschiedliche Formen, je nachdem, ob es null, eins, zwei oder viele davon gibt
Im Spanischen, Deutschen und Italienischen werden bei großen Zahlen Punkte statt Kommata verwendet, sodass aus 1,000,000 → 1.000.000 wird
Im Hindi werden Ziffern paarweise gruppiert, daher wird aus 1,000,000 → 10,00,000

Für eine internationalisierte App sollten Sie eine spezialisierte i18n-Bibliothek verwenden, die eine eigene Dokumentation dazu hat, wie Pluralformen und Zahlenformate gehandhabt werden.

Zahlen für verschiedene Locales formatieren

Sie können das Intl-Objekt verwenden, um Zahlen zu formatieren – für jede beliebige Locale. Am einfachsten geht das mit der integrierten Methode toLocaleString().

Standardmäßig wird dabei die aktuelle Locale der Laufzeitumgebung verwendet:

const n = 1000000
n.toLocaleString() // zeigt 1,000,000 an, wenn die Laufzeit-Locale „en-US" (amerikanisches Englisch) ist
n.toLocaleString('de') // 1.000.000 because the locale has been specified as "de" (German)

gt-react bietet außerdem eine <Num>-Komponente, die intern auf Intl.NumberFormat setzt.

import { Num } from 'gt-react'

// zeigt 1,000,000 an, wenn die Sprache „en-US" ist
// zeigt 1.000.000 an, wenn die Sprache „de" ist
// zeigt 10,00,000 an, wenn die Sprache „hi" ist
export default function Example() {
  return <Num>1000000</Num>
}

Pluralformen in verschiedenen Sprachen verstehen

Die sechs Pluralformen, die von der Intl.PluralRules‑API in JavaScript unterstützt werden, sind: zero, one, two, few, many, other. Während Englisch nur one („Singular“) und other („Plural“) verwendet, kennen Sprachen wie Arabisch und Polnisch mehr als nur diese zwei Formen.

Eine englischsprachiger Nutzer*in würde zum Beispiel Folgendes erwarten:

"No one is watching"
"1 person is watching"
"2 Personen schauen zu"

Während eine arabischsprachige Nutzerin oder ein arabischsprachiger Nutzer möglicherweise unterschiedliche Ausdrücke für Singular, Dual (wenn die Anzahl genau zwei beträgt) sowie für kleine und große Pluralformen erwartet:

"لا أحد يشاهد"
"1 شخص يشاهد"
"2 شخصان يشاهدان"
"3 أشخاص يشاهدون"
"11 شخصاً يشاهدون"

Hier wird eine Internationalisierungsbibliothek unverzichtbar. Jede Sprache hat ihre eigene Logik dafür, wann und wie Pluralformen dargestellt werden, daher ist es besser, sich auf eine spezialisierte Bibliothek zu verlassen, um das korrekt zu handhaben.

Eine gute i18n‑Bibliothek erledigt zwei Dinge:

Sie entscheidet anhand des Locale, welche Pluralform (one, many, other usw.) verwendet werden soll
Sie findet die Übersetzung in der richtigen Sprache, die dieser Form entspricht

Wenn du bereits eine Internationalisierungsbibliothek verwendest, schau in deren Doku nach Informationen zur Pluralformatierung. Fast alle Bibliotheken haben eine eigene Dokumentation zum Rendern von Pluralformen.

Vollständiges Beispiel: Pluralformen in einer mehrsprachigen React-App

Wenn Sie noch keine Internationalisierungsbibliothek haben, probieren Sie gt-react aus!

Die <Plural>-Komponente von gt-react:

Ist eine einfache, deklarative Möglichkeit, Pluralformen in React korrekt zu rendern
Funktioniert nahtlos mit der <Num>-Formatierungskomponente
Funktioniert nahtlos mit der <T>-Übersetzungskomponente, die mit unserem kostenlosen Übersetzungsdienst integriert ist, um Pluralformen automatisch zu generieren

Wenn Sie alle Bausteine zusammenführen, erhalten Sie eine vollständige mehrsprachige Komponente:

import { T, Plural, Num } from 'gt-react'

// Funktioniert sofort in über 100 Sprachen
function Example({ count }) {
  return (
    <T>
      <Plural
        n={count}
        zero={'Niemand schaut zu'}
        one={
          <>
            <Num>{count}</Num> Person schaut zu
          </>
        }
      >
        <Num>{count}</Num> Personen schauen zu
      </Plural>
    </T>
  )
}

Nächste Schritte

Bereit, Pluralformen in Ihrer React-App korrekt zu behandeln? Sehen Sie sich unsere Quickstart-Anleitungen an:

gt-react Quickstart für React-Apps
gt-next Quickstart für Next.js-Apps
<Plural>-API-Referenz für die vollständige Komponenten-API

Pluralisierung gehört zu den häufigsten i18n-Herausforderungen in React – wenn Sie sie von Anfang an richtig angehen, sparen Sie sich später aufwendige Refactorings.

Zurück

Pluralisierung in React umsetzen

17. Februar 2025

Archie McKenzie

guidepluralsinternationalizationreactnextjsi18nintl

Warum Pluralisierung in React wichtig ist

Wir stoßen oft auf Apps, die unnatürliche Meldungen anzeigen wie:

Sie haben 1 neue Nachricht(en)

Das ist ein untrügliches Zeichen für eine:n Entwickler:in, der:die sich nicht sorgfältig mit der User Experience auseinandergesetzt hat.

Dieser Leitfaden behandelt, wie Sie englische Plurale sauber handhaben, Zahlen für verschiedene Locales formatieren und ein vollständig mehrsprachiges Pluralsystem in React und Next.js aufbauen.

Das Problem mit hartcodierten Pluralen

Viele Projekte – darunter überraschend große und wichtige – haben die Plurallogik hartcodiert.

export default function Example({ n }) {
  return (
    <p>
      {n} Element{n === 1 ? '' : 'e'} angezeigt
    </p>
  )
}

Die Tabelle unten veranschaulicht einige häufige Szenarien:

Scenario	Examples	Notes
Viewer count	„1 person is watching“ „2 people are watching“	Unregelmäßiges Substantiv („person“ → „people“) und notwendige Verbänderungen.
Item deletion	„Delete this message?“ „Delete these 2 messages?“	Änderung des Demonstrativpronomens („this“ vs. „these“) plus Pluralbildung des Substantivs.
Search results	„No results“ „1 result found“ „2 results found“	Unterschiedliche Formulierungen für null, ein und mehrere Ergebnisse.

Die Verwendung von bedingten Ausdrücken wird dabei schnell unhandlich.

So gehen Sie mit Pluralformen im Englischen um

Im Englischen ist die Verwendung der richtigen Pluralformen in Ihrer App in der Regel unkompliziert.

Für die einfache Pluralbildung von Substantiven schreiben Sie eine Hilfsfunktion:

export function pluralize(
  count: number,
  singular: string,
  plural: string = singular + 's'
) {
  return `${count === 1 ? singular : plural}`;
}

Jetzt gibt es eine einzige Funktion, die Ihre gesamte Plurallogik abdeckt, und sie funktioniert auch für unregelmäßige Pluralformen:

pluralize(2, 'user') // "users"
pluralize(2, 'person', 'people') // "people"
pluralize(2, 'child', 'children') // "children"

Aber was ist, wenn Sie komplexere Logik benötigen, etwa:

"No one is watching"
"1 person is watching"
"2 Personen schauen zu"

In diesem Stadium sollten Sie ernsthaft über eine wartungsarme Internationalisierungsbibliothek („i18n“) nachdenken.

Es gibt viele React-i18n-Bibliotheken, darunter unsere gt-react (oder gt-next, wenn Sie Next.js verwenden). Die Ausgabe eines englischen Plurals mit gt-react ist einfach:

import { Plural } from 'gt-react'

function Example({ count }) {
  return (
    <Plural n={count} zero={'Niemand schaut zu'} one={`${count} Person schaut zu`}>
      {count} Personen schauen zu
    </Plural>
  )
}

Die UI wird abhängig vom Wert von n konditional gerendert.

Die Verwendung einer Bibliothek ist hier Best Practice, selbst für rein englischsprachige Anwendungen, und macht eine zukünftige Internationalisierung deutlich einfacher.

Pluralisierung in mehrsprachigen React-Apps (i18n)

Im Arabischen haben Substantive unterschiedliche Formen, je nachdem, ob es null, eins, zwei oder viele davon gibt
Im Spanischen, Deutschen und Italienischen werden bei großen Zahlen Punkte statt Kommata verwendet, sodass aus 1,000,000 → 1.000.000 wird
Im Hindi werden Ziffern paarweise gruppiert, daher wird aus 1,000,000 → 10,00,000

Für eine internationalisierte App sollten Sie eine spezialisierte i18n-Bibliothek verwenden, die eine eigene Dokumentation dazu hat, wie Pluralformen und Zahlenformate gehandhabt werden.

Zahlen für verschiedene Locales formatieren

Sie können das Intl-Objekt verwenden, um Zahlen zu formatieren – für jede beliebige Locale. Am einfachsten geht das mit der integrierten Methode toLocaleString().

Standardmäßig wird dabei die aktuelle Locale der Laufzeitumgebung verwendet:

const n = 1000000
n.toLocaleString() // zeigt 1,000,000 an, wenn die Laufzeit-Locale „en-US" (amerikanisches Englisch) ist
n.toLocaleString('de') // 1.000.000 because the locale has been specified as "de" (German)

gt-react bietet außerdem eine <Num>-Komponente, die intern auf Intl.NumberFormat setzt.

import { Num } from 'gt-react'

// zeigt 1,000,000 an, wenn die Sprache „en-US" ist
// zeigt 1.000.000 an, wenn die Sprache „de" ist
// zeigt 10,00,000 an, wenn die Sprache „hi" ist
export default function Example() {
  return <Num>1000000</Num>
}

Pluralformen in verschiedenen Sprachen verstehen

Eine englischsprachiger Nutzer*in würde zum Beispiel Folgendes erwarten:

"No one is watching"
"1 person is watching"
"2 Personen schauen zu"

"لا أحد يشاهد"
"1 شخص يشاهد"
"2 شخصان يشاهدان"
"3 أشخاص يشاهدون"
"11 شخصاً يشاهدون"

Eine gute i18n‑Bibliothek erledigt zwei Dinge:

Sie entscheidet anhand des Locale, welche Pluralform (one, many, other usw.) verwendet werden soll
Sie findet die Übersetzung in der richtigen Sprache, die dieser Form entspricht

Vollständiges Beispiel: Pluralformen in einer mehrsprachigen React-App

Wenn Sie noch keine Internationalisierungsbibliothek haben, probieren Sie gt-react aus!

Die <Plural>-Komponente von gt-react:

Ist eine einfache, deklarative Möglichkeit, Pluralformen in React korrekt zu rendern
Funktioniert nahtlos mit der <Num>-Formatierungskomponente
Funktioniert nahtlos mit der <T>-Übersetzungskomponente, die mit unserem kostenlosen Übersetzungsdienst integriert ist, um Pluralformen automatisch zu generieren

Wenn Sie alle Bausteine zusammenführen, erhalten Sie eine vollständige mehrsprachige Komponente:

import { T, Plural, Num } from 'gt-react'

// Funktioniert sofort in über 100 Sprachen
function Example({ count }) {
  return (
    <T>
      <Plural
        n={count}
        zero={'Niemand schaut zu'}
        one={
          <>
            <Num>{count}</Num> Person schaut zu
          </>
        }
      >
        <Num>{count}</Num> Personen schauen zu
      </Plural>
    </T>
  )
}

Nächste Schritte

Bereit, Pluralformen in Ihrer React-App korrekt zu behandeln? Sehen Sie sich unsere Quickstart-Anleitungen an:

gt-react Quickstart für React-Apps
gt-next Quickstart für Next.js-Apps
<Plural>-API-Referenz für die vollständige Komponenten-API

Pluralisierung gehört zu den häufigsten i18n-Herausforderungen in React – wenn Sie sie von Anfang an richtig angehen, sparen Sie sich später aufwendige Refactorings.

Zurück

Pluralisierung in React umsetzen

17. Februar 2025

Archie McKenzie

guidepluralsinternationalizationreactnextjsi18nintl

Warum Pluralisierung in React wichtig ist

Wir stoßen oft auf Apps, die unnatürliche Meldungen anzeigen wie:

Sie haben 1 neue Nachricht(en)

Das ist ein untrügliches Zeichen für eine:n Entwickler:in, der:die sich nicht sorgfältig mit der User Experience auseinandergesetzt hat.

Dieser Leitfaden behandelt, wie Sie englische Plurale sauber handhaben, Zahlen für verschiedene Locales formatieren und ein vollständig mehrsprachiges Pluralsystem in React und Next.js aufbauen.

Das Problem mit hartcodierten Pluralen

Viele Projekte – darunter überraschend große und wichtige – haben die Plurallogik hartcodiert.

export default function Example({ n }) {
  return (
    <p>
      {n} Element{n === 1 ? '' : 'e'} angezeigt
    </p>
  )
}

Die Tabelle unten veranschaulicht einige häufige Szenarien:

Scenario	Examples	Notes
Viewer count	„1 person is watching“ „2 people are watching“	Unregelmäßiges Substantiv („person“ → „people“) und notwendige Verbänderungen.
Item deletion	„Delete this message?“ „Delete these 2 messages?“	Änderung des Demonstrativpronomens („this“ vs. „these“) plus Pluralbildung des Substantivs.
Search results	„No results“ „1 result found“ „2 results found“	Unterschiedliche Formulierungen für null, ein und mehrere Ergebnisse.

Die Verwendung von bedingten Ausdrücken wird dabei schnell unhandlich.

So gehen Sie mit Pluralformen im Englischen um

Im Englischen ist die Verwendung der richtigen Pluralformen in Ihrer App in der Regel unkompliziert.

Für die einfache Pluralbildung von Substantiven schreiben Sie eine Hilfsfunktion:

export function pluralize(
  count: number,
  singular: string,
  plural: string = singular + 's'
) {
  return `${count === 1 ? singular : plural}`;
}

Jetzt gibt es eine einzige Funktion, die Ihre gesamte Plurallogik abdeckt, und sie funktioniert auch für unregelmäßige Pluralformen:

pluralize(2, 'user') // "users"
pluralize(2, 'person', 'people') // "people"
pluralize(2, 'child', 'children') // "children"

Aber was ist, wenn Sie komplexere Logik benötigen, etwa:

"No one is watching"
"1 person is watching"
"2 Personen schauen zu"

In diesem Stadium sollten Sie ernsthaft über eine wartungsarme Internationalisierungsbibliothek („i18n“) nachdenken.

Es gibt viele React-i18n-Bibliotheken, darunter unsere gt-react (oder gt-next, wenn Sie Next.js verwenden). Die Ausgabe eines englischen Plurals mit gt-react ist einfach:

import { Plural } from 'gt-react'

function Example({ count }) {
  return (
    <Plural n={count} zero={'Niemand schaut zu'} one={`${count} Person schaut zu`}>
      {count} Personen schauen zu
    </Plural>
  )
}

Die UI wird abhängig vom Wert von n konditional gerendert.

Die Verwendung einer Bibliothek ist hier Best Practice, selbst für rein englischsprachige Anwendungen, und macht eine zukünftige Internationalisierung deutlich einfacher.

Pluralisierung in mehrsprachigen React-Apps (i18n)

Im Arabischen haben Substantive unterschiedliche Formen, je nachdem, ob es null, eins, zwei oder viele davon gibt
Im Spanischen, Deutschen und Italienischen werden bei großen Zahlen Punkte statt Kommata verwendet, sodass aus 1,000,000 → 1.000.000 wird
Im Hindi werden Ziffern paarweise gruppiert, daher wird aus 1,000,000 → 10,00,000

Für eine internationalisierte App sollten Sie eine spezialisierte i18n-Bibliothek verwenden, die eine eigene Dokumentation dazu hat, wie Pluralformen und Zahlenformate gehandhabt werden.

Zahlen für verschiedene Locales formatieren

Sie können das Intl-Objekt verwenden, um Zahlen zu formatieren – für jede beliebige Locale. Am einfachsten geht das mit der integrierten Methode toLocaleString().

Standardmäßig wird dabei die aktuelle Locale der Laufzeitumgebung verwendet:

const n = 1000000
n.toLocaleString() // zeigt 1,000,000 an, wenn die Laufzeit-Locale „en-US" (amerikanisches Englisch) ist
n.toLocaleString('de') // 1.000.000 because the locale has been specified as "de" (German)

gt-react bietet außerdem eine <Num>-Komponente, die intern auf Intl.NumberFormat setzt.

import { Num } from 'gt-react'

// zeigt 1,000,000 an, wenn die Sprache „en-US" ist
// zeigt 1.000.000 an, wenn die Sprache „de" ist
// zeigt 10,00,000 an, wenn die Sprache „hi" ist
export default function Example() {
  return <Num>1000000</Num>
}

Pluralformen in verschiedenen Sprachen verstehen

Eine englischsprachiger Nutzer*in würde zum Beispiel Folgendes erwarten:

"No one is watching"
"1 person is watching"
"2 Personen schauen zu"

"لا أحد يشاهد"
"1 شخص يشاهد"
"2 شخصان يشاهدان"
"3 أشخاص يشاهدون"
"11 شخصاً يشاهدون"

Eine gute i18n‑Bibliothek erledigt zwei Dinge:

Sie entscheidet anhand des Locale, welche Pluralform (one, many, other usw.) verwendet werden soll
Sie findet die Übersetzung in der richtigen Sprache, die dieser Form entspricht

Vollständiges Beispiel: Pluralformen in einer mehrsprachigen React-App

Wenn Sie noch keine Internationalisierungsbibliothek haben, probieren Sie gt-react aus!

Die <Plural>-Komponente von gt-react:

Ist eine einfache, deklarative Möglichkeit, Pluralformen in React korrekt zu rendern
Funktioniert nahtlos mit der <Num>-Formatierungskomponente
Funktioniert nahtlos mit der <T>-Übersetzungskomponente, die mit unserem kostenlosen Übersetzungsdienst integriert ist, um Pluralformen automatisch zu generieren

Wenn Sie alle Bausteine zusammenführen, erhalten Sie eine vollständige mehrsprachige Komponente:

import { T, Plural, Num } from 'gt-react'

// Funktioniert sofort in über 100 Sprachen
function Example({ count }) {
  return (
    <T>
      <Plural
        n={count}
        zero={'Niemand schaut zu'}
        one={
          <>
            <Num>{count}</Num> Person schaut zu
          </>
        }
      >
        <Num>{count}</Num> Personen schauen zu
      </Plural>
    </T>
  )
}

Nächste Schritte

Bereit, Pluralformen in Ihrer React-App korrekt zu behandeln? Sehen Sie sich unsere Quickstart-Anleitungen an:

gt-react Quickstart für React-Apps
gt-next Quickstart für Next.js-Apps
<Plural>-API-Referenz für die vollständige Komponenten-API

Pluralisierung gehört zu den häufigsten i18n-Herausforderungen in React – wenn Sie sie von Anfang an richtig angehen, sparen Sie sich später aufwendige Refactorings.

Zurück

Pluralisierung in React umsetzen

17. Februar 2025

Archie McKenzie

guidepluralsinternationalizationreactnextjsi18nintl

Warum Pluralisierung in React wichtig ist

Wir stoßen oft auf Apps, die unnatürliche Meldungen anzeigen wie:

Sie haben 1 neue Nachricht(en)

Das ist ein untrügliches Zeichen für eine:n Entwickler:in, der:die sich nicht sorgfältig mit der User Experience auseinandergesetzt hat.

Dieser Leitfaden behandelt, wie Sie englische Plurale sauber handhaben, Zahlen für verschiedene Locales formatieren und ein vollständig mehrsprachiges Pluralsystem in React und Next.js aufbauen.

Das Problem mit hartcodierten Pluralen

Viele Projekte – darunter überraschend große und wichtige – haben die Plurallogik hartcodiert.

export default function Example({ n }) {
  return (
    <p>
      {n} Element{n === 1 ? '' : 'e'} angezeigt
    </p>
  )
}

Die Tabelle unten veranschaulicht einige häufige Szenarien:

Scenario	Examples	Notes
Viewer count	„1 person is watching“ „2 people are watching“	Unregelmäßiges Substantiv („person“ → „people“) und notwendige Verbänderungen.
Item deletion	„Delete this message?“ „Delete these 2 messages?“	Änderung des Demonstrativpronomens („this“ vs. „these“) plus Pluralbildung des Substantivs.
Search results	„No results“ „1 result found“ „2 results found“	Unterschiedliche Formulierungen für null, ein und mehrere Ergebnisse.

Die Verwendung von bedingten Ausdrücken wird dabei schnell unhandlich.

So gehen Sie mit Pluralformen im Englischen um

Im Englischen ist die Verwendung der richtigen Pluralformen in Ihrer App in der Regel unkompliziert.

Für die einfache Pluralbildung von Substantiven schreiben Sie eine Hilfsfunktion:

export function pluralize(
  count: number,
  singular: string,
  plural: string = singular + 's'
) {
  return `${count === 1 ? singular : plural}`;
}

Jetzt gibt es eine einzige Funktion, die Ihre gesamte Plurallogik abdeckt, und sie funktioniert auch für unregelmäßige Pluralformen:

pluralize(2, 'user') // "users"
pluralize(2, 'person', 'people') // "people"
pluralize(2, 'child', 'children') // "children"

Aber was ist, wenn Sie komplexere Logik benötigen, etwa:

"No one is watching"
"1 person is watching"
"2 Personen schauen zu"

In diesem Stadium sollten Sie ernsthaft über eine wartungsarme Internationalisierungsbibliothek („i18n“) nachdenken.

Es gibt viele React-i18n-Bibliotheken, darunter unsere gt-react (oder gt-next, wenn Sie Next.js verwenden). Die Ausgabe eines englischen Plurals mit gt-react ist einfach:

import { Plural } from 'gt-react'

function Example({ count }) {
  return (
    <Plural n={count} zero={'Niemand schaut zu'} one={`${count} Person schaut zu`}>
      {count} Personen schauen zu
    </Plural>
  )
}

Die UI wird abhängig vom Wert von n konditional gerendert.

Die Verwendung einer Bibliothek ist hier Best Practice, selbst für rein englischsprachige Anwendungen, und macht eine zukünftige Internationalisierung deutlich einfacher.

Pluralisierung in mehrsprachigen React-Apps (i18n)

Im Arabischen haben Substantive unterschiedliche Formen, je nachdem, ob es null, eins, zwei oder viele davon gibt
Im Spanischen, Deutschen und Italienischen werden bei großen Zahlen Punkte statt Kommata verwendet, sodass aus 1,000,000 → 1.000.000 wird
Im Hindi werden Ziffern paarweise gruppiert, daher wird aus 1,000,000 → 10,00,000

Für eine internationalisierte App sollten Sie eine spezialisierte i18n-Bibliothek verwenden, die eine eigene Dokumentation dazu hat, wie Pluralformen und Zahlenformate gehandhabt werden.

Zahlen für verschiedene Locales formatieren

Sie können das Intl-Objekt verwenden, um Zahlen zu formatieren – für jede beliebige Locale. Am einfachsten geht das mit der integrierten Methode toLocaleString().

Standardmäßig wird dabei die aktuelle Locale der Laufzeitumgebung verwendet:

const n = 1000000
n.toLocaleString() // zeigt 1,000,000 an, wenn die Laufzeit-Locale „en-US" (amerikanisches Englisch) ist
n.toLocaleString('de') // 1.000.000 because the locale has been specified as "de" (German)

gt-react bietet außerdem eine <Num>-Komponente, die intern auf Intl.NumberFormat setzt.

import { Num } from 'gt-react'

// zeigt 1,000,000 an, wenn die Sprache „en-US" ist
// zeigt 1.000.000 an, wenn die Sprache „de" ist
// zeigt 10,00,000 an, wenn die Sprache „hi" ist
export default function Example() {
  return <Num>1000000</Num>
}

Pluralformen in verschiedenen Sprachen verstehen

Eine englischsprachiger Nutzer*in würde zum Beispiel Folgendes erwarten:

"No one is watching"
"1 person is watching"
"2 Personen schauen zu"

"لا أحد يشاهد"
"1 شخص يشاهد"
"2 شخصان يشاهدان"
"3 أشخاص يشاهدون"
"11 شخصاً يشاهدون"

Eine gute i18n‑Bibliothek erledigt zwei Dinge:

Sie entscheidet anhand des Locale, welche Pluralform (one, many, other usw.) verwendet werden soll
Sie findet die Übersetzung in der richtigen Sprache, die dieser Form entspricht

Vollständiges Beispiel: Pluralformen in einer mehrsprachigen React-App

Wenn Sie noch keine Internationalisierungsbibliothek haben, probieren Sie gt-react aus!

Die <Plural>-Komponente von gt-react:

Ist eine einfache, deklarative Möglichkeit, Pluralformen in React korrekt zu rendern
Funktioniert nahtlos mit der <Num>-Formatierungskomponente
Funktioniert nahtlos mit der <T>-Übersetzungskomponente, die mit unserem kostenlosen Übersetzungsdienst integriert ist, um Pluralformen automatisch zu generieren

Wenn Sie alle Bausteine zusammenführen, erhalten Sie eine vollständige mehrsprachige Komponente:

import { T, Plural, Num } from 'gt-react'

// Funktioniert sofort in über 100 Sprachen
function Example({ count }) {
  return (
    <T>
      <Plural
        n={count}
        zero={'Niemand schaut zu'}
        one={
          <>
            <Num>{count}</Num> Person schaut zu
          </>
        }
      >
        <Num>{count}</Num> Personen schauen zu
      </Plural>
    </T>
  )
}

Nächste Schritte

Bereit, Pluralformen in Ihrer React-App korrekt zu behandeln? Sehen Sie sich unsere Quickstart-Anleitungen an:

gt-react Quickstart für React-Apps
gt-next Quickstart für Next.js-Apps
<Plural>-API-Referenz für die vollständige Komponenten-API

Pluralisierung gehört zu den häufigsten i18n-Herausforderungen in React – wenn Sie sie von Anfang an richtig angehen, sparen Sie sich später aufwendige Refactorings.

Auf dieser Seite

Auf dieser Seite

Auf dieser Seite

Auf dieser Seite