Pluralisation et messages liés
Règles de pluriel avec la syntaxe @:key|@:key, pluriel fondé sur la quantité et messages liés avec @:path
Pluralisation et messages liés est une leçon Vue 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Le comptage dépend de la langue
« 1 élément », mais « 5 éléments » — et certaines langues ont encore davantage de formes. Coder les pluriels en dur produit des chaînes maladroites comme « 5 élément(s) ». Vue I18n possède une gestion intégrée du pluriel pour choisir la forme adaptée à une quantité.
Formes plurielles séparées par une barre verticale
Écrivez les formes dans une seule chaîne de message, séparées par le caractère barre verticale (|). En anglais, deux ou trois formes sont courantes.
const en = {
items: "no items | one item | {count} items",
}Sélectionner un pluriel avec une quantité
Passez un nombre comme deuxième argument à t. Vue I18n choisit la forme correspondante en fonction de la quantité.
const { t } = useI18n()
t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"La règle de pluriel par défaut
Avec trois formes, la règle est la suivante : 0 utilise la première, 1 utilise la deuxième et toute autre valeur utilise la troisième. Avec deux formes, zéro et les quantités multiples sont regroupés.
const en = {
// two-form version: 0 and N share the plural
files: "no file | one file | {count} files",
}L’espace réservé {count}
Dans un message pluriel, l’espace réservé spécial {count} (ou {n}) est rempli avec le nombre fourni, ce qui vous permet d’afficher la quantité.
const en = { photos: "no photos | {count} photo | {count} photos" }
t("photos", 3) // "3 photos"Les pluriels dans les modèles
Dans les modèles, utilisez $t avec la quantité comme deuxième argument, comme dans le script.
<template>
<p>{{ $t("items", cartCount) }}</p>
</template>Combiner quantité et valeurs nommées
Vous pouvez transmettre à la fois une quantité et des espaces réservés nommés en fournissant la quantité ainsi qu’un objet de valeurs.
const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }
t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)Que sont les messages liés ?
Parfois, une traduction doit en intégrer une autre pour éviter les répétitions. Les messages liés font référence à une autre clé avec la syntaxe @:.
const en = {
brand: "Acme",
welcome: "Welcome to @:brand",
}Résoudre un lien
Lorsque vous traduisez welcome, le jeton @:brand est remplacé par la valeur traduite de brand. Modifiez brand une seule fois et chaque message lié est mis à jour.
t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect itCréer des liens avec des clés imbriquées
Les liens fonctionnent également avec des clés imbriquées séparées par des points. Entourez de parenthèses les références composées de plusieurs mots lorsque cela est nécessaire.
const en = {
app: { name: "MyApp" },
footer: "Thanks for using @:(app.name)",
}Modificateurs des liens
Les messages liés acceptent des modificateurs comme @.upper pour transformer la valeur liée (en majuscules, en minuscules ou avec une majuscule initiale).
const en = {
brand: "acme",
banner: "@.upper:brand sale!", // "ACME sale!"
}Vérification rapide
Vérifiez votre compréhension des pluriels et des liens.
Récapitulatif
Vous avez appris les pluriels et la réutilisation des messages :
- Séparez les formes plurielles avec
|:"no items | one item | {count} items". - Passez une quantité à
t(key, count)pour choisir la forme adaptée. - L’espace réservé
{count}affiche la quantité. - Les messages liés réutilisent une autre clé via
@:otherKey(avec@:(nested.key)pour les clés imbriquées). - Les modificateurs comme
@.uppertransforment la valeur liée.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Pluralisation et messages liés » est-elle gratuite ?
Oui — le texte complet de « Pluralisation et messages liés » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Pluralisation et messages liés » ?
Règles de pluriel avec la syntaxe @:key|@:key, pluriel fondé sur la quantité et messages liés avec @:path Tu pratiques Vue 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 Vue Academy ?
Aucune expérience préalable n'est requise. Vue 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 messages liés » ?
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 Vue Academy ?
Oui. Chaque leçon Vue 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
- Configurer vue-i18n et les fichiers de messages
- Composable useI18n et fonction t()
- Pluralisation et messages liés
- Formatage des nombres, dates et devises