Comment transformer la casse des caractères d’une chaîne en JavaScript

Dans ce didacticiel, vous apprendrez à transformer la casse des caractères d’une chaîne (en majuscules, minuscules et casse de titre) à l’aide de méthodes JavaScript natives.

JavaScript fournit de nombreuses fonctions et méthodes qui vous permettent de manipuler des données à des fins différentes. Nous avons récemment examiné des méthodes pour convertir une chaîne en nombre et un nombre à une chaîne ou à un ordinalet pour fractionnement de chaînes. Cet article présentera des méthodes pour transformer la casse des caractères d’une chaîne – ce qui est utile pour représenter des chaînes dans un certain format ou pour une comparaison de chaînes fiable.

Transformer une chaîne en minuscule

Si vous avez besoin de votre chaîne en minuscules, vous pouvez utiliser le toLowerCase() méthode disponible sur les chaînes. Cette méthode renvoie la chaîne avec tous ses caractères en minuscules.

Par exemple:

const str = 'HeLlO';
console.log(str.toLowerCase()); 
console.log(str); 

En utilisant toLowerCase() méthode sur la str variable, vous pouvez récupérer la même chaîne avec tous les caractères en minuscules. Notez qu’une nouvelle chaîne est renvoyée sans affecter la valeur de str.

Transformer une chaîne en majuscule

Si vous avez besoin de votre chaîne en majuscule, vous pouvez utiliser le toUpperCase() méthode disponible sur les chaînes. Cette méthode renvoie la chaîne avec tous ses caractères en majuscules.

Par exemple:

const str = 'HeLlO';
console.log(str.toUpperCase()); 
console.log(str); 

En utilisant toUpperCase() méthode sur la str variable, vous pouvez récupérer la même chaîne avec tous les caractères en majuscules. Notez qu’une nouvelle chaîne est renvoyée sans affecter la valeur de str.

Transformer une chaîne en casse de titre

Le cas d’utilisation le plus courant pour transformer la casse d’une chaîne est de la transformer en casse de titre. Cela peut être utilisé pour afficher les noms et les titres.

il y a différentes facons de faire cela. Une façon consiste à utiliser la méthode toUpperCase() sur le premier caractère de la chaîne, puis en le concaténant avec le reste de la chaîne. Par exemple:

const str = 'hello';
console.log(str[0].toUpperCase() + str.substring(1).toLowerCase()); 

Dans cet exemple, vous récupérez le premier caractère à l’aide de la 0 indice sur le str variable. Ensuite, vous le transformez en majuscule à l’aide de la toUpperCase() méthode. Enfin, vous récupérez le reste de la chaîne à l’aide de la substr() méthode et concaténer le reste de la chaîne à la première lettre. Vous postulez toLowerCase() sur le reste de la chaîne pour s’assurer qu’elle est en minuscules.

Cela ne transforme que la première lettre du mot en majuscule. Cependant, dans certains cas, si vous avez une phrase, vous voudrez peut-être transformer chaque mot de la phrase en majuscule. Dans ce cas, il est préférable d’utiliser une fonction comme celle-ci :

function toTitleCase (str) {
  if (!str) {
    return '';
  }
  const strArr = str.split(' ').map((word) => {
    return word[0].toUpperCase() + word.substring(1).toLowerCase();
  });
  return strArr.join(' ');
}

const str = 'hello world';
console.log(toTitleCase(str)); 

La toTitleCase() La fonction accepte un paramètre, qui est la chaîne à transformer en casse de titre.

Dans la fonction, vous vérifiez d’abord si la chaîne est vide et dans ce cas renvoyez une chaîne vide.

Ensuite, vous divisez la chaîne sur le délimiteur d’espace, qui renvoie un tableau. Après cela, vous utilisez le méthode de la carte sur le tableau pour appliquer la transformation que vous avez vue dans l’exemple précédent sur chaque élément du tableau. Cela transforme chaque mot en cas de titre.

Enfin, vous joignez les éléments du tableau dans une chaîne par le même délimiteur d’espace et le renvoyez.

Exemple en direct

Dans la démo CodePen suivante, vous pouvez essayer les fonctionnalités de toLowerCase() et toUpperCase(). Lorsque vous entrez une chaîne dans l’entrée, elle est transformée en majuscule et en minuscule et affichée. Vous pouvez essayer d’utiliser des caractères avec une casse différente dans la chaîne.

Voir le stylo
Transformer la casse des caractères d’une chaîne en JavaScript par SitePoint (@SitePoint)
sur CodePen.

Modification de la casse des caractères pour la comparaison de chaînes

Dans de nombreuses situations, vous devrez comparer des chaînes avant d’exécuter un bloc de code. Si vous ne pouvez pas contrôler la casse des caractères dans laquelle la chaîne est écrite, effectuer une comparaison sur la chaîne sans appliquer la casse des caractères peut entraîner des résultats inattendus.

Par exemple:

const input = document.querySelector('input[type=text]');
if (input.value === 'yes') {
  alert('Thank you for agreeing!');
} else {
  alert('We still like you anyway')
}

Si l’utilisateur saisit dans la saisie Yes à la place de yesla condition d’égalité échouera et la mauvaise alerte s’affichera.

Vous pouvez résoudre ce problème en appliquant une casse de caractère sur la chaîne :

const input = document.querySelector('input[type=text]');
if (input.value.toLowerCase() === 'yes') {
  alert('Thank you for agreeing!');
} else {
  alert('We still like you anyway')
}

Conclusion

Il est nécessaire d’apprendre à transformer la casse des caractères d’une chaîne en JavaScript. Vous aurez souvent besoin de l’utiliser pour de nombreux cas d’utilisation, comme l’affichage de la chaîne dans un certain format. Vous pouvez également l’utiliser pour comparer des chaînes de manière fiable.

L’application d’une casse de caractère sur les chaînes que vous comparez garantit que vous pouvez vérifier si le contenu des chaînes est égal, quelle que soit la façon dont elles sont écrites.

Si vous avez trouvé cet article utile, vous pouvez également profiter de ce qui suit :