Chaînes en Javascript

Qu'est-ce qu'une chaîne en JavaScript

Une chaîne est une séquence de lettres, de chiffres, de caractères spéciaux et de valeurs arithmétiques ou une combinaison de tous. Les chaînes peuvent être créées en entourant le littéral de la chaîne (c'est-à-dire les caractères de la chaîne) entre guillemets simples ( ') ou guillemets doubles ( "), comme illustré dans l'exemple ci-dessous :

var myString = 'Hello World!'; // Single quoted string

var myString = "Hello World!"; // Double quoted string

Vous pouvez utiliser des guillemets à l'intérieur d'une chaîne, tant qu'ils ne correspondent pas aux guillemets entourant la chaîne :

var str1 = "it's okay";

var str2 = 'He said "Goodbye"';

var str3 = "She replied 'Calm down, please'";

var str4 = 'Hi, there!"; // Syntax error

Cependant, vous pouvez toujours utiliser des guillemets simples à l'intérieur d'une chaîne à guillemets simples ou des guillemets doubles à l'intérieur de chaînes à guillemets doubles en échappant les guillemets avec une barre oblique inverse ( \), comme ceci :

var str1 = 'it\'s okay';

var str2 = "He said \"Goodbye\"";

var str3 = 'She replied \'Calm down, please\'';

La barre oblique inverse ( \) est appelée un caractère d'échappement, tandis que les séquences \'et \"que nous avons utilisées dans l'exemple ci-dessus sont appelées des séquences d'échappement .

Séquences d'échappement JavaScript

Les séquences d'échappement sont également utiles dans les situations où vous souhaitez utiliser des caractères qui ne peuvent pas être saisis à l'aide d'un clavier. Voici quelques autres séquences d'échappement les plus couramment utilisées.

• \n est remplacé par le caractère de nouvelle ligne
• \t est remplacé par le caractère de tabulation
• \r est remplacé par le caractère de retour chariot
• \b est remplacé par le caractère de retour arrière
• \\ est remplacé par un simple antislash ( \)

Voici un exemple pour clarifier le fonctionnement réel des séquences d'échappement :

var str1 = "The quick brown fox \n jumps over the lazy dog.";

document.write("<pre>" + str1 + "</pre>"); // Cree un retour à la ligne

var str2 = "C:\Users\Downloads";

document.write(str2); // affiche C:UsersDownloads


var str3 = "C:\\Users\\Downloads";

document.write(str3); // affiche C:\Users\Downloads

Exécution d'opérations sur des chaînes

JavaScript fournit plusieurs propriétés et méthodes pour effectuer des opérations sur des valeurs de chaîne. Techniquement, seuls les objets peuvent avoir des propriétés et des méthodes. Mais en JavaScript, les types de données primitifs peuvent agir comme des objets lorsque vous y faites référence avec la notation d'accès aux propriétés (c'est-à-dire la notation par points).

JavaScript rend cela possible en créant un objet wrapper temporaire pour les types de données primitifs. Ce processus est effectué automatiquement par l'interpréteur JavaScript en arrière-plan.

Obtenir la longueur d'une chaîne

La propriété length renvoie la longueur de la chaîne, c'est-à-dire le nombre de caractères contenus dans la chaîne. Cela inclut également le nombre de caractères spéciaux, tels que \t ou \n.

var str1 = "This is a paragraph of text.";

document.write(str1.length); // affiche 28

var str2 = "This is a \n paragraph of text.";

document.write(str2.length); // affiche 30, car \n est seulementu un seul charactère

Remarque : puisque length est une propriété, pas une fonction, n'utilisez donc pas de parenthèses après comme str.length(). Au lieu de cela, écrivez simplement str.length, sinon cela produira une erreur.

Recherche d'une chaîne à l'intérieur d'une autre chaîne

Vous pouvez utiliser la méthode indexOf() pour rechercher une sous-chaîne ou une chaîne dans une autre chaîne. Cette méthode renvoie l'index ou la position de la première occurrence d'une chaîne spécifiée dans une chaîne.

var str = "If the facts don't fit the theory, change the facts.";

var pos = str.indexOf("facts");

alert(pos); // affiche: 7

De même, vous pouvez utiliser la méthode stIndexOf() pour obtenir l'index ou la position de la dernière occurrence de la chaîne spécifiée dans une chaîne, comme ceci :

var str = "If the facts don't fit the theory, change the facts.";

var pos = str.lastIndexOf("facts");

alert(pos); // affiche: 46

Les méthodes indexOf()et lastIndexOf()renvoient toutes les deux -1si la sous-chaîne est introuvable. Les deux méthodes acceptent également un paramètre entier facultatif qui spécifie la position dans la chaîne à laquelle commencer la recherche. Voici un exemple :

var str = "If the facts don't fit the theory, change the facts.";

// Searching forwards

var pos1 = str.indexOf("facts", 20);

alert(pos1); // affiche: 46



// Searching backwards

var pos2 = str.lastIndexOf("facts", 20);

alert(pos2); // affiche: 7

Remarque : Les caractères d'une chaîne sont indexés de gauche à droite. L'indice du premier caractère est 0, et l'indice du dernier caractère d'une chaîne appelée myStr est myStr.length - 1.

Recherche d'un motif dans une chaîne

Vous pouvez utiliser la méthode search() pour rechercher un morceau de texte ou un motif particulier dans une chaîne.

Comme la méthode indexOf(), la méthode search() renvoie également l'index de la première correspondance et renvoie -1 si aucune correspondance n'a été trouvée, mais contrairement à la méthode indexOf(), cette méthode peut également prendre une expression régulière comme argument pour fournir des fonctionnalités de recherche avancées.

var str = "Color red looks brighter than color blue.";


// recherche sensible à la case

var pos1 = str.search("color");

alert(pos1); // 0utputs: 30


// recherche non sensible à la case utilisant le regex

var pos2 = str.search(/color/i);

alert(pos2); // 0utputs: 0

Remarque : La méthode search() ne prend pas en charge les recherches globales; il ignore le modificateur g (c'est-à-dire /pattern/g) de son argument d'expression régulière.

Vous en apprendrez plus sur les expressions régulières dans les prochains chapitres.

Extraire une sous-chaîne d'une chaîne

Vous pouvez utiliser la méthode slice() pour extraire une partie ou une sous-chaîne d'une chaîne.

Cette méthode prend 2 paramètres : index de début (index auquel commencer l'extraction) et un index de fin facultatif (index avant lequel terminer l'extraction), comme str.slice(startIndex, endIndex).

L'exemple suivant découpe une partie d'une chaîne de la position 4 à la position 15 :

var str = "The quick brown fox jumps over the lazy dog.";

var subStr = str.slice(4, 15);

document.write(subStr); // affiche : quick brown

Vous pouvez également spécifier des valeurs négatives. La valeur négative est traitée comme strLength + startIndex, où strLength est la longueur de la chaîne (c'est-à-dire str.length), par exemple, si startIndex est  -5, elle sera traitée comme strLength - 5. Si startIndex est supérieur ou égal à la longueur de la chaîne, la méthode slice() renvoie une chaîne vide. De plus, si optionnel endIndex n'est pas spécifié ou omis, la méthode slice() extrait jusqu'à la fin de la chaîne.

var str = "The quick brown fox jumps over the lazy dog.";

document.write(str.slice(-28, -19)); // affiche: fox jumps

document.write(str.slice(31)); // Affiche: the lazy dog.

Vous pouvez également utiliser la méthode substring() pour extraire une section de la chaîne donnée en fonction des index de début et de fin, comme str.substring(startIndex, endIndex). La méthode substring() est très similaire à la méthode slice(), à quelques différences près :

• Si l'un des arguments est inférieur à 0 ou vaut NaN, il est traité comme 0.
• Si l'un des arguments est supérieur à str.length, il est traité comme s'il l'était str.length.
• Si startIndex est supérieur à endIndex, alors substring() échangera ces deux arguments ; par exemple, str.substring(5, 0) == str.substring(0, 5).

L'exemple suivant vous montrera comment cette méthode fonctionne réellement :

var str = "The quick brown fox jumps over the lazy dog.";

document.write(str.substring(4, 15)); // Affiche: quick brown

document.write(str.substring(9, 0)); // Affiche: The quick

document.write(str.substring(-28, -19)); // Affiche rien

document.write(str.substring(31)); // Affiche: the lazy dog.

Extraction d'un nombre fixe de caractères d'une chaîne

JavaScript fournit également la méthode substr() qui est similaire à slice() avec une différence subtile, le deuxième paramètre spécifie le nombre de caractères à extraire au lieu de l'index de fin, comme str.substr(startIndex, length). Si length est 0 ou un nombre négatif, une chaîne vide est renvoyée. L'exemple suivant montre comment cela fonctionne :

var str = "The quick brown fox jumps over the lazy dog.";

document.write(str.substr(4, 15)); // Affiche: quick brown fox

document.write(str.substr(-28, -19)); // Affiche nothing

document.write(str.substr(-28, 9)); // Affiche: fox jumps

document.write(str.substr(31)); // Affiche: the lazy dog.

Remplacement du contenu d'une chaîne

Vous pouvez utiliser la méthode replace() pour remplacer une partie d'une chaîne par une autre chaîne. Cette méthode prend deux paramètres une expression régulière à faire correspondre ou une sous-chaîne à remplacer et une chaîne de remplacement, comme str.replace(regexp|substr, newSubstr).

Cette méthode replace() renvoie une nouvelle chaîne, elle n'affecte pas la chaîne d'origine qui restera inchangée. L'exemple suivant vous montrera comment cela fonctionne :

var str = "Color red looks brighter than color blue.";
var result = str.replace("color", "paint");
alert(result); // Affiche : Color red looks brighter than paint blue.

Par défaut, la méthode replace() remplace uniquement la première correspondance et est sensible à la casse. Pour remplacer la sous-chaîne dans une chaîne sans tenir compte de la casse, vous pouvez utiliser une expression régulière (regexp) avec un imodificateur, comme illustré dans l'exemple ci-dessous :

var str = "Color red looks brighter than color blue.";
var result = str.replace(/color/i, "paint");
alert(result); // Affiche: paint red looks brighter than color blue.

De même, pour remplacer toutes les occurrences d'une sous-chaîne dans une chaîne sans tenir compte de la casse, vous pouvez utiliser le modificateur g avec le modificateur i, comme ceci :

var str = "Color red looks brighter than color blue.";

var result = str.replace(/color/ig, "paint");

alert(result); // Affiche: paint red looks brighter than paint blue.

Conversion d'une chaîne en majuscule ou en minuscule

Vous pouvez utiliser la méthode toUpperCase() pour convertir une chaîne en majuscule, comme ceci :

var str = "Hello World!";

var result = str.toUpperCase();

document.write(result); // Affiche : HELLO WORLD!

De même, vous pouvez utiliser le toLowerCase() pour convertir une chaîne en minuscules, comme ceci :

var str = "Hello World!";
var result = str.toLowerCase();
document.write(result); // Affiche: hello world!

Concaténation de deux chaînes ou plus

Vous pouvez concaténer ou combiner deux ou plusieurs chaînes à l'aide des opérateurs d'affectation + et +=.

var hello = "Hello";

var world = "World";

var greet = hello + " " + world;

document.write(greet); // Affiche : Hello World


var wish  = "Happy";

wish += " New Year";

document.write(wish); // Affiche : Happy New Year

JavaScript fournit également une méthode concat() pour combiner des chaînes, mais ce n'est pas recommandé.

Accéder à des caractères individuels à partir d'une chaîne

Vous pouvez utiliser la méthode pour accéder à un caractère individuel à partir d'une chaîne, comme str.charAt(index). L'index spécifié doit être un entier compris entre 0 et str.length - 1. Si aucun index n'est fourni, le premier caractère de la chaîne est renvoyé, car la valeur par défaut est 0.

var str = "Hello World!";

document.write(str.charAt());  // Affiche: H

document.write(str.charAt(6)); // Affiche: W

document.write(str.charAt(30)); // Affiche rien

document.write(str.charAt(str.length - 1)); // Affiche: !

Il y a même une meilleure façon de le faire. Depuis ECMAScript 5, les chaînes peuvent être traitées comme des tableaux en lecture seule et vous pouvez accéder à des caractères individuels à partir d'une chaîne en utilisant des crochets ( []) au lieu de la charAt()méthode, comme illustré dans l'exemple suivant :

var str = "Hello World!";

document.write(str[0]); // Affiche: H

document.write(str[6]); // Affiche: W

document.write(str[str.length - 1]); // Affiche: !

document.write(str[30]); // Affiche: undefined

Remarque : La seule différence entre l'accès au caractère à partir d'une chaîne à l'aide de charAt() et crochet ( []) est que si aucun caractère n'est trouvé, [] renvoie undefined, alors que la charAt()  méthode renvoie une chaîne vide.

Fractionner une chaîne en un tableau

La méthode split() peut être utilisée pour diviser une chaîne en un tableau de chaînes, en utilisant la syntaxe str.split(separator, limit). L'argument seperator spécifie la chaîne à laquelle chaque fractionnement doit se produire, tandis que l'argument limit spécifie la longueur maximale du tableau.

Si l'argument separator est omis ou introuvable dans la chaîne spécifiée, la chaîne entière est affectée au premier élément du tableau. L'exemple suivant montre comment cela fonctionne :

var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";

var fruitsArr = fruitsStr.split(", ");

document.write(fruitsArr[0]); // Affiche: Apple

document.write(fruitsArr[2]); // Affiche: Mango

document.write(fruitsArr[fruitsArr.length - 1]); // Affiche: Papaya



// parcourir les éléments du tableau fruits

for(var i in fruitsArr) {  

    document.write("<p>" + fruitsArr[i] + "</p>");

}

Pour diviser une chaîne en un tableau de caractères, spécifiez une chaîne vide ( "") comme séparateur.

var str = "INTERSTELLAR";

var strArr = str.split("");

document.write(strArr[0]); // Affiche: I

document.write(strArr[1]); // Affiche: N

document.write(strArr[strArr.length - 1]); // Affiche: R



// Parcourir et afficher

for(var i in strArr) {  

    document.write("<br>" + strArr[i]);

}

Vous en apprendrez plus sur les instructions en boucle dans le chapitre sur les boucles JavaScript en détail.