0Pricing
React Academy · Leçon

Pluralisation et interpolation

Gérez les formes plurielles selon un nombre et insérez des valeurs dynamiques dans les chaînes traduites.

Pluralisation et interpolation est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous gérerez les formes plurielles selon une quantité et insérerez des valeurs dynamiques dans les chaînes traduites à l’aide de l’interpolation et de la prise en charge des pluriels d’i18next.

Principes de base de l’interpolation

Utilisez des doubles accolades dans vos chaînes de traduction comme espaces réservés. Transmettez un objet contenant les valeurs des variables comme deuxième argument à t().
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Plusieurs variables d’interpolation

Vous pouvez utiliser autant de variables d’interpolation que nécessaire dans une même chaîne.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

Échapper le HTML

Par défaut, i18next échappe les caractères HTML dans les valeurs interpolées. Pour afficher du HTML dans une valeur interpolée, définissez `escapeValue: false` dans la configuration d’initialisation (c’est déjà sans danger dans React, car React échappe le JSX).

Formes plurielles

i18next prend automatiquement en charge les formes plurielles. Définissez `key` pour le singulier et `key_other` (ou `key_plural`) pour le pluriel. Transmettez `count` dans l’objet d’interpolation.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

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

Règles de pluriel propres à chaque langue

Les règles de pluriel varient selon les langues. Le russe possède 4 formes plurielles et l’arabe en possède 6. i18next utilise automatiquement les règles Unicode CLDR correspondant à chaque langue. Définissez toutes les formes nécessaires dans le fichier de traduction.
// Russian (ru):
// key_one, key_few, key_many, key_other

Forme zéro

i18next prend également en charge une forme spéciale `key_zero` lorsque count vaut 0, ce qui permet d’utiliser une formulation différente (par exemple, « Aucun élément » au lieu de « 0 élément »).
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

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

Clés imbriquées avec des pluriels

Vous pouvez placer des clés plurielles dans des objets imbriqués. Utilisez la notation par points pour y accéder, comme pour les clés imbriquées ordinaires.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Formatage des dates et des nombres

i18next s’intègre à l’API Intl pour formater les dates et les nombres selon le paramètre régional. Utilisez i18n.format() ou l’extension intlify pour formater les dates dans les traductions.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Traductions selon le contexte

Utilisez l’option `context` pour les formes grammaticalement différentes selon le contexte (par exemple, les mots genrés). Définissez les variantes `key_male` et `key_female` dans le fichier de traduction.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Vérification rapide

Comment transmettre une valeur dynamique nommée « username » dans une chaîne de traduction avec i18next ?

Récapitulatif

Utilisez {{variable}} pour l’interpolation, key_other/key_one pour les pluriels et key_zero pour les formes correspondant à zéro. i18next applique automatiquement les règles de pluriel Unicode CLDR propres à chaque langue. Utilisez le contexte pour les variantes grammaticales.

À suivre

Prochaine leçon : **Sélecteur de langue et chargement des traductions à la demande** — vous créerez un sélecteur de paramètre régional et chargerez les paquets de traduction à la demande.

Questions Fréquemment Posées

La leçon « Pluralisation et interpolation » est-elle gratuite ?

Oui — le texte complet de « Pluralisation et interpolation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Pluralisation et interpolation » ?

Gérez les formes plurielles selon un nombre et insérez des valeurs dynamiques dans les chaînes traduites. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Pluralisation et interpolation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configurer react-i18next
  2. Utiliser le hook useTranslation
  3. Pluralisation et interpolation
  4. Sélecteur de langue et chargement différé des traductions
← Retour à React Academy