Les chaînes de caractères

Les données alphanumériques

Les chaînes de caractères (suites de symboles quelconques) permettent de manipuler des mots, des phrases, des messages.

Une chaîne de caractères en langage javascript se note entre quotes doubles ou entre quotes simples.

On utilisera également le mot string (mot anglais) au lieu de chaînes de caractères.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        // déclaration de variables
        // et affectation de valeurs à ces variables :
        let texte1 = "Ceci est une chaîne de caractères."
        let texte2 = 'Ceci aussi.'
        let texte3 = " C'en est une aussi."
        let texte4 = 'C\'en est une encore.'
        let texte5 = " Ceci est encore un \" string\"."
        
        // on écrit dans la page html les valeurs des variables
        // avec un passage à la ligne entre chaque valeur :
        document.write(texte1);
        document.write('<br>'); // passage à la ligne
        document.write(texte2);
        document.write('<br>');
        document.write(texte3);
        document.write('<br>');
        document.write(texte4);
        document.write('<br>');
        document.write(texte5);        
        </script>
    </body>
</html>

Vous remarquerez, avec l'affectation de la variable texte4, la barre d'échappement utilisée lorsqu'on veut une apostrophe dans une chaîne de caractères qui est elle-même délimitée par des apostrophes (simple-quote). De même texte5 montre que pour utiliser " dans une chaîne délimitée par ", il faut utiliser la barre d'échappement.
Vous remarquerez également qu'une espace est un caractère comme un autre.

Variante du code précédent

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        // déclaration de variables
        // et affectation de valeurs à ces variables :
        let texte1 = "Ceci est une chaîne de caractères."
        let texte2 = 'Ceci aussi.'
        let texte3 = " C'en est une aussi."
        let texte4 = 'C\'en est une encore.'
        let texte5 = " Ceci est encore un \" string\"."
        
        
        document.write(`${texte1} <br> ${texte2} <br> ${texte3} <br> ${texte4} <br> ${texte5}`);      
        </script>
    </body>
</html>

Le type des chaînes de caractères

En langage JavaScript, une chaîne de caractères est un objet de type string.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        
        // déclaration d'une variable nommée texte1
        // et affectation de la valeur "Ceci est une chaîne de caractères." à cette variable :
        let texte1 = "Ceci est une chaîne de caractères."
        
        // on écrit dans la page html le type de la valeur de la variable précédente :
        document.write(typeof texte1);      
        </script>
    </body>
</html>

Concaténation de chaînes de caractères.

Lorsqu'on cherche à coller deux chaînes de caractères entre elles, on parle de concaténation de chaînes. Le programme ci-dessous vous donne un exemple de l'utilisation de la concaténation.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        
        // déclaration et affectation de trois variables :
        let nom = "Schmolldu";
        let texte = "Bonjour";
        let point = ".";
        
        // on concatène les valeurs des trois variables
        // et on écrit le résultat dans la page html :
        document.write(texte + " " + nom + point);      
        </script>
    </body>
</html>

Retour sur le typage

Un même opérateur a des effets différents suivant le type des objets auxquels il s'applique.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        
        // somme de deux entiers 
        // et écriture dans la page html du résultat :
        document.write(1 + 3); 
        
        // on écrit dans la page html la balise 
        // de passage à la ligne :
        document.write('<br>');
        
        // concaténation de deux chaînes de caractères
        // et écriture dans la page html du résultat :
        document.write('1' + '3');      
        </script>
    </body>
</html>

Dans le premier cas, JavaScript ajoute les entiers 1 et 3 et obtient 4.
Dans le second cas, JavaScript concatène les chaînes de caractères '1' et '3' et obtient donc '13'.

Répéter une chaîne

La méthode repeat permet la répétition d'une chaîne.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let chaine = "Aha ! "
        document.write(chaine.repeat(5));  
        </script>
    </body>
</html>

Changer de type

Dans certains contextes, il est utile de pouvoir changer le type d'une variable en un autre type (lorsque c'est possible).

Du type string vers le type int.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let chaine = '13'; // 13 est entre quotes : c'est donc une chaîne de caractères
        document.write(chaine); 
        document.write(' '); 
        document.write(typeof chaine);
        document.write('<br>'); 
        
        let entier = parseInt(chaine);// on transforme la chaîne en entier
        document.write(entier); 
        document.write(' ');  
        document.write(typeof entier); 
        document.write('<br>');     
        </script>
    </body>
</html>

Du type int vers le type string.

Il peut arriver à l'inverse que l'on veuille transformer un objet de type entier en un objet de type string.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let entier = 13;
        document.write(entier); 
        document.write(', type :'); 
        document.write(typeof entier);
        document.write('<br>'); 
        
        let chaine = entier + "";// on ajoute une chaine vide : javascript transforme automatiquement l'entier en string
        document.write(chaine); 
        document.write(', type : ');  
        document.write(typeof chaine);   
        document.write('<br>');
        document.write('<hr>');
        
        let autreEntier = 26;
        document.write(autreEntier); 
        document.write(', type : '); 
        document.write(typeof autreEntier);
        document.write('<br>'); 
        
        autreEntier = autreEntier.toString(); // transformation de l'entier en chaîne
        document.write(autreEntier); 
        document.write(', type : '); 
        document.write(typeof autreEntier);
        document.write('<br>'); 
        </script>
    </body>
</html>

Longueur d'une chaîne de caractères.

La longueur d'une chaîne de caractères est le nombre de caractères dans la chaîne. Rappelons qu'une espace est un caractère comme un autre.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let chaine1 = "Première chaîne";
        document.write(chaine1.length); 
        
        document.write('<br>'); //passage à la ligne
        
        let chaine2 = "Cette phrase contient 36 caractères.";
        document.write(chaine2.length); 
        
        document.write('<br>'); //passage à la ligne
        
        let chaine3 = "Cette phrase contient quarante-sept caractères.";
        document.write(chaine3.length); 
             
        </script>
    </body>
</html>

Parcourir les éléments d'une chaîne de caractères.

Pour parcourir les caractères d'une chaîne, on peut utiliser une boucle for et la méthode charAt().

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let chaine = "Une chaîne";
        for(let i = 0; i < chaine.length; i+= 1) {// pour chaque indice
            document.write(chaine.charAt(i));// écrire le caractère ayant cet indice
            document.write('<br>');//passage à la ligne entre chaque caractère
        }             
        </script>
    </body>
</html>

Attention, les éléments sont, comme le montre l'exemple ci-dessus, indicés de 0 à length-1.

On peut accèder également à l'élément d'indice i avec la notation [] (que l'on utilisera également pour les objets de type array).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let chaine = "Une chaîne";
        for(let i = 0; i < chaine.length; i+= 1) { // pour chaque indice 
            document.write(chaine[i]); // écrire le caractère ayant cet indice
            document.write('<br>'); // suivi d'un passage à la ligne
        }             
        </script>
    </body>
</html>

On peut également parcourir les éléments d'une chaîne sans utiliser les indices :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let chaine = "Une chaîne";
        for(let caractere of chaine) { // pour chaque caractère de la chaîne : 
            document.write(caractere); // écrire le caractère
            document.write('*'); // écrire une étoile
        }             
        </script>
    </body>
</html>

Sous-chaîne d'une chaîne de caractères.

Pour récupérer le mot entre les positions 11 et 20 d'une chaîne de caractères, on pourrait utiliser une boucle comme ci-dessous :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        
        // déclaration de la variable chaine 
        // et affectation de la valeur "Html, css, JavaScript, PHP." à cette variable :
        let chaine = "Html, css, JavaScript, PHP.";
        
        // déclaration d'une variable sous-chaîne 
        // affectation de la valeur "" (chaine vide) à cette variable :
        let souschaine = ""; 
        
        // On ajoute un à un les caractères qui nous intéressent à la variable souschaine :
        for(let i = 11; i < 21; i+= 1) {
            souschaine += chaine.charAt(i);
        }
        
        // on écrit l'actuel contenu de la variable souschaine dans la page html :
        document.write(souschaine);         
        </script>
    </body>
</html>

Mais il existe déjà une méthode subString(indice du premier caractère voulu , indice du dernier caractère voulu +1) permettant cette extraction de sous-chaîne :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let chaine = "Html, css, JavaScript, PHP.";
        document.write(chaine.substring(11,21));  
        document.write('<br>');
        document.write(chaine.substring(0,4));  
        document.write('<br>');
        document.write(chaine.substring(0,1));          
        </script>
    </body>
</html>

On peut aussi simplement vouloir vérifier si une chaîne est présente dans une autre :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let chaine = "Html, css, JavaScript, PHP.";
        document.write("Le mot \" css \" est-il présent dans la chaîne  : ");
        document.write(chaine.includes("css"));
        document.write('<br>');
        document.write("Le mot \" svg \" est-il présent dans la chaîne  : ");
        document.write(chaine.includes("svg"));      
        </script>
    </body>
</html>

La vérification précédente (présence d'une chaîne à l'intérieur d'une autre) renvoie true ou false. On peut également demander l'indice de la première occurrence de la sous-chaîne cherchée.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let chaine = "Html, css, JavaScript, PHP, css.";
        document.write(`Indice de la première occurence du mot "css" dans la chaîne "${chaine}": ${chaine.search("css")}.<br>`);
        document.write(`Indice de la première occurence du mot  "svg" dans la chaîne "${chaine}": ${chaine.search("svg")}.`);   
        </script>
    </body>
</html>