Select

La fonction select est un outil pour gérer la pluralisation et la sélection conditionnelle de texte dans les traductions. Elle permet de définir différentes variantes de texte en fonction de la valeur d'une variable spécifique.

Syntaxe de base

select(clé, options);

clé : Le nom de la variable sur laquelle baser la sélection (par exemple, 'count', 'fruit')
options : Un objet contenant les différentes variantes de texte

Exemples

Pluralisation

const messages = {
  youHaveMessages: select('count', {
    0: "Vous n'avez aucun message",
    1: 'Vous avez 1 message',
    other: 'Vous avez {{count}} messages',
  } as const),
};

N'oubliez pas d'utiliser as const pour l'objet options. other est une clé obligatoire pour la traduction par défaut. Dans cet exemple, le texte change en fonction de la valeur de count :

Si count est 0, il renvoie "Vous n'avez aucun message"
Si count est 1, il renvoie "Vous avez 1 message"
Pour toute autre valeur, il renvoie "Vous avez {{count}} messages", où {{count}} sera remplacé par le nombre réel

Combinaison avec d'autres variables

const greetings = {
  helloNameYouHaveMessages: select('count', {
    0: "Bonjour, {{name}}. Vous n'avez aucun message",
    1: 'Bonjour, {{name}}. Vous avez 1 message',
    other: 'Bonjour, {{name}}. Vous avez {{count}} messages',
  } as const),
};

Cet exemple combine la sélection count avec une autre variable {{name}}, permettant des traductions plus complexes.

Sélection non numérique

const preferences = {
  fruitPreference: select('fruit', {
    pomme: "J'aime les pommes",
    banane: "J'apprécie les bananes",
    other: 'Je préfère les {{fruit}}s',
  }),
};

La fonction select peut également être utilisée avec des clés non numériques. Dans ce cas, elle sélectionne en fonction de la valeur de fruit :

Si fruit est "pomme", elle renvoie "J'aime les pommes"
Si fruit est "banane", elle renvoie "J'apprécie les bananes"
Pour tout autre fruit, elle renvoie "Je préfère les {{fruit}}s", où {{fruit}} sera remplacé par le nom réel du fruit

Utilisation avec les traducteurs

Lorsqu'elle est utilisée avec une fonction de traduction, vous pouvez facilement générer le texte approprié :

const translateFr = createTranslator(messages);

translateFr(l => l.youHaveMessages({count: 0})); // "Vous n'avez aucun message"
translateFr(l => l.youHaveMessages({count: 1})); // "Vous avez 1 message"
translateFr(l => l.youHaveMessages({count: 2})); // "Vous avez 2 messages"

translateFr(l => l.helloNameYouHaveMessages({count: 1, name: 'Jo'})); // "Bonjour, Jo. Vous avez 1 message"

translateFr(l => l.fruitPreference({fruit: 'pomme'})); // "J'aime les pommes"
translateFr(l => l.fruitPreference({fruit: 'orange'})); // "Je préfère orange"

La fonction select offre une manière flexible de gérer divers scénarios de traduction, de la simple pluralisation à la sélection de texte conditionnel plus complexe.