Mis à jour le 19/11/2018
  • 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Manipulez les chaînes de caractères

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Beaucoup de programmes ont à manipuler des chaînes de caractères. Ce chapitre va vous apprendre comment faire.

Rappels sur les chaînes de caractères

Récapitulons ce que nous savons déjà au sujet des chaînes de caractères :

  • Une valeur de type chaîne (string) permet de représenter un texte.

  • En JavaScript, on définit une chaîne en plaçant un texte entre guillemets simples ('je suis une chaîne') ou entre guillemets doubles ("je suis une chaîne"). Ce cours privilégie l'utilisation de guillemets doubles. 

  • On peut insérer dans une chaîne certains caractères spéciaux en utilisant le caractère\ ("antislash" ou "backslash") suivi d'un autre caractère. Par exemple,\n définit un retour à la ligne.

  • Appliqué à des chaînes de caractères, l'opérateur+ déclenche la concaténation (jointure) des deux valeurs.

Outre ces possibilités de base, le type JavaScript chaîne dispose de nombreuses fonctionnalités. Nous allons maintenant étudier les principales opérations réalisables sur une chaîne de caractères.

Obtenir la longueur d'une chaîne

Pour obtenir la longueur d'une chaîne (c'est-à-dire le nombre de caractères qui la composent, qu'on appelle également sa taille), il suffit de lui ajouter.length. On obtient la longueur sous la forme d'une valeur entière.

console.log("ABC".length); // Affiche 3
console.log("Je suis une chaîne".length); // Affiche 18

Tapez l'exemple précédent, ainsi que tous les suivants, dans le fichiercours.js situé dans le répertoirechapitre_6/js (à créer). Créez ensuite le fichiercours.html associé danschapitre_6/html, puis ouvrez ce fichier dans Firefox pour vérifier le résultat dans la console.

Bien entendu,.length peut être appliqué sur des variables de type chaîne. Son résultat peut être stocké dans une variable en vue d'une utilisation ultérieure.

var mot = "Kangourou";
var longueurMot = mot.length; // longueurMot contient la valeur 9
console.log(longueurMot); // Affiche 9

La syntaxe qui consiste à utiliser un point (.) entre la chaîne de caractères et le motlength s'appelle la notation pointée. Techniquement,length est ce que l'on appelle une propriété. On dit qu'on accède à la propriétélength de la chaîne de caractères.

Convertir une chaîne en minuscules ou en majuscules

Une valeur de type chaîne peut être convertie en minuscules en lui ajoutant.toLowerCase(). De même, on peut lui ajouter.toUpperCase() pour la convertir en majuscules. Ces opérations renvoient toutes deux une nouvelle chaîne.

var motInitial = "Bora-Bora";
var motEnMinuscules = motInitial.toLowerCase();
console.log(motEnMinuscules); // Affiche "bora-bora"
var motEnMajuscules = motInitial.toUpperCase();
console.log(motEnMajuscules); // Affiche "BORA-BORA"

La conversion en minuscules ou en majuscules se fait également avec la notation pointée : on ajoute un point entre la chaîne de caractères ettoLowerCase() outoUpperCase(). Par rapport à l'utilisation delength, on remarque l'ajout (indispensable) d'une paire de parenthèses à la fin. Les propriétéstoLowerCase() ettoUpperCase() sont d'une nature différente delength : il s'agit de méthodes.

Comparer deux chaînes

La comparaison entre deux chaînes s'effectue avec l'opérateur ===. Cette opération renvoie une valeur booléenne :true si les deux chaînes sont égales,false sinon.

var chaine = "azerty";
console.log(chaine === "azerty"); // Affiche true
console.log(chaine === "qwerty"); // Affiche false

Attention cependant : la comparaison entre chaînes est sensible à la casse (case sensitive). Cela signifie que la présence de majuscules ou de minuscules dans les chaînes intervient dans le résultat de leur comparaison. Deux chaînes contenant le même texte mais pas les mêmes minuscules/majuscules ne seront pas considérées comme égales.

console.log("Azerty" === "azerty"); // Affiche false à cause du A majuscule

La conversion en minuscules ou en majuscules est souvent utilisée pour comparer une valeur saisie par l'utilisateur (donc comportant potentiellement des minuscules et/ou des majuscules) à une valeur prédéfinie.

var valeurSaisie = "Quitter";
console.log(valeurSaisie === "quitter"); // Affiche false à cause du Q majuscule
console.log(valeurSaisie.toLowerCase() === "quitter"); // Affiche true

Accéder à un caractère d'une chaîne

Associer un caractère à son indice

Une chaîne de caractères peut être considérée comme un ensemble de caractères. Chaque caractère est identifié par un numéro, appelé son indice (index en anglais). 

A présent, lisez trois fois à voix haute la phrase ci-dessous :

C'est fait ? Alors, relisez-là encore une fois, histoire de la retenir pour de bon . Il s'agit d'une convention qu'on retrouve dans presque tous les langages de programmation.

Les caractères d'une chaîne sont donc numérotés à partir de 0 :

  • L'indice du 1er caractère est 0

  • L'indice du 2ème caractère est 1.

  • L'indice du 3ème caractère est 2.

  • ...

Comment calculer l'indice du dernier caractère d'une chaîne ?

Réponse : il est égal à la longueur de la chaîne - 1.

Accéder à un caractère à partir de son indice

Il existe deux possibilités pour accéder à un caractère d'une chaîne nommée icimaChaine :

  • Ajouter.charAt() à la chaîne, en indiquant entre les parenthèses l'indice du caractère :maChaine.charAt(monIndice).

  • Ajouter[] à la chaîne, en indiquant entre les crochets l'indice du caractère :maChaine[monIndice].

var sport = "Tennis-ballon"; // 13 caractères
console.log(sport.charAt(0)); // Affiche "T"
console.log(sport[0]); // Affiche "T"
console.log(sport.charAt(6)); // Affiche "-"
console.log(sport[6]); // Affiche "-"

Parcourir une chaîne caractère par caractère

Nous savons maintenant accéder à un caractère d'une chaîne. Comment faire pour la parcourir lettre par lettre ?

Une première solution serait d'accéder successivement à chaque lettre.

var prenom = "Odile"; // 5 caractères
console.log(prenom[0]);
console.log(prenom[1]);
console.log(prenom[2]);
console.log(prenom[3]);
console.log(prenom[4]);

Oui mais... Si la chaîne à parcourir contient plusieurs dizaines de caractères ? 

Il faut trouver une meilleure solution pour répéter l'accès à chaque lettre de la chaîne. Répéter... Ça ne vous rappelle pas quelque chose ? Mais si, bien sûr : les boucles !

Nous allons donc écrire une boucle pour accéder successivement à chaque caractère. Il faut maintenant choisir entre un while et un for. J'espère que vous vous rappelez que le choix dépend essentiellement du nombre de tours. S'il est prévisible, la boucle for offre plus de simplicité (gestion automatique de l'incrémentation du compteur). Ici, le nombre de tours de boucle est égal au nombre de caractères de la chaîne, autrement dit sa longueur. Comme il est prévisible, nous choisissons la boucle for.

Voici la syntaxe à utiliser pour parcourir une variable chaîne nommée icimaChaine caractère par caractère.

for (var i = 0; i < maChaine.length; i++) {
    // maChaine[i] renvoie le ième caractère de maChaine
    // ...
}

Le compteur de bouclei varie de 0 (indice du premier caractère de la chaîne) à longueur de la chaîne - 1 (indice du dernier). Lorsque la valeur du compteur devient égal à la longueur de la chaîne, l'expressioni < maChaine.length devient fausse et la boucle se termine. A l'intérieur de la boucle, l'expressionmaChaine[i] renvoie le caractère ayant l'indicei (on dit parfois : "le ième caractère").

Appliquons cette syntaxe à notre exemple précédent. Le code ci-dessous parcourt la variableprenom pour afficher chacun de ses caractères.

var prenom = "Odile";
for (var i = 0; i < prenom.length; i++) {
    console.log(prenom[i]);
}

On obtient le même résultat qu'avec le parcours manuel, mais notre code s'adapte maintenant à n'importe quelle chaîne : on dit qu'il est plus générique.

Conclusion

Nous venons de découvrir quelques-unes des possibilités offertes par JavaScript pour manipuler les chaînes de caractères. Il en existe beaucoup d'autres, parmi lesquelles :

  • La recherche d'une sous-chaîne dans une chaîne.

  • L'extraction d'une partie d'une chaîne.

  • La division d'une chaîne en sous-parties selon un caractère séparateur.

Pour les découvrir, consultez la documentation de référence du Mozilla Developer Network sur les chaînes.

A vous de jouer !

C'est l'heure des exercices ! Pour ce chapitre, ils seront tous à écrire dans le même fichier source situé dans le répertoire chapitre_6. Chaque exercice va permettre d'enrichir un programme qui analyse un mot saisi par l'utilisateur.

Pensez toujours aux consignes habituelles sur le nommage des variables, l'indentation et les tests (pour trouver d'éventuelles erreurs bien cachées).

Informations sur le mot

Créez un programmemot.js qui fait saisir un mot à l'utilisateur, puis affiche quelques informations sur le mot saisi, comme dans l'exemple ci-dessous.

Comptage du nombre de voyelles

Complétez le programmemot.js en y ajoutant une fonctioncompterNbVoyelles() qui prend un mot en paramètre et renvoie son nombre de voyelles. Utilisez cette fonction pour afficher le nombre de voyelles et de consonnes du mot.

Inversion du mot

Complétez le programmemot.js avec une fonctioninverser() qui prend en paramètre un mot et renvoie ce mot écrit à l'envers. Utilisez cette fonction pour afficher le mot inversé.

Palindrome

Complétez le programmemot.js en utilisant la fonctioninverser() pour vérifier si le mot est un palindrome ou non.

Conversion en "leet speak" (résultat à obtenir)

Le leet speak est un système d'écriture où certains caractères sont remplacés par d'autres afin de produire un résultat différent mais visuellement proche. Il est souvent utilisé dans certaines communautés hackers et gamers.

Il existe de nombreuses variantes de l'alphabet leet. Je vous propose d'utiliser au minimum le suivant, que vous pourrez enrichir si vous le souhaitez.

Lettre

Equivalent leet

a

4

b

8

e

3

l

1

o

0

s

5

Complétez le programmemot.js avec une fonctionconvertirEnLeetSpeak() qui prend en paramètre un mot et renvoie son équivalent leet. Utilisez cette fonction pour afficher le mot converti.

Solutions des exercices

Le code source des solutions est consultable en ligne

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Exemple de certificat de réussite
Exemple de certificat de réussite