En JavaScript, les chaines de caractères peuvent être manipulées à l'aide des méthodes de l'objet global String.

Rappel

Pour déclarer une chaine de caractères, on peut utiliser les guillemets("") ou les apostrophes ('') :

let chaine1 = "Bonjour";
let chaine2 = 'VemoTech !' ;

Dans l'exemple ci-dessus, les variables chaine1 et chaine2 peuvent être assimilés à des objets de type String sur lesquels on peut appliquer les propriétés et les méthodes définies pour ce type d'objet.

Propriétés et méthodes de l'objet String

La propriété "length"

Comme pour Array, l'objet String ne possède qu'une seule propriété, length qui retourne le nombre de caractères contenus dans une chaine.

Exemple :

let chaine = "azerty";
let tailleChaine = chaine.length;

Après l' exécution de ce script, la variable tailleChaine contient le nombre de caractères de la chaine de caractères contenue dans la variable chaine, ici 6 caractères.

Aperçu dans la console du navigateur :

La concaténation avec l'opérateur "+"

La concaténation est une opération qui consiste à assembler deux chaines en une seule, elle s'effectue à l'aide de l'opérateur +.

Exemple :

let chaine1 = "Bonjour à tous les utilisateurs ";
let chaine2 = "de VemoTech.fr !";
let chaine = chaine1 + chaine2;

La variable chaine contient après l'exécution de ce script "Bonjour à tous les utilisateurs de VemoTech.fr !".

Aperçu dans la console du navigateur :

Attention à ne pas confondre l'opérateur de concaténation avec l'opérateur d'addition qui s'applique aux nombres.

Exemple :

let chaine1 = "2";
let chaine2 = "3";
let chaine = chaine1 + chaine2;   // Retourne la chaine de caractère : 23

La variable chaine contient après l'exécution de ce script "23" et non pas le nombre 5 car les deux chiffres sont dans des guillemets.

Aperçu dans la console du navigateur :

Il est également possible d'utiliser l'opérateur += pour ajouter du texte à une chaine déjà existante.

Exemple :

 let chaine1 = "Bonjour ";
 chaine1 += "VemoTech.fr !";

La variable chaine1 contient après l'exécution de ce script "Bonjour VemoTech.fr !".

L'écriture de modèles de chaînes de caractères

Le modèles de chaînes de caractères de modèle utilisent des coches inverses (``) plutôt que les guillemets («  ») pour définir une chaîne :

let chaine = `Bonjour VemoTech.fr !`;

Ce modèle peut être assez pratique afin d'éviter d'échapper les guillemets("") ou les apostrophes ('') :

let chaine = `Je m'appelle "Antoine" !`;

Il est également possible d'écrire sur plusieurs ligne et éviter ainsi d'effectuer des sauts de lignes manuellement :

let chaine = `Je m'appelle 
"Antoine" !`;

En ce qui concerne l'écriture des variables dans une chaine de caractère, la notation est beaucoup plus claire et nécessaire d'isoler la variable de notre choix avec la notation ${nomVariable} :

let nom = "Reese",
    prenom = "John";

let chaine = `Bonjour ! Je m'appelle ${nom} ${prenom} !`;

Il est possible également d'effectuer un calcul simple dans une variable :

let prix = 25,
    pourcentage = 0.20;

let total = `Total : ${(prix * (1 + pourcentage)).toFixed(2)}`;   // Affichage du total + calcul dans la variable de retour du prix de vente avec pourcentage + arrondir 2 chiffres

Au niveau de l'intégration HTML, celle-ci est assez simple à maitriser et les variables sont convenablement implémentées :

let titre = "--- Liste des courses à faire ---";
let produits = ["Pommes", "Tomates", "Yahourt", "Pizza", "Oranges"];

let html = `<h1>${titre}</h1>
<ul>`;
for (const produit of produits) {
    html += `<li>${produit}</li>`;
}

html += `</ul>`;

Ce code créé une liste des courses à réaliser. Niveau technique, il génère un code HTML contenant un titre ("--- Liste des courses à faire ---") et ainsi qu'une liste à puce listant les différents produits.

Résultat (exécuté pour le moment dans la console de développement) :

Nous distinguons bien que chaque produit est entouré d'une balise <li></li> dans une liste <ul></ul>.

Recherches de caractère

Récupérer un caractère avec "charAt()"

La méthode charAt()permet de récupérer un caractère de la chaine sur laquelle elle s'applique. Le caractère retourné est celui dont la position est indiquée en argument.

Attention la position du premier caractère correspond à l'indice 0.

Exemple :

let chaine = "VemoTech.fr";
let car = chaine.charAt(1);

Après l'exécution de ce script, la variable car contient le caractère "e".

Aperçu dans la console du navigateur :

L'indice fourni doit être un nombre compris entre 0 et chaine.length-1, dans le cas contraire, si l'indice fourni est en dehors de cet intervalle, la méthode charAt() renverra une chaine vide, et si aucun indice n'est fourni, la valeur par défaut utilisée sera 0.

Rechercher une expression avec "indexOf()" et "lastIndexOf()"

La méthode indexOf() permet de récupérer la position de la première occurrence d'un caractère ou d'une chaine de caractères contenu dans la chaine sur laquelle elle s'applique. Cette méthode recherche l’expression passée en argument dans la chaine de caractères et renvoie la position à laquelle cette expression a été trouvée la première fois ou la valeur -1 si l’expression n’a pas été trouvée.

Exemple :

let chaine = "Foot";
let index = chaine.indexOf("o");     // La lettre o est présente -> renvoie l'index de la lettre (ici : 1)

let chaine2 = "Tennis";
let index2 = chaine.indexOf("W");    // La lettre W n'est pas dans la chaine -> renvoie -1

Après l'exécution de ce script, la variable index contiendra la valeur 1.

Aperçu dans la console du navigateur :

Si l'expression recherchée est une chaine de caractères, la méthode indexOf() retourne l'index correspondant à la position du premier caractère.

Exemple :

let chaine = "azerty";
let index = chaine.indexOf("rty");        

Après l'exécution de ce script, la variable index contiendra la valeur 3 :

Par défaut, la recherche s'effectue dans toute la chaine, mais il est possible de passer un deuxième paramètre à la méthode indexOf() qui permet de choisir la position à partir de laquelle on souhaite démarrer la recherche.

Exemple :

let chaine = "azerty ou qwerty";
let index = chaine.indexOf("rty",4);

Après l'exécution de ce script, la variable index contiendra la valeur 13. En effet ici, la recherche de l'expression "rty" se fait à partir du 5ème caractère de la chaine. Ce caractère correspondant à la lettre "t" du mot "azerty", la première occurrence de l'expression "rty" contenue dans ce mot ne sera donc pas trouvée mais elle le sera dans le mot "qwerty".

Aperçu dans la console du navigateur :

La méthode lastIndexOf() va fonctionner de la même manière que indexOf() à la différence près qu'elle va renvoyer la position de la dernière occurrence correspondant à l'expression recherchée (ou -1 si l'expression n'est pas trouvée).

Extraire une chaine avec "substring()" et "slice()"

La méthode "substring()"

La méthode substring() retourne une partie de la chaîne courante, comprise entre un indice de début et un indice de fin. Le caractère dont la position correspond à l'indice de fin n'est pas retourné.

Exemple :

let chaine = "VemoTech.fr";
let ss_chaine = chaine.substring(2, 5);

Aperçu dans le navigateur :

Après l'exécution de ce script, la variable ss_chaine contient la chaine de caractères "moT".

Si les indices de début et de fin ont la même valeur substring() retourne une chaine vide.

let chaine = "VemoTech.fr";
let ss_chaine = chaine.substring(1, 1);  

Aperçu dans le navigateur :

Après l'exécution de ce script, la variable ss_chaine contient une chaine de caractères vide "" :

Si l'indice de fin n'est pas spécifié, substring() effectuera l'extraction des caractères jusqu'à la fin de la chaine.

let chaine = "VemoTech.fr";
let ss_chaine = chaine.substring(5); 

Aperçu dans le navigateur :

Après l'exécution de ce script, la variable ss_chaine contient la chaine de caractères "ech.fr" :

Si l'un des indices est plus grand que chaine.length, il sera traité comme chaine.length.

let chaine = "VemoTech.fr";
let ss_chaine = chaine.substring(2, 6);

Aperçu dans le navigateur :

Après l'exécution de ce script, la variable ss_chaine contient la chaine de caractères "moTe".

Si les indices sont inversés, substring() rétablit l'ordre logique afin de les traiter comme si ils avaient été passés dans le bon ordre.

let chaine = "VemoTech.fr";
let ss_chaine = chaine.substring(4, 2);

Aperçu dans le navigateur :

Après l'exécution de ce script, la variable ss_chaine contient la chaine de caractères "mo".

La méthode "slice()"

La méthode slice() est une méthode d'extraction qui ressemble fortement à substring() mais avec une option en plus. Si une valeur négative est transmise pour la position de fin, slice() va extraire la chaine jusqu'à la fin, en décomptant le nombre de caractères correspondant.

Exemple :

let chaine = "VemoTech.fr";
let ss_chaine = chaine.slice(0, -3);

Après l'exécution de ce script, la variable ss_chaine contient la chaine de caractères "aze".

Aperçu dans le navigateur :

L'utilisation de substring() dans les mêmes conditions donnerait en retour une chaine vide car toute valeur d'indice négative est remplacée par 0 pour cette fonction. D'autre part, contrairement à substring(), slice() ne change pas l'ordre des indices, si l'indice de fin est inférieur à celui du début, slice() retournera une chaine vide.

Remplacer une expression avec replace()

La méthode replace() recherche une expression dans une chaine de caractères et la remplace par une autre. Elle utilise deux paramètres :

• Le premier correspond à l'expression qui doit être recherchée et remplacée,
• Le second correspond à l'expression qui doit être utilisée pour le remplacement.

La méthode replace() retourne une nouvelle chaine de caractères qui contient les modifications, la chaine de départ n'est pas modifiée.

Exemple :

let chaine1 = "azerty";
let chaine2 = chaine1.replace("az", "qw");

Aperçu dans le navigateur :

Après l'exécution de ce script, la variable chaine2 contient la chaine de caractères "qwerty".

Dans le cas où l'expression à rechercher est une chaine de caractères, seule la première occurrence de cette expression est remplacée, pour remplacer toutes les occurrences, il faut passer par une expression régulière (cette partie sera vue plus tard dans la formation 😉).

Vérifier l'existence d'une expression avec la méthode "includes()"

La méthode includes() permet de déterminer si une chaine de caractères est inclue dans une autre. Si la chaine recherchée a été trouvée, includes() retourne la valeur true.

Exemple :

let chaine = "azerty";
let verif = chaine.includes("er");    
// verif vaut true car l'expression "er" est présente dans la chaine "azerty"


let verif = chaine.includes("et");
// verif vaut false car l'expression "et" n'est pas présente dans la chaine "azerty"

Par défaut, includes() commence la recherche de à partir du premier caractère (indice 0) et la chaine est parcourue dans sa totalité. Cependant, il est possible d'ajouter un second paramètre pour spécifier le rang à partir duquel on souhaite commencer la recherche.

Exemple :

let chaine = "azerty";
let verif = chaine.includes("er", 1);    
// verif vaut toujours true car l'expression "er" est toujours présente dans la partie de la chaine qui commence à partir du caractère de rang 1 "zerty"


let verif = chaine.includes("er", 3);
// verif vaut false car l'expression "er" n'est plus présente dans la partie de la chaine qui commence à partir du caractère de rang 3 "rty"

Vérifier qu'une chaine commence ou se termine par une expression particulière avec les méthodes "startsWith()" et "endWith()"

La méthode startsWith() permet de déterminer si une chaine de caractères commence par une expression en particulier. Dans ce cas, startsWith() retourne la valeur true.

Exemple :

let chaine = "azerty";
let verif = chaine.startsWith("az");
// verif vaut true car la chaine "azerty" commence bien par l'expression "az"


let verif = chaine.includes("ty");
// verif vaut false car la chaine "azerty" ne commence pas par l‘expression "ty"

La méthode endWith() permet de déterminer si une chaine de caractères se termine par une expression en particulier. Dans ce cas, endWith() retourne la valeur true.

Exemple :

let chaine = "azerty";
let verif = chaine.endWith("ty");
// verif vaut true car la chaine "azerty" se termine bien par l'expression "ty" 


let verif = chaine.includes("az");

// verif vaut false car la chaine "azerty" ne se termine pas par l‘expression "az"

Découper une chaine de caractères avec la méthode "split()"

La méthode split() découpe une chaine de caractères en plusieurs sous-chaines à l'aide d'un séparateur et retourne un tableau contenant l'ensemble de ces sous-chaines. Cette méthode nécessite un paramètre qui représente le séparateur utilisé.

Exemple :

let chaine = "azerty et qwerty";
let splitMots = chaine.split(" ");   // le séparateur utilisé ici est le caractère correspondant à l'espace

// splitMots est un tableau qui contient les 3 sous-chaines => ["azerty","et","qwerty"];

Les fonctions de conversion "parseInt()" et "parseFloat()"

Les fonctions parseInt() et parseFloat() sont des fonctions globales de JavaScript, elles sont disponibles au plus haut niveau de l'environnement JavaScript et peuvent être appelées directement sans passer par un objet.

La fonction "parseInt()"

La fonction parseInt() permet de convertir une chaine de caractères en un nombre entier si cela est possible, cette fonction utilise 2 paramètres :

• La chaine de caractère qui sera analysée pour effectuer la conversion,
• Un nombre entier qui représente la base utilisée pour calculer la valeur qui devra être retournée.

Exemple :

let chaineNum = "28";
let valNum_10 = parseInt(chaineNum, 10);
let valNum_12 = parseInt(chaineNum, 16);

// valNum_10 contient un nombre entier qui vaut 28
// valNum_12 contient un nombre entier qui vaut 40 car parseInt calcule 28 en base 16

Si le premier caractère de la chaine ne permet pas d'obtenir un nombre d'après la base fournie, parseInt() renvoie la valeur NaN (Not a Number) :

let chaineNum = "A8";
let valNum_10 = parseInt(chaineNum, 10);
let valNum_12 = parseInt(chaineNum, 16);

// valNum_10 contient la valeur Nan car le caractère "A" ne correspond pas à un chiffre en base 10 (retourne Nan : Not a Number)
// valNum_12 contient un nombre entier qui vaut 168 car le caractère "A" correspond à un chiffre en base 16

Si, lors de l'analyse de la chaine, parseInt() rencontre un caractère qui n'est pas un chiffre dans la base donnée, ce caractère ainsi que les suivants seront ignorés :

let chaineNum = "8AFJ";
let valNum_10 = parseInt(chaineNum, 10);
let valNum_12 = parseInt(chaineNum, 16);

// valNum_10 contient la valeur 8 car parseInt() ignore le caractère "A" et les suivants 
// valNum_12 contient un nombre entier qui vaut 2223 car cette fois-ci les trois premiers caractères de la chaine représentent bien des chiffres en base 16 

La fonction parseFloat()

La fonction parseFloat() permet de convertir une chaine de caractères en un nombre flottant si cela est possible.

Exemple :

let chaineNum = "28.08";
let valNum = parseFloat(chaineNum);

// valNum contient le nombre flottant 28.08

Attention ! Pour cette fonction, le séparateur décimal qui convient est le point et non la virgule :

let chaineNum = "28,08";
let valNum = parseFloat(chaineNum);

// valNum contient le nombre 28 car la virgule n'est pas reconnue comme séparateur décimal    

Par contre, la notation avec un exposant (à l'aide du caractère 'e' ou 'E') est interprétée correctement par parseFloat() :

let chaineNum = "2808e-2";
let valNum = parseFloat(chaineNum);

// valNum contient le nombre 28.08

Si, lors de l'analyse de la chaine, parseFloat() rencontre un caractère qui n'est pas un chiffre, un point, un exposant ou le signe + ou - , ce caractère ainsi que les suivants seront ignorés.

Exemple :

let chaineNum = "28.0a82";
let valNum = parseFloat(chaineNum);

// valNum contient le nombre 28.0 car parseFloat() ignore le caractère "a" et les suivants