Comment contrôler si les majuscules ou les minuscules viennent en premier lors du tri

Utilisez l'option caseFirst dans Intl.Collator pour déterminer l'ordre des casses lors du tri de chaînes

Introduction

Lorsque vous triez un tableau de chaînes qui ne diffèrent que par leur capitalisation, JavaScript doit décider quelle version vient en premier. Est-ce que apple doit venir avant Apple, ou est-ce que Apple doit venir avant apple ? Différentes applications ont des exigences différentes pour cet ordre.

Par défaut, l'ordre de tri pour les chaînes qui ne diffèrent que par la casse dépend des paramètres de locale et de sensibilité. Dans de nombreux cas, des chaînes comme apple et Apple sont traitées comme égales, rendant leur ordre imprévisible. Lorsque l'ordre de la casse est important pour votre application, vous avez besoin d'un contrôle explicite pour déterminer si les lettres majuscules ou minuscules sont triées en premier.

L'API Intl.Collator fournit une option caseFirst qui détermine l'ordre de la casse. Vous pouvez configurer le collator pour placer les lettres majuscules avant les lettres minuscules, les lettres minuscules avant les lettres majuscules, ou utiliser le comportement par défaut de la locale. Cette leçon explique comment fonctionne l'option caseFirst, quand elle a un effet, et comment l'utiliser dans des scénarios de tri pratiques.

Ce que fait l'option caseFirst

L'option caseFirst contrôle l'ordre des chaînes qui ne diffèrent que par leur capitalisation. Elle accepte trois valeurs de chaîne : "upper", "lower", ou "false".

Lorsqu'elle est définie sur "upper", les lettres majuscules sont triées avant leurs équivalents minuscules. La chaîne Apple vient avant apple.

Lorsqu'il est défini sur "lower", les lettres minuscules sont triées avant leurs équivalents majuscules. La chaîne apple vient avant Apple.

Lorsqu'il est défini sur "false" (la valeur de chaîne, pas le booléen), le collateur utilise l'ordre de casse par défaut de la locale. Il s'agit du comportement par défaut lorsque vous ne spécifiez pas l'option.

L'option caseFirst n'affecte que les chaînes identiques à l'exception de la casse. Les chaînes qui diffèrent par leurs lettres de base sont triées selon les règles alphabétiques normales, indépendamment de ce paramètre.

Fonctionnement de l'ordre de casse par défaut

Sans spécifier l'option caseFirst, le collateur utilise le comportement par défaut qui dépend de la locale et des paramètres de sensibilité.

const collator = new Intl.Collator('en-US');
const words = ['apple', 'Apple', 'APPLE'];

words.sort(collator.compare);

console.log(words);
// Output: ['apple', 'Apple', 'APPLE']

L'ordre de sortie dépend de l'implémentation et de la locale. Avec les paramètres de sensibilité par défaut, le collateur prend en compte les différences de casse, mais l'ordre spécifique de apple, Apple et APPLE varie.

Différentes locales ont différentes conventions d'ordre de casse par défaut. Certaines locales placent traditionnellement les lettres minuscules en premier, tandis que d'autres placent les lettres majuscules en premier. Se fier au comportement par défaut produit des résultats incohérents selon les différents environnements.

Placer les lettres majuscules en premier avec caseFirst upper

Définir caseFirst: "upper" garantit que les lettres majuscules viennent toujours avant leurs équivalents minuscules dans les résultats triés.

const collator = new Intl.Collator('en-US', { caseFirst: 'upper' });
const words = ['apple', 'Apple', 'banana', 'Banana'];

words.sort(collator.compare);

console.log(words);
// Output: ['Apple', 'apple', 'Banana', 'banana']

Le collateur trie d'abord alphabétiquement par lettre de base, puis applique l'ordre de casse au sein de chaque groupe. Parmi les mots commençant par a, Apple vient avant apple. Parmi les mots commençant par b, Banana vient avant banana.

Cet ordre est utile lors de l'affichage de listes où les noms propres ou les titres en majuscules doivent apparaître de manière proéminente avant les noms communs.

const collator = new Intl.Collator('en-US', { caseFirst: 'upper' });
const names = ['smith', 'Smith', 'jones', 'Jones'];

names.sort(collator.compare);

console.log(names);
// Output: ['Jones', 'jones', 'Smith', 'smith']

Les noms en majuscules apparaissent avant les versions en minuscules, ce qui facilite la distinction entre les noms propres et les mots courants dans les listes mixtes.

Placer les lettres minuscules en premier avec caseFirst lower

Définir caseFirst: "lower" garantit que les lettres minuscules apparaissent toujours avant leurs équivalents en majuscules dans les résultats triés.

const collator = new Intl.Collator('en-US', { caseFirst: 'lower' });
const words = ['apple', 'Apple', 'banana', 'Banana'];

words.sort(collator.compare);

console.log(words);
// Output: ['apple', 'Apple', 'banana', 'Banana']

Le collator trie d'abord par ordre alphabétique, puis place les versions en minuscules avant les versions en majuscules au sein de chaque groupe alphabétique.

Cet ordre correspond aux conventions où le texte en minuscules est considéré comme plus standard ou neutre, les majuscules étant réservées pour l'emphase ou les cas particuliers.

const collator = new Intl.Collator('en-US', { caseFirst: 'lower' });
const tags = ['javascript', 'JavaScript', 'python', 'Python'];

tags.sort(collator.compare);

console.log(tags);
// Output: ['javascript', 'JavaScript', 'python', 'Python']

Les balises en minuscules apparaissent en premier, ce qui est utile lorsque les minuscules représentent la forme canonique et que les versions en majuscules sont des variantes moins courantes.

Utiliser caseFirst false pour le comportement par défaut de la locale

Définir caseFirst: "false" (la valeur de chaîne) demande explicitement l'ordre de casse par défaut de la locale. Cela produit le même résultat que l'omission complète de l'option.

const collator = new Intl.Collator('en-US', { caseFirst: 'false' });
const words = ['apple', 'Apple', 'APPLE'];

words.sort(collator.compare);

console.log(words);
// Output depends on locale implementation

L'ordre de sortie dépend de ce que la locale considère comme standard. Certaines locales définissent les majuscules en premier, d'autres définissent les minuscules en premier, et certaines traitent les chaînes différant par la casse comme égales.

Cette option est utile lorsque vous souhaitez rendre explicite le fait que vous utilisez les valeurs par défaut de la locale plutôt que d'omettre accidentellement un choix de configuration.

Quand caseFirst n'a aucun effet

L'option caseFirst n'affecte la comparaison que lorsque le paramètre de sensibilité permet aux différences de casse d'avoir de l'importance. Avec sensitivity: "base" ou sensitivity: "accent", les différences de casse sont entièrement ignorées, rendant l'option caseFirst non pertinente.

const collator = new Intl.Collator('en-US', {
  sensitivity: 'base',
  caseFirst: 'upper'
});

const words = ['apple', 'Apple', 'APPLE'];

words.sort(collator.compare);

console.log(words);
// Output: ['apple', 'Apple', 'APPLE'] (or any order)

Avec la sensibilité de base, le collateur traite les trois chaînes comme égales. L'option caseFirst n'a aucun effet car la casse n'est pas du tout prise en compte. L'algorithme de tri préserve l'ordre original des éléments égaux (tri stable), donc la sortie correspond à l'ordre d'entrée.

Pour que caseFirst ait un effet, utilisez sensitivity: "case" ou sensitivity: "variant" (par défaut).

const collator = new Intl.Collator('en-US', {
  sensitivity: 'variant',
  caseFirst: 'upper'
});

const words = ['apple', 'Apple', 'APPLE'];

words.sort(collator.compare);

console.log(words);
// Output: ['APPLE', 'Apple', 'apple']

Avec la sensibilité de variante (qui prend en compte toutes les différences, y compris la casse), l'option caseFirst détermine l'ordre de ces chaînes variant en casse.

Tri des noms avec un ordre de casse cohérent

Lors du tri de noms d'utilisateurs ou d'autres noms propres, un ordre de casse cohérent garantit des résultats prévisibles dans toute votre application.

const collator = new Intl.Collator('en-US', { caseFirst: 'upper' });

const users = [
  { name: 'alice' },
  { name: 'Alice' },
  { name: 'bob' },
  { name: 'Bob' }
];

users.sort((a, b) => collator.compare(a.name, b.name));

users.forEach(user => {
  console.log(user.name);
});
// Output:
// Alice
// alice
// Bob
// bob

Le collateur place les noms en majuscules avant les versions en minuscules. Cet ordre facilite la distinction entre les noms propres et les mots communs dans les ensembles de données mixtes.

Tri des noms de fichiers avec un ordre de casse contrôlé

Les systèmes de fichiers ont des comportements différents en matière de sensibilité à la casse. Certains traitent les majuscules et les minuscules comme identiques, d'autres les traitent comme différentes. Un ordre de casse explicite garantit que vos listes de fichiers triées correspondent aux attentes des utilisateurs, quel que soit le système de fichiers sous-jacent.

const collator = new Intl.Collator('en-US', { caseFirst: 'lower' });

const files = ['README.md', 'readme.md', 'index.js', 'Index.js'];

files.sort(collator.compare);

console.log(files);
// Output: ['index.js', 'Index.js', 'readme.md', 'README.md']

Les versions en minuscules apparaissent en premier, conformément à la convention selon laquelle les noms de fichiers en minuscules sont plus standard sur les systèmes de type Unix.

Combinaison de caseFirst avec la collation numérique

L'option caseFirst fonctionne en parallèle avec d'autres options de collation comme numeric. Vous pouvez trier des chaînes contenant des nombres intégrés tout en contrôlant l'ordre de casse.

const collator = new Intl.Collator('en-US', {
  numeric: true,
  caseFirst: 'upper'
});

const items = ['item1', 'Item1', 'item2', 'Item2', 'item10', 'Item10'];

items.sort(collator.compare);

console.log(items);
// Output: ['Item1', 'item1', 'Item2', 'item2', 'Item10', 'item10']

Le collateur applique une comparaison numérique pour les portions de nombres et un ordre de casse pour les portions de lettres. Les éléments sont triés d'abord par valeur numérique (1, 2, 10), puis par casse au sein de chaque groupe numérique.

Utilisation de la clé d'extension Unicode pour caseFirst

L'option caseFirst peut également être définie via une extension Unicode dans l'identifiant de locale en utilisant la clé kf. Les valeurs d'extension sont upper, lower et false.

const collator = new Intl.Collator('en-US-u-kf-upper');
const words = ['apple', 'Apple', 'banana', 'Banana'];

words.sort(collator.compare);

console.log(words);
// Output: ['Apple', 'apple', 'Banana', 'banana']

La chaîne de locale en-US-u-kf-upper spécifie l'anglais américain avec un ordre de tri majuscules en premier. Cela produit le même résultat que de passer { caseFirst: 'upper' } dans l'objet d'options.

Lorsque l'extension Unicode et l'objet d'options spécifient tous deux caseFirst, l'objet d'options a la priorité.

const collator = new Intl.Collator('en-US-u-kf-upper', {
  caseFirst: 'lower'
});

const words = ['apple', 'Apple'];

words.sort(collator.compare);

console.log(words);
// Output: ['apple', 'Apple']

L'objet d'options spécifie caseFirst: 'lower', ce qui remplace l'extension kf-upper dans la chaîne de locale. Le collateur utilise un ordre de tri minuscules en premier.

Vérifier quelle valeur caseFirst un collateur utilise

La méthode resolvedOptions() renvoie les options réelles que le collateur utilise, y compris le paramètre caseFirst.

const collator = new Intl.Collator('en-US', { caseFirst: 'upper' });
const options = collator.resolvedOptions();

console.log(options.caseFirst);
// Output: "upper"

Cela est utile pour le débogage ou pour vérifier que votre collateur a la configuration attendue, en particulier lors de la combinaison d'extensions Unicode avec des objets d'options.

const collator = new Intl.Collator('en-US-u-kf-lower');
const options = collator.resolvedOptions();

console.log(options.caseFirst);
// Output: "lower"

Les options résolues reflètent le paramètre d'extension Unicode lorsqu'aucun objet d'options ne le remplace.

Quand utiliser chaque valeur caseFirst

Utilisez caseFirst: "upper" lorsque :

  • Vous souhaitez que les noms propres ou les titres apparaissent avant les mots communs
  • La convention de votre application traite le texte en majuscules comme plus significatif
  • Vous triez des noms où les versions en majuscules sont canoniques

Utilisez caseFirst: "lower" lorsque :

  • Vous souhaitez que le texte en minuscules apparaisse en premier comme forme standard
  • La convention de votre application traite les minuscules comme valeur par défaut et les majuscules comme spéciales
  • Vous triez des identifiants techniques où les minuscules sont plus courantes

Utilisez caseFirst: "false" lorsque :

  • Vous souhaitez suivre les conventions spécifiques à la locale
  • L'ordre des chaînes différant par la casse n'a pas d'importance pour votre application
  • Vous souhaitez indiquer explicitement que vous utilisez les valeurs par défaut plutôt que d'omettre accidentellement l'option