Méthodes de chaîne de caractères JavaScript

Méthodes des chaînes de caractères JavaScript

Les chaînes de caractères JavaScript sont immuables, ce qui signifie que leur contenu ne peut pas être modifié une fois créé. Les méthodes de chaîne opèrent sur une chaîne et renvoient une nouvelle chaîne ou une valeur différente, sans modifier la chaîne originale. Cette section couvre certaines des méthodes de chaîne les plus courantes et les plus utiles.

Recherche de sous-chaînes : indexOf(), lastIndexOf(), includes(), startsWith(), endsWith()

indexOf(searchValue[, fromIndex])

Renvoie l’indice de la première occurrence de searchValue dans la chaîne. Si elle n’est pas trouvée, renvoie -1. fromIndex est une position de départ facultative pour la recherche.

const text = "Hello world, welcome to the world!";
console.log(text.indexOf("world"));       // Résultat : 6
console.log(text.indexOf("world", 10));  // Résultat : 29 (commence la recherche à partir de l'indice 10)
console.log(text.indexOf("galaxy"));      // Résultat : -1

lastIndexOf(searchValue[, fromIndex])

Similaire à indexOf(), mais renvoie l’indice de la dernière occurrence, en recherchant à rebours à partir de fromIndex (ou de la fin de la chaîne si fromIndex est omis).

console.log(text.lastIndexOf("world"));    // Résultat : 29

includes(searchValue[, fromIndex]) (ES6)

Vérifie si une chaîne contient searchValue. Renvoie true ou false. Plus lisible pour des vérifications de présence simples.

console.log(text.includes("welcome")); // Résultat : true
console.log(text.includes("galaxy"));   // Résultat : false

startsWith(searchValue[, position]) (ES6)

Vérifie si une chaîne commence par searchValue. position est une position de départ facultative. Renvoie true ou false.

console.log(text.startsWith("Hello")); // Résultat : true
console.log(text.startsWith("world", 6)); // Résultat : true (vérifie si la chaîne à partir de l'indice 6 commence par "world")

endsWith(searchValue[, length]) (ES6)

Vérifie si une chaîne se termine par searchValue. length est une longueur facultative de la chaîne à considérer. Renvoie true ou false.

console.log(text.endsWith("world!")); // Résultat : true
console.log(text.endsWith("welcome", 20)); // Résultat : true (considère les 20 premiers caractères : "Hello world, welcome")

Extraction de parties de chaîne : slice(), substring(), substr() (Hérité)

slice(startIndex[, endIndex])

Extrait une section d’une chaîne et la renvoie sous forme de nouvelle chaîne. startIndex est inclusif, endIndex est exclusif. Les indices négatifs comptent à partir de la fin de la chaîne.

const fruitStr = "Apple, Banana, Kiwi";
console.log(fruitStr.slice(7, 13));   // Résultat : "Banana"
console.log(fruitStr.slice(7));       // Résultat : "Banana, Kiwi" (jusqu'à la fin)
console.log(fruitStr.slice(-4));      // Résultat : "Kiwi" (les 4 derniers caractères)
console.log(fruitStr.slice(-12, -6)); // Résultat : "Banana"

substring(startIndex[, endIndex])

Similaire à slice(), mais si startIndex est supérieur à endIndex, ils sont échangés. Les indices négatifs sont traités comme 0.

console.log(fruitStr.substring(7, 13)); // Résultat : "Banana"
console.log(fruitStr.substring(13, 7)); // Résultat : "Banana" (indices échangés)
console.log(fruitStr.substring(-5, 13)); // Résultat : "Apple, Banana" (indice négatif traité comme 0)

substr(startIndex[, length]) - Hérité/Obsolète

Extrait une sous-chaîne commençant à startIndex avec une length spécifiée. Note : Cette méthode est considérée comme une fonctionnalité héritée dans ECMAScript et son utilisation est déconseillée. Les méthodes slice() ou substring() sont préférées.

// console.log(fruitStr.substr(7, 6)); // Résultat : "Banana" (utiliser slice ou substring à la place)

Remplacement du contenu de la chaîne : replace(), replaceAll()

replace(searchValue, replacementValue)

Renvoie une nouvelle chaîne avec tout ou partie des correspondances de searchValue remplacées par replacementValue. Si searchValue est une chaîne, seule la première occurrence est remplacée. Si searchValue est une expression régulière avec l’indicateur global (g), toutes les occurrences sont remplacées.

const message = "Please visit Microsoft! Microsoft is great.";
console.log(message.replace("Microsoft", "W3Schools")); // Résultat : "Please visit W3Schools! Microsoft is great."
console.log(message.replace(/Microsoft/g, "W3Schools")); // Résultat : "Please visit W3Schools! W3Schools is great."

replaceAll(searchValue, replacementValue) (ES2021)

Renvoie une nouvelle chaîne avec toutes les occurrences de searchValue remplacées par replacementValue. searchValue peut être une chaîne ou une expression régulière non globale.

console.log(message.replaceAll("Microsoft", "Google")); // Résultat : "Please visit Google! Google is great."

Changement de casse : toUpperCase(), toLowerCase()

toUpperCase() : Convertit une chaîne en majuscules.

const greeting = "Hello World!";
console.log(greeting.toUpperCase()); // Résultat : "HELLO WORLD!"

toLowerCase() : Convertit une chaîne en minuscules.

console.log(greeting.toLowerCase()); // Résultat : "hello world!"

Concaténation de chaînes : opérateur concat() et + / Littéraux de gabarit

concat(string1[, string2, ...])

Joint deux ou plusieurs chaînes et renvoie une nouvelle chaîne.

const str1 = "Hello";
const str2 = " ";
const str3 = "World";
console.log(str1.concat(str2, str3, "!")); // Résultat : "Hello World!"

L’opérateur + ou les littéraux de gabarit sont généralement plus courants et souvent plus lisibles pour la concaténation :

console.log(str1 + str2 + str3 + "!");             // Résultat : "Hello World!"
console.log(`${str1}${str2}${str3}!`);         // Résultat : "Hello World!" (en utilisant des littéraux de gabarit)

Suppression des espaces blancs : trim(), trimStart(), trimEnd()

trim() : Supprime les espaces blancs des deux extrémités d’une chaîne.

const paddedText = "   Hello, World!   ";
console.log(paddedText.trim()); // Résultat : "Hello, World!"

trimStart() ou trimLeft() (ES2019) : Supprime les espaces blancs du début d’une chaîne.

console.log(paddedText.trimStart()); // Résultat : "Hello, World!   "

trimEnd() ou trimRight() (ES2019) : Supprime les espaces blancs de la fin d’une chaîne.

console.log(paddedText.trimEnd());   // Résultat : "   Hello, World!"

Compléter les chaînes : padStart(), padEnd() (ES2017)

padStart(targetLength[, padString])

Complète la chaîne actuelle depuis le début avec une chaîne donnée (répétée, si nécessaire) jusqu’à ce que la chaîne résultante atteigne la targetLength. Le padString par défaut est un espace.

const numStr = "5";
console.log(numStr.padStart(4, "0")); // Résultat : "0005"
console.log("abc".padStart(5));       // Résultat : "  abc"

padEnd(targetLength[, padString])

Complète la chaîne actuelle depuis la fin.

console.log(numStr.padEnd(4, "*"));   // Résultat : "5***"
console.log("abc".padEnd(5, "."));    // Résultat : "abc.."

Extraction de caractères de chaîne : charAt(), charCodeAt(), Accès par propriété

charAt(index)

Renvoie le caractère à un index spécifié dans une chaîne.

const myString = "HELLO";
console.log(myString.charAt(0)); // Résultat : "H"

charCodeAt(index)

Renvoie la valeur Unicode (unité de code UTF-16) du caractère à un index spécifié.

console.log(myString.charCodeAt(0)); // Résultat : 72 (Unicode pour 'H')

Accès par propriété string[index] (ES5+)

Les chaînes peuvent être traitées comme des tableaux en lecture seule pour accéder aux caractères par indice. Cette méthode est maintenant largement prise en charge et généralement sûre pour la lecture.

console.log(myString[1]); // Résultat : "E"

Note : Tenter d’affecter une valeur à une position de caractère (par exemple, myString[0] = "J";) ne modifiera pas la chaîne (en raison de l’immuabilité) et ne provoquera pas d’erreur en mode non strict (pourrait provoquer une erreur en mode strict selon le moteur).

Conversion d’une chaîne en tableau : split()

split([separator[, limit]])

Divise une chaîne en un tableau de sous-chaînes, en utilisant separator pour déterminer où effectuer les divisions. limit est un entier facultatif spécifiant le nombre maximum de divisions.

const csvData = "apple,banana,cherry,date";
console.log(csvData.split(","));     // Résultat : ["apple", "banana", "cherry", "date"]
console.log("Hello World".split(" ")); // Résultat : ["Hello", "World"]
console.log("test".split(""));         // Résultat : ["t", "e", "s", "t"] (divise en caractères individuels)

// Si le séparateur est omis ou non trouvé, renvoie un tableau avec la chaîne originale comme seul élément.
console.log(" одиночный ".split());       // Résultat : [" одиночный "]

Référence complète des chaînes

Ceci couvre de nombreuses méthodes de chaîne courantes. Pour une liste complète, des descriptions et des exemples de toutes les propriétés et méthodes de chaîne, consultez la documentation MDN Web Docs sur String.