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

Utilisez JavaScript pour modifier la casse du texte correctement 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 sensibles 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 sensibles 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 de 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 lorsqu'elle est mise en majuscule, et I devient i lorsqu'elle est mise en minuscule. Cette relation est valable pour l'ensemble de l'alphabet anglais.

D'autres langues ont des règles plus complexes. Le turc possède quatre caractères i distincts au lieu de deux. L'allemand possède la lettre ß (s dur), qui a des règles spécifiques pour la conversion en majuscule. 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 de l'anglais. Cela produit des résultats incorrects pour le texte dans d'autres langues. Les méthodes sensibles aux paramètres régionaux appliquent les règles appropriées pour chaque langue, garantissant une conversion correcte.

Le problème du i turc

Le turc fournit l'exemple le plus clair de l'importance des paramètres régionaux 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 de l'anglais et convertissent le i avec point en I sans point. Cela modifie le sens des mots turcs et produit un texte incorrect.

const turkish = "istanbul";

console.log(turkish.toUpperCase());
// Output: "ISTANBUL" (incorrect - uses dotless I)

console.log(turkish.toLocaleUpperCase("tr"));
// Output: "İSTANBUL" (correct - uses dotted İ)

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 la méthode standard toUpperCase() produit ISTANBUL avec un I sans point, ce qui est incorrect en turc.

Le même problème se produit dans le sens inverse lors de la conversion de texte turc en majuscules vers des minuscules.

const uppercase = "İSTANBUL";

console.log(uppercase.toLowerCase());
// Output: "i̇stanbul" (incorrect - creates i with combining dot above)

console.log(uppercase.toLocaleLowerCase("tr"));
// Output: "istanbul" (correct - produces dotted i)

Le İ avec point devrait devenir le i avec point lorsqu'il est converti 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 langues

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

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

const german = "Straße";

console.log(german.toUpperCase());
// Output: "STRASSE" (converts ß to SS)

console.log(german.toLocaleUpperCase("de"));
// Output: "STRASSE" (also converts ß to 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 langue ne modifie pas le résultat, mais l'utilisation de la méthode sensible à la langue garantit que votre code reste correct si la gestion Unicode change dans les futures implémentations.

Le grec possède 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 à point. La lettre i conserve son point lorsqu'elle est combinée avec certains signes diacritiques, même en majuscules. Cela affecte la façon dont les méthodes sensibles à la langue gèrent des combinaisons de caractères spécifiques.

Utiliser toLocaleUpperCase pour une conversion en majuscules sensible à la langue

La méthode toLocaleUpperCase() convertit une chaîne en majuscules en utilisant des règles de mappage de casse spécifiques à la langue. Vous l'appelez sur une chaîne et passez éventuellement un identifiant de langue comme argument.

const text = "istanbul";

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

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

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

const text = "istanbul";

console.log(text.toLocaleUpperCase("tr"));
// Output: "İSTANBUL" (Turkish rules - dotted İ)

console.log(text.toLocaleUpperCase("en"));
// Output: "ISTANBUL" (English rules - dotless I)

Le paramètre de langue détermine quelles règles de conversion de casse 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, elle 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);
// Output depends on system locale

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.

Utiliser toLocaleLowerCase pour une conversion en minuscules tenant compte de la locale

La méthode toLocaleLowerCase() convertit une chaîne en minuscules en utilisant les règles de casse spécifiques à 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);
// Output: "istanbul"

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

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 gérer correctement les caractères turcs.

const text = "İSTANBUL";

console.log(text.toLowerCase());
// Output: "i̇stanbul" (incorrect - i with combining dot above)

console.log(text.toLocaleLowerCase("tr"));
// Output: "istanbul" (correct - dotted i)

Le İ pointé turc nécessite les règles de casse turques pour être converti correctement. L'utilisation de la méthode tenant compte de 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 converti en minuscule.

const text = "IRAK";

console.log(text.toLocaleLowerCase("tr"));
// Output: "ırak" (Turkish rules - dotless ı)

console.log(text.toLocaleLowerCase("en"));
// Output: "irak" (English rules - dotted i)

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

Spécifier les identifiants de locale

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

const text = "Straße";

console.log(text.toLocaleUpperCase("de-DE"));
// Output: "STRASSE"

console.log(text.toLocaleUpperCase("de-AT"));
// Output: "STRASSE"

console.log(text.toLocaleUpperCase("de-CH"));
// Output: "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);
// Output: "İSTANBUL"

La méthode applique les règles turques car tr est la première locale du tableau. Si l'environnement d'exécution ne prend pas en charge la première locale, il se rabat sur les locales suivantes du 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);
// Output varies by user's locale
// For Turkish users: "İSTANBUL"
// For English users: "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 anglophones voient le texte converti selon les règles anglaises, et ainsi de suite.

Vous pouvez également passer l'ensemble du tableau de 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 sensibles à la locale

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

const turkish = "Diyarbakır";

// Standard methods (incorrect for Turkish)
console.log(turkish.toUpperCase());
// Output: "DIYARBAKIR" (dotless I - incorrect)

console.log(turkish.toUpperCase().toLowerCase());
// Output: "diyarbakir" (dotted i - lost the dotless ı)

// Locale-aware methods (correct for Turkish)
console.log(turkish.toLocaleUpperCase("tr"));
// Output: "DİYARBAKIR" (dotted İ and dotless I - correct)

console.log(turkish.toLocaleUpperCase("tr").toLocaleLowerCase("tr"));
// Output: "diyarbakır" (preserves both i types - 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 les casses. Les méthodes sensibles à la locale maintiennent les caractères corrects dans les deux sens.

Pour le texte qui ne contient 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());
// Output: "HELLO WORLD"

console.log(english.toLocaleUpperCase("en"));
// Output: "HELLO WORLD"

Le texte en anglais se convertit de la même manière avec l'une ou l'autre méthode. La version tenant compte de la locale 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 tenant compte de la locale

Utilisez les méthodes tenant compte de la locale lorsque vous travaillez avec du contenu généré par les utilisateurs ou du texte pouvant inclure plusieurs langues. Cela garantit une conversion de casse correcte quelle que soit la langue contenue dans le texte.

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

Les noms d'utilisateur, adresses e-mail, termes de recherche et autres saisies utilisateur doivent utiliser la conversion tenant compte de la locale. Cela gère 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 contient uniquement 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();
// Output: "<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 de prise en compte de la locale. 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 un mappage caractère par caractère. 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);
// Output: 4

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

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

Le mot allemand groß comporte 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 lors de 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'original.

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

const uppercase = text.toLocaleUpperCase("de");
// "MASSE" (5 characters)

// Original position mapping no longer valid

Le ß en 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 d'origine 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 garantit une gestion cohérente de la locale.

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 en 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 ne fournit pas d'avantage en termes de performances. Chaque appel à toLocaleUpperCase() ou toLocaleLowerCase() effectue la conversion de manière indépendante. Contrairement aux formateurs de l'API Intl, il n'y a pas d'objet formateur à réutiliser.