Comment convertir du texte en majuscules ou minuscules selon les règles locales

Utiliser JavaScript pour changer correctement la casse du texte pour différentes langues et systèmes d'écriture

Introduction

Lorsque vous convertissez du texte entre majuscules et minuscules, vous pourriez supposer que cette opération fonctionne de la même manière pour toutes les langues. Ce n'est pas le cas. Différents systèmes d'écriture suivent différentes règles de conversion de casse, et ces règles peuvent produire des résultats inattendus si vous n'en tenez pas compte.

JavaScript fournit les méthodes standard toUpperCase() et toLowerCase(), qui fonctionnent correctement pour l'anglais mais peuvent produire des résultats incorrects pour d'autres langues. Les méthodes adaptées aux paramètres régionaux toLocaleUpperCase() et toLocaleLowerCase() appliquent des règles de conversion de casse spécifiques à chaque langue, garantissant que le texte se transforme correctement quelle que soit la langue.

Cette leçon explique pourquoi la conversion de casse varie selon les langues, démontre les problèmes spécifiques qui surviennent avec les méthodes standard, et montre comment utiliser les méthodes adaptées aux paramètres régionaux pour gérer correctement la conversion de casse dans les applications internationales.

Pourquoi la conversion de casse varie selon les paramètres régionaux

Les versions majuscules et minuscules des lettres ne sont pas des concepts universels qui fonctionnent de manière identique dans tous les systèmes d'écriture. Différentes langues ont développé différentes règles pour la conversion de casse basées sur leurs conventions d'écriture historiques et leurs pratiques typographiques.

En anglais, la conversion de casse est simple. La lettre i devient I en majuscule, et I devient i en minuscule. Cette relation est valable pour tout l'alphabet anglais.

D'autres langues ont des règles plus complexes. Le turc possède quatre caractères distincts pour la lettre i au lieu de deux. L'allemand a la lettre ß (eszett), qui a des règles spécifiques pour la conversion en majuscules. Le grec a différentes formes de la lettre sigma selon qu'elle apparaît à la fin d'un mot ou non.

Lorsque vous utilisez des méthodes JavaScript standard comme toUpperCase() et toLowerCase(), la conversion suit les règles anglaises. Cela produit des résultats incorrects pour le texte dans d'autres langues. Les méthodes adaptées aux paramètres régionaux appliquent les règles appropriées pour chaque langue, assurant une conversion correcte.

Le problème du i turc

Le turc fournit l'exemple le plus clair de l'importance de la locale pour la conversion de casse. Contrairement à l'anglais, le turc possède quatre lettres distinctes liées au i :

  • i minuscule avec point : i (U+0069)
  • İ majuscule avec point : İ (U+0130)
  • ı minuscule sans point : ı (U+0131)
  • I majuscule sans point : I (U+0049)

En turc, le i minuscule avec point devient le İ majuscule avec point. Le ı minuscule sans point devient le I majuscule sans point. Ce sont deux paires de lettres distinctes avec des prononciations et des significations différentes.

Les méthodes JavaScript standard suivent les règles anglaises et convertissent le i avec point en I sans point. Cela change le sens des mots turcs et produit un texte incorrect.

const turkish = "istanbul";

console.log(turkish.toUpperCase());
// Résultat : "ISTANBUL" (incorrect - utilise I sans point)

console.log(turkish.toLocaleUpperCase("tr"));
// Résultat : "İSTANBUL" (correct - utilise İ avec point)

Le nom de la ville Istanbul contient le caractère i avec point. Lorsqu'il est converti en majuscules selon les règles turques, il devient İSTANBUL avec un İ avec point. L'utilisation de toUpperCase() standard produit ISTANBUL avec un I sans point, ce qui est incorrect en turc.

Le même problème se produit à l'inverse lors de la conversion de texte turc en majuscules vers les minuscules.

const uppercase = "İSTANBUL";

console.log(uppercase.toLowerCase());
// Résultat : "i̇stanbul" (incorrect - crée un i avec point combiné au-dessus)

console.log(uppercase.toLocaleLowerCase("tr"));
// Résultat : "istanbul" (correct - produit un i avec point)

Le İ avec point devrait devenir le i avec point lorsqu'il est mis en minuscules en turc. La méthode standard toLowerCase() ne gère pas cela correctement et peut produire un i minuscule avec un caractère de point combiné, qui semble similaire mais est techniquement incorrect.

Autres règles de casse spécifiques aux locales

Le turc n'est pas la seule langue avec des règles de conversion de casse spéciales. Plusieurs autres langues nécessitent un traitement spécifique à la locale.

L'allemand a la lettre ß (eszett), qui traditionnellement n'avait pas de forme majuscule. En 2017, Unicode a ajouté le caractère ẞ majuscule, mais de nombreux systèmes convertissent encore ß en SS lors de la mise en majuscules.

const german = "Straße";

console.log(german.toUpperCase());
// Résultat : "STRASSE" (convertit ß en SS)

console.log(german.toLocaleUpperCase("de"));
// Résultat : "STRASSE" (convertit également ß en SS)

Les deux méthodes produisent le même résultat pour le texte allemand dans la plupart des environnements JavaScript. Le paramètre de locale ne change pas le résultat, mais l'utilisation de la méthode adaptée à la locale garantit que votre code reste correct si la gestion Unicode change dans les implémentations futures.

Le grec a trois formes différentes de la lettre sigma. La forme minuscule utilise σ au milieu des mots et ς à la fin des mots. Les deux formes se convertissent en la même majuscule Σ.

Le lituanien a des règles spéciales pour les lettres avec point. La lettre i conserve son point lorsqu'elle est combinée avec certains signes diacritiques, même lorsqu'elle est mise en majuscules. Cela affecte la façon dont les méthodes adaptées à la locale gèrent des combinaisons de caractères spécifiques.

Utilisation de toLocaleUpperCase pour la conversion en majuscules adaptée à la locale

La méthode toLocaleUpperCase() convertit une chaîne en majuscules en utilisant les règles de conversion propres à la locale. Vous l'appelez sur une chaîne et vous pouvez éventuellement passer un identifiant de locale comme argument.

const text = "istanbul";

const result = text.toLocaleUpperCase("tr");
console.log(result);
// Résultat : "İSTANBUL"

Cela convertit la chaîne en majuscules en utilisant les règles turques. Le i avec point devient le İ avec point, ce qui est correct en turc.

Vous pouvez convertir le même texte en utilisant différentes règles de locale.

const text = "istanbul";

console.log(text.toLocaleUpperCase("tr"));
// Résultat : "İSTANBUL" (règles turques - İ avec point)

console.log(text.toLocaleUpperCase("en"));
// Résultat : "ISTANBUL" (règles anglaises - I sans point)

Le paramètre de locale détermine quelles règles de conversion s'appliquent. Les règles turques préservent le point sur le i, tandis que les règles anglaises ne le font pas.

Si vous appelez toLocaleUpperCase() sans arguments, la méthode utilise la locale système déterminée par l'environnement d'exécution JavaScript.

const text = "istanbul";

const result = text.toLocaleUpperCase();
console.log(result);
// Le résultat dépend de la locale système

Le résultat dépend de la locale par défaut de l'environnement JavaScript, qui correspond généralement aux paramètres du système d'exploitation de l'utilisateur.

Utilisation de toLocaleLowerCase pour la conversion en minuscules adaptée à la locale

La méthode toLocaleLowerCase() convertit une chaîne en minuscules en utilisant les règles de conversion propres à la locale. Elle fonctionne de la même manière que toLocaleUpperCase() mais convertit en minuscules au lieu de majuscules.

const text = "İSTANBUL";

const result = text.toLocaleLowerCase("tr");
console.log(result);
// Résultat : "istanbul"

Cela convertit le texte turc en majuscules en minuscules en utilisant les règles turques. Le İ avec point devient le i avec point, produisant la forme correcte en minuscules.

Sans le paramètre de locale, les méthodes standard toLowerCase() ou toLocaleLowerCase() avec les paramètres de locale par défaut peuvent ne pas traiter correctement les caractères turcs.

const text = "İSTANBUL";

console.log(text.toLowerCase());
// Résultat : "i̇stanbul" (incorrect - i avec point combiné au-dessus)

console.log(text.toLocaleLowerCase("tr"));
// Résultat : "istanbul" (correct - i avec point)

Le İ turc avec point nécessite les règles de casse turques pour être converti correctement. L'utilisation de la méthode adaptée à la locale avec la locale tr garantit une conversion correcte.

Vous pouvez également gérer le I sans point en turc, qui doit rester sans point lorsqu'il est mis en minuscules.

const text = "IRAK";

console.log(text.toLocaleLowerCase("tr"));
// Résultat : "ırak" (règles turques - ı sans point)

console.log(text.toLocaleLowerCase("en"));
// Résultat : "irak" (règles anglaises - i avec point)

Le mot IRAK (Irak en turc) utilise le I sans point. Les règles de casse turques le convertissent en ı sans point en minuscules, tandis que les règles anglaises le convertissent en i avec point.

Spécification des identifiants de locale

Les méthodes toLocaleUpperCase() et toLocaleLowerCase() acceptent des identifiants de locale au format BCP 47. Ce sont les mêmes balises de langue utilisées dans toute l'API Intl et d'autres fonctionnalités d'internationalisation.

const text = "Straße";

console.log(text.toLocaleUpperCase("de-DE"));
// Résultat : "STRASSE"

console.log(text.toLocaleUpperCase("de-AT"));
// Résultat : "STRASSE"

console.log(text.toLocaleUpperCase("de-CH"));
// Résultat : "STRASSE"

Ces exemples utilisent différentes locales allemandes pour l'Allemagne, l'Autriche et la Suisse. Les règles de conversion de casse sont généralement cohérentes entre les variantes régionales d'une même langue, donc les trois produisent le même résultat.

Vous pouvez également passer un tableau d'identifiants de locale. La méthode utilise la première locale du tableau.

const text = "istanbul";

const result = text.toLocaleUpperCase(["tr", "en"]);
console.log(result);
// Résultat : "İSTANBUL"

La méthode applique les règles turques car tr est la première locale dans le tableau. Si l'environnement d'exécution ne prend pas en charge la première locale, il se rabat sur les locales suivantes dans le tableau.

Utilisation des préférences de locale du navigateur

Dans les applications web, vous pouvez utiliser les préférences de locale du navigateur de l'utilisateur pour déterminer quelles règles de conversion de casse appliquer. La propriété navigator.language renvoie la langue préférée de l'utilisateur.

const userLocale = navigator.language;

const text = "istanbul";
const result = text.toLocaleUpperCase(userLocale);

console.log(result);
// Le résultat varie selon la locale de l'utilisateur
// Pour les utilisateurs turcs : "İSTANBUL"
// Pour les utilisateurs anglais : "ISTANBUL"

Cela applique automatiquement les règles de casse correctes en fonction des paramètres de langue de l'utilisateur. Les utilisateurs turcs voient le texte converti selon les règles turques, les utilisateurs anglais voient le texte converti selon les règles anglaises, et ainsi de suite.

Vous pouvez également passer le tableau complet des préférences de locale pour activer le comportement de repli.

const text = "istanbul";
const result = text.toLocaleUpperCase(navigator.languages);

console.log(result);

La méthode utilise la première locale des préférences de l'utilisateur, offrant une meilleure gestion du repli lorsque des locales spécifiques ne sont pas disponibles.

Comparaison des méthodes standard et adaptées aux paramètres régionaux

Les méthodes standard toUpperCase() et toLowerCase() fonctionnent correctement pour l'anglais mais peuvent échouer pour d'autres langues. Les méthodes adaptées aux paramètres régionaux toLocaleUpperCase() et toLocaleLowerCase() gèrent correctement toutes les langues en appliquant des règles spécifiques à chaque locale.

const turkish = "Diyarbakır";

// Méthodes standard (incorrectes pour le turc)
console.log(turkish.toUpperCase());
// Résultat : "DIYARBAKIR" (I sans point - incorrect)

console.log(turkish.toUpperCase().toLowerCase());
// Résultat : "diyarbakir" (i avec point - perte du ı sans point)

// Méthodes adaptées aux paramètres régionaux (correctes pour le turc)
console.log(turkish.toLocaleUpperCase("tr"));
// Résultat : "DİYARBAKIR" (İ avec point et I sans point - correct)

console.log(turkish.toLocaleUpperCase("tr").toLocaleLowerCase("tr"));
// Résultat : "diyarbakır" (préserve les deux types de i - correct)

Le nom de la ville turque Diyarbakır contient les deux types de i. Les méthodes standard ne peuvent pas préserver cette distinction lors de la conversion entre majuscules et minuscules. Les méthodes adaptées aux paramètres régionaux maintiennent les caractères corrects dans les deux sens.

Pour les textes qui ne contiennent que des caractères avec des règles de casse simples, les deux approches produisent des résultats identiques.

const english = "Hello World";

console.log(english.toUpperCase());
// Résultat : "HELLO WORLD"

console.log(english.toLocaleUpperCase("en"));
// Résultat : "HELLO WORLD"

Le texte anglais se convertit de la même façon avec l'une ou l'autre méthode. La version adaptée aux paramètres régionaux n'est pas nécessaire pour du texte uniquement en anglais, mais son utilisation garantit que votre code fonctionne correctement si le texte contient d'autres langues.

Quand utiliser la conversion de casse adaptée aux paramètres régionaux

Utilisez les méthodes adaptées aux paramètres régionaux lorsque vous travaillez avec du contenu généré par les utilisateurs ou du texte qui peut inclure plusieurs langues. Cela garantit une conversion de casse correcte quelle que soit la langue du texte.

function normalizeUsername(username) {
  return username.toLocaleLowerCase();
}

Les noms d'utilisateur, adresses e-mail, termes de recherche et autres entrées utilisateur devraient utiliser la conversion adaptée aux paramètres régionaux. Cela traite correctement les caractères internationaux et évite les problèmes avec le turc et autres cas particuliers.

Utilisez les méthodes standard uniquement lorsque vous savez que le texte ne contient que des caractères anglais et que vous avez besoin de performances maximales. Les méthodes standard s'exécutent légèrement plus rapidement car elles n'ont pas besoin de vérifier les règles de locale.

const htmlTag = "<DIV>";
const normalized = htmlTag.toLowerCase();
// Résultat : "<div>"

Les noms de balises HTML, propriétés CSS, schémas de protocole et autres identifiants techniques utilisent des caractères ASCII et ne nécessitent pas d'adaptation aux paramètres régionaux. Les méthodes standard fonctionnent correctement pour ce contenu.

Comment la longueur des caractères peut changer après conversion

La conversion de casse n'est pas toujours une correspondance de caractères un à un. Certains caractères se développent en plusieurs caractères lorsqu'ils sont convertis en majuscules, ce qui affecte la longueur de la chaîne.

const german = "groß";

console.log(german.length);
// Sortie: 4

const uppercase = german.toLocaleUpperCase("de");
console.log(uppercase);
// Sortie: "GROSS"

console.log(uppercase.length);
// Sortie: 5

Le mot allemand groß a quatre caractères. Lorsqu'il est converti en majuscules, le ß devient SS, produisant GROSS avec cinq caractères. La longueur de la chaîne augmente d'un caractère pendant la conversion.

Cela affecte les opérations qui dépendent de la longueur de la chaîne ou des positions des caractères. Ne supposez pas que la version en majuscules ou en minuscules d'une chaîne a la même longueur que l'originale.

const text = "Maße";
const positions = [0, 1, 2, 3];

const uppercase = text.toLocaleUpperCase("de");
// "MASSE" (5 caractères)

// Le mappage de position d'origine n'est plus valide

Le ß à la position 2 devient SS dans la version en majuscules, décalant tous les caractères suivants. Les positions des caractères de la chaîne originale ne correspondent pas aux positions dans la chaîne convertie.

Réutilisation des paramètres de locale

Si vous devez convertir plusieurs chaînes en utilisant la même locale, vous pouvez stocker l'identifiant de locale dans une variable et le réutiliser. Cela rend votre code plus maintenable et assure un traitement cohérent des locales.

const userLocale = navigator.language;

const city = "istanbul";
const country = "türkiye";

console.log(city.toLocaleUpperCase(userLocale));
console.log(country.toLocaleUpperCase(userLocale));

Cette approche maintient la sélection de la locale à un seul endroit. Si vous devez changer la locale que vous utilisez, vous n'avez qu'à mettre à jour la définition de la variable.

Pour les applications qui traitent de grandes quantités de texte, cela n'offre pas d'avantage en termes de performance. Chaque appel à toLocaleUpperCase() ou toLocaleLowerCase() effectue la conversion indépendamment. Contrairement aux formateurs de l'API Intl, il n'y a pas d'objet formateur à réutiliser.