Comment formater les nombres ordinaux comme 1er, 2e, 3e

Introduction

Les nombres ordinaux indiquent une position ou un rang dans une séquence. En anglais, on écrit 1st, 2nd, 3rd, 4th pour décrire les positions d'arrivée dans une course ou les éléments d'une liste. Ces suffixes permettent de distinguer les nombres ordinaux des nombres cardinaux.

Différentes langues utilisent des conventions complètement différentes pour les ordinaux. L'anglais ajoute des suffixes comme st, nd, rd et th. Le français utilise des lettres en exposant comme 1er et 2e. L'allemand ajoute un point après le nombre comme 1. et 2. Le japonais préfixe les nombres avec le caractère 第. Lorsque vous codez en dur les suffixes ordinaux anglais, vous supposez que tous les utilisateurs suivent la même convention.

JavaScript fournit l'API Intl.PluralRules avec un type ordinal pour gérer ces différences automatiquement. Cette leçon explique ce que sont les nombres ordinaux, pourquoi leur formatage varie selon les langues, et comment les formater correctement pour n'importe quelle locale.

Que sont les nombres ordinaux

Les nombres ordinaux expriment une position, un rang ou un ordre dans une séquence. Ils répondent à la question « lequel » plutôt que « combien ». Les nombres 1er, 2e, 3e décrivent des positions dans une course. Premier, deuxième, troisième décrivent des éléments dans une liste.

Les nombres cardinaux expriment une quantité ou un montant. Ils répondent à la question « combien ». Les nombres 1, 2, 3 décrivent des comptes d'objets. Un, deux, trois décrivent des quantités.

La même valeur numérique sert les deux objectifs selon le contexte. Le nombre 5 est cardinal dans « 5 pommes » mais ordinal dans « 5e place ». La distinction est importante car de nombreuses langues formatent les ordinaux différemment des cardinaux.

En anglais, les ordinaux inférieurs à 10 ont des formes de mots uniques. First, second, third, fourth, fifth sont des mots distincts. Au-delà de 10, l'anglais forme les ordinaux en ajoutant des suffixes. Eleventh, twelfth, twentieth, twenty-first suivent des modèles mais nécessitent des suffixes.

Lors de l'écriture des ordinaux sous forme de chiffres plutôt que de mots, l'anglais ajoute les suffixes st, nd, rd ou th. Ces suffixes suivent des règles spécifiques basées sur les derniers chiffres du nombre.

Pourquoi le formatage des ordinaux varie selon les paramètres régionaux

Différentes langues ont développé différents systèmes pour exprimer les nombres ordinaux. Ces conventions reflètent les règles grammaticales, les systèmes d'écriture et les pratiques culturelles propres à chaque langue.

En anglais, les ordinaux utilisent quatre suffixes différents. Les nombres se terminant par 1 utilisent st, les nombres se terminant par 2 utilisent nd, les nombres se terminant par 3 utilisent rd, et tous les autres nombres utilisent th. Cependant, les nombres se terminant par 11, 12 ou 13 utilisent tous th. Cela donne 1st, 2nd, 3rd, 4th, 11th, 12th, 13th, 21st, 22nd, 23rd.

En français, les ordinaux utilisent des abréviations en exposant. Le premier élément utilise 1er pour le masculin ou 1re pour le féminin. Tous les autres ordinaux utilisent e en exposant, comme 2e, 3e, 4e. Le formatage inclut la typographie en exposant, pas seulement les lettres de suffixe.

En allemand, les ordinaux utilisent un point après le nombre. La notation 1., 2., 3. représente premier, deuxième, troisième. Ce point signale que le lecteur doit mentalement ajouter la terminaison grammaticale appropriée lors de la lecture à voix haute.

En espagnol, les ordinaux utilisent des indicateurs en exposant genrés. Les ordinaux masculins utilisent 1.º, 2.º, 3.º tandis que les ordinaux féminins utilisent 1.ª, 2.ª, 3.ª. Le point sépare le nombre de l'indicateur.

En japonais, les ordinaux ajoutent le préfixe 第 avant le nombre. Premier, deuxième, troisième apparaissent comme 第一, 第二, 第三. Ce préfixe change la signification de cardinal à ordinal.

Lorsque vous construisez des chaînes ordinales en concaténant des nombres avec des suffixes codés en dur, vous forcez tous les utilisateurs à interpréter les conventions anglaises. Cela rend votre application plus difficile à utiliser pour les personnes qui s'attendent à des formats différents.

Comprendre Intl.PluralRules avec le type ordinal

L'API Intl.PluralRules détermine à quelle catégorie plurielle appartient un nombre pour une locale donnée. Bien que cette API soit couramment utilisée pour choisir entre les formes singulières et plurielles des mots, elle gère également les nombres ordinaux.

Le constructeur accepte un identifiant de locale et un objet d'options. Définissez l'option type sur "ordinal" pour travailler avec des nombres ordinaux au lieu de nombres cardinaux.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });

Cela crée un objet de règles qui comprend les modèles ordinaux anglais. La méthode select() renvoie un nom de catégorie pour tout nombre que vous lui transmettez.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });

console.log(rules.select(1));
// Output: "one"

console.log(rules.select(2));
// Output: "two"

console.log(rules.select(3));
// Output: "few"

console.log(rules.select(4));
// Output: "other"

Les catégories renvoyées sont des termes linguistiques, pas les suffixes réels. La catégorie "one" correspond aux nombres qui prennent le suffixe st en anglais. La catégorie "two" correspond aux suffixes nd. La catégorie "few" correspond aux suffixes rd. La catégorie "other" correspond aux suffixes th.

Vous mappez ces noms de catégories aux suffixes appropriés pour votre locale. L'API gère les règles complexes permettant de déterminer à quelle catégorie appartient chaque nombre.

Créer une fonction de formatage ordinal

Pour formater les nombres ordinaux, vous combinez Intl.PluralRules avec un mappage des catégories plurielles vers les suffixes. Créez une fonction de formatage qui prend un nombre et renvoie la chaîne formatée.

function formatOrdinal(number, locale) {
  const rules = new Intl.PluralRules(locale, { type: 'ordinal' });
  const category = rules.select(number);

  const suffixes = {
    one: 'st',
    two: 'nd',
    few: 'rd',
    other: 'th'
  };

  const suffix = suffixes[category];
  return `${number}${suffix}`;
}

console.log(formatOrdinal(1, 'en-US'));
// Output: "1st"

console.log(formatOrdinal(2, 'en-US'));
// Output: "2nd"

console.log(formatOrdinal(3, 'en-US'));
// Output: "3rd"

console.log(formatOrdinal(4, 'en-US'));
// Output: "4th"

Cette fonction crée une nouvelle instance PluralRules à chaque exécution. Pour de meilleures performances, créez l'objet de règles une fois et réutilisez-le pour plusieurs nombres.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });

const suffixes = {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th'
};

function formatOrdinal(number) {
  const category = rules.select(number);
  const suffix = suffixes[category];
  return `${number}${suffix}`;
}

console.log(formatOrdinal(1));
// Output: "1st"

console.log(formatOrdinal(21));
// Output: "21st"

console.log(formatOrdinal(22));
// Output: "22nd"

console.log(formatOrdinal(23));
// Output: "23rd"

L'API gère correctement les nombres comme 11, 12 et 13, qui utilisent tous th malgré leurs derniers chiffres.

console.log(formatOrdinal(11));
// Output: "11th"

console.log(formatOrdinal(12));
// Output: "12th"

console.log(formatOrdinal(13));
// Output: "13th"

Les règles de pluralisation encodent tous les cas particuliers et exceptions pour la locale. Vous n'avez pas besoin d'écrire de logique conditionnelle pour gérer ces cas limites.

Formatage des nombres ordinaux pour différentes locales

Les catégories de pluriel et leur signification changent selon les locales. Certaines langues ont moins de catégories que l'anglais. D'autres ont des règles différentes pour déterminer quels nombres appartiennent à chaque catégorie.

Le gallois utilise un système de catégorisation différent. Les règles identifient davantage de catégories, chacune correspondant à différentes formes ordinales en gallois.

const enRules = new Intl.PluralRules('en-US', { type: 'ordinal' });
const cyRules = new Intl.PluralRules('cy', { type: 'ordinal' });

console.log(enRules.select(1));
// Output: "one"

console.log(cyRules.select(1));
// Output: "one"

console.log(enRules.select(2));
// Output: "two"

console.log(cyRules.select(2));
// Output: "two"

console.log(enRules.select(5));
// Output: "other"

console.log(cyRules.select(5));
// Output: "many"

Pour prendre en charge plusieurs locales, vous avez besoin de correspondances de suffixes différentes pour chaque locale. Les catégories restent les mêmes, mais les suffixes changent.

const ordinalSuffixes = {
  'en-US': {
    one: 'st',
    two: 'nd',
    few: 'rd',
    other: 'th'
  },
  'fr-FR': {
    one: 'er',
    other: 'e'
  }
};

function formatOrdinal(number, locale) {
  const rules = new Intl.PluralRules(locale, { type: 'ordinal' });
  const category = rules.select(number);
  const suffixes = ordinalSuffixes[locale];
  const suffix = suffixes[category] || suffixes.other;
  return `${number}${suffix}`;
}

console.log(formatOrdinal(1, 'en-US'));
// Output: "1st"

console.log(formatOrdinal(1, 'fr-FR'));
// Output: "1er"

console.log(formatOrdinal(2, 'en-US'));
// Output: "2nd"

console.log(formatOrdinal(2, 'fr-FR'));
// Output: "2e"

Cette approche fonctionne bien lorsque vous contrôlez les chaînes de suffixes pour chaque locale. Cependant, elle nécessite de maintenir des données de suffixes pour chaque locale que vous prenez en charge.

Comprendre les catégories de pluriel ordinal

L'API Intl.PluralRules utilise six noms de catégories possibles. Différentes locales utilisent différents sous-ensembles de ces catégories.

Les catégories sont zero, one, two, few, many et other. Toutes les langues ne distinguent pas les six catégories. Les ordinaux anglais n'utilisent que quatre catégories : one, two, few et other.

Les noms de catégories ne correspondent pas directement aux valeurs numériques. La catégorie "one" inclut 1, 21, 31, 41 et tous les nombres se terminant par 1 sauf 11. La catégorie "two" inclut 2, 22, 32, 42 et tous les nombres se terminant par 2 sauf 12.

Vous pouvez vérifier quelles catégories une locale utilise en appelant la méthode resolvedOptions() et en examinant la propriété pluralCategories.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });
const options = rules.resolvedOptions();

console.log(options.pluralCategories);
// Output: ["one", "two", "few", "other"]

Cela montre que les ordinaux anglais utilisent quatre catégories. D'autres langues utilisent des ensembles de catégories différents.

const rules = new Intl.PluralRules('fr-FR', { type: 'ordinal' });
const options = rules.resolvedOptions();

console.log(options.pluralCategories);
// Output: ["one", "other"]

Les ordinaux français ne distinguent que entre un et autre. Cette catégorisation plus simple reflète les règles de suffixes plus simples en français.

Formatage des nombres ordinaux pour la langue de l'utilisateur

Au lieu de coder en dur une langue spécifique, vous pouvez utiliser la langue préférée de l'utilisateur depuis le navigateur. La propriété navigator.language renvoie la préférence linguistique principale de l'utilisateur.

const userLocale = navigator.language;
const rules = new Intl.PluralRules(userLocale, { type: 'ordinal' });

const suffixes = {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th'
};

function formatOrdinal(number) {
  const category = rules.select(number);
  const suffix = suffixes[category] || suffixes.other;
  return `${number}${suffix}`;
}

console.log(formatOrdinal(1));
// Output varies by user's locale

Cette approche s'adapte automatiquement à la préférence linguistique de l'utilisateur. Cependant, vous devez toujours fournir des correspondances de suffixes appropriées pour chaque langue que votre application prend en charge.

Pour les langues sans correspondances de suffixes spécifiques, vous pouvez revenir à un comportement par défaut ou afficher le nombre sans suffixe.

function formatOrdinal(number, locale = navigator.language) {
  const rules = new Intl.PluralRules(locale, { type: 'ordinal' });
  const category = rules.select(number);

  const localeMapping = ordinalSuffixes[locale];

  if (!localeMapping) {
    return String(number);
  }

  const suffix = localeMapping[category] || localeMapping.other || '';
  return `${number}${suffix}`;
}

Cette fonction renvoie simplement le nombre lorsqu'aucune correspondance de suffixe n'existe pour la langue.

Cas d'usage courants pour les nombres ordinaux

Les nombres ordinaux apparaissent dans plusieurs contextes courants dans les interfaces utilisateur. Comprendre ces cas d'usage vous aide à décider quand formater les nombres en ordinaux.

Les classements et tableaux de scores affichent les positions des utilisateurs. Une application de jeu affiche "1re place", "2e place", "3e place" au lieu de "place 1", "place 2", "place 3".

function formatRanking(position) {
  const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });
  const category = rules.select(position);

  const suffixes = {
    one: 'st',
    two: 'nd',
    few: 'rd',
    other: 'th'
  };

  const suffix = suffixes[category];
  return `${position}${suffix} place`;
}

console.log(formatRanking(1));
// Output: "1st place"

console.log(formatRanking(42));
// Output: "42nd place"

Le formatage des dates utilise parfois des ordinaux pour le jour du mois. Certaines langues écrivent "1er janvier" au lieu de "janvier 1".

Les instructions étape par étape utilisent des ordinaux pour numéroter chaque étape. Un tutoriel affiche "1re étape : installer le logiciel", "2e étape : configurer les paramètres", "3e étape : démarrer l'application".

Les éléments de liste dans de longues séquences bénéficient du formatage ordinal lorsque l'accent sur la position importe plus que la simple énumération.

Réutilisation des objets de règles pour les performances

La création d'une nouvelle instance Intl.PluralRules implique le chargement des données de locale et le traitement des options. Lorsque vous formatez plusieurs nombres ordinaux avec la même locale, créez l'objet de règles une seule fois et réutilisez-le.

const rules = new Intl.PluralRules('en-US', { type: 'ordinal' });

const suffixes = {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th'
};

function formatOrdinal(number) {
  const category = rules.select(number);
  const suffix = suffixes[category];
  return `${number}${suffix}`;
}

const positions = [1, 2, 3, 4, 5];

positions.forEach(position => {
  console.log(formatOrdinal(position));
});
// Output:
// "1st"
// "2nd"
// "3rd"
// "4th"
// "5th"

Cette approche est plus efficace que de créer un nouvel objet de règles pour chaque nombre. La différence de performance devient significative lors du formatage de tableaux contenant des centaines ou des milliers de valeurs.

Vous pouvez également créer une factory de formateur qui retourne une fonction configurée pour une locale spécifique.

function createOrdinalFormatter(locale, suffixMapping) {
  const rules = new Intl.PluralRules(locale, { type: 'ordinal' });

  return function(number) {
    const category = rules.select(number);
    const suffix = suffixMapping[category] || suffixMapping.other || '';
    return `${number}${suffix}`;
  };
}

const formatEnglishOrdinal = createOrdinalFormatter('en-US', {
  one: 'st',
  two: 'nd',
  few: 'rd',
  other: 'th'
});

console.log(formatEnglishOrdinal(1));
// Output: "1st"

console.log(formatEnglishOrdinal(2));
// Output: "2nd"

Ce pattern encapsule l'objet de règles et le mapping des suffixes ensemble, rendant le formateur facile à réutiliser dans votre application.