Les chaînes de caractères en JavaScript
En JavaScript, les chaînes servent à stocker et manipuler du texte. Apprenez à les créer, les utiliser et les comparer sur cette page.
En JavaScript, les chaînes de caractères (strings) servent à stocker et manipuler du texte. Contrairement à certains autres langages, JavaScript ne possède pas de type distinct pour un caractère unique — un caractère est simplement une string de longueur 1. Le format interne de toute string est toujours UTF-16, c'est pourquoi chaque caractère correspond à un code numérique (nous y reviendrons plus bas).
Une string représente zéro ou plusieurs caractères écrits entre guillemets. Les strings constituent l'un des types de données primitifs de JavaScript, mais elles exposent de nombreuses méthodes utiles — consultez les méthodes des primitives pour comprendre pourquoi une primitive peut avoir des méthodes.
Sur cette page, vous apprendrez à créer des strings (avec des guillemets simples, doubles et des backticks), à utiliser des caractères spéciaux, à lire la longueur d'une string, à accéder aux caractères individuels, à extraire des sous-chaînes, à changer la casse, à chercher à l'intérieur d'une string et à comparer des strings correctement.
Fonctions de string courantes
| Fonction | Description |
|---|---|
charAt(index) | Retourne le caractère à l'index spécifié. |
charCodeAt(index) | Retourne le code Unicode du caractère à l'index spécifié. |
concat(...strings) | Concatène les arguments string à la string appelante et retourne une nouvelle string. |
includes(searchString, position) | Détermine si la string appelante contient searchString. |
indexOf(searchValue, fromIndex) | Retourne l'index de la première occurrence de searchValue dans la string, en commençant la recherche à fromIndex. Retourne -1 si la valeur n'est pas trouvée. |
lastIndexOf(searchValue, fromIndex) | Retourne l'index de la dernière occurrence de searchValue dans la string appelante, en cherchant à reculons depuis fromIndex. Retourne -1 si la valeur n'est pas trouvée. |
match(regexp) | Récupère les correspondances lors de la mise en correspondance d'une string avec une expression régulière. |
matchAll(regexp) | Retourne un itérateur de tous les résultats correspondant à une string contre une expression régulière, y compris les groupes capturants. |
repeat(count) | Retourne une nouvelle string composée de la string appelante répétée count fois. |
replace(searchFor, replaceWith) | Remplace la première correspondance d'une sous-chaîne ou d'un motif par une string de remplacement. |
replaceAll(searchFor, replaceWith) | Remplace toutes les correspondances d'une sous-chaîne ou d'un motif par une string de remplacement. |
search(regexp) | Recherche dans la string une correspondance avec une expression régulière et retourne l'index de la correspondance. |
slice(startIndex, endIndex) | Extrait une section d'une string et la retourne comme nouvelle string, sans modifier la string originale. |
split(separator, limit) | Divise une string en une liste ordonnée de sous-chaînes, place ces sous-chaînes dans un array et retourne cet array. La division se fait en recherchant un motif fourni comme premier paramètre de la méthode. |
startsWith(searchString, position) | Détermine si la string appelante commence par les caractères de searchString. |
substring(startIndex, endIndex) | Retourne la partie de la string entre les index de début et de fin, ou jusqu'à la fin de la string. |
toLowerCase() | Retourne la string appelante convertie en minuscules. |
toUpperCase() | Retourne la string appelante convertie en majuscules. |
trim() | Supprime les espaces blancs aux deux extrémités de la string. |
trimStart() ou trimLeft() | Supprime les espaces blancs au début de la string. |
trimEnd() ou trimRight() | Supprime les espaces blancs à la fin de la string. |
valueOf() | Retourne la valeur primitive d'un objet String. |
Les guillemets
JavaScript vous offre trois façons de délimiter une string : les guillemets simples, les guillemets doubles et les backticks :
let single = 'single-quoted';
let double = "double-quoted";
let backticks = `backticks`;Les guillemets simples et doubles se comportent de manière identique — choisissez un style et restez cohérent. Les backticks sont différents : ils prennent en charge les template literals, ce qui vous permet d'incorporer n'importe quelle expression directement dans la string en l'enveloppant dans ${…} :
L'expression à l'intérieur de ${…} peut être n'importe quoi — une variable, un calcul ou un appel de fonction :
Un autre avantage clé des backticks est qu'ils permettent à une string de s'étendre sur plusieurs lignes :
Les guillemets simples et doubles ne peuvent pas s'étendre sur plusieurs lignes par eux-mêmes. Insérer un saut de ligne brut dans ceux-ci est une erreur de syntaxe :
let guestList = "Guests: // SyntaxError: Invalid or unexpected token
* John ";Les guillemets simples et doubles sont antérieurs aux backticks, ce qui fait des backticks le choix le plus moderne et le plus puissant.
Vous pouvez également placer une « fonction de template » (un tagged template) avant le premier backtick :
func`string`;La fonction func est appelée automatiquement et reçoit les parties de string littérales ainsi que les expressions incorporées, afin de pouvoir les traiter. C'est ainsi que les bibliothèques implémentent des templates personnalisés, mais dans le code quotidien c'est rarement nécessaire.
Les caractères spéciaux
Vous pouvez créer un affichage multiligne à partir de strings entre guillemets simples ou doubles à l'aide de \n (le caractère de nouvelle ligne), comme ceci :
Il existe d'autres caractères spéciaux moins courants.
Vous en trouverez quelques-uns dans la liste ci-dessous :
- \', \" ces caractères spéciaux sont utilisés pour les guillemets
- \r - retour chariot. Ce caractère est maintenant utilisé seul. Une combinaison de deux caractères \r\n est utilisée pour représenter un saut de ligne dans les fichiers texte Windows.
- \\ - barre oblique inverse (backslash)
- \t - tabulation
- \xXX - caractère Unicode avec un code hexadécimal particulier XX
- \uXXXX - symbole Unicode avec le code hexadécimal XXXX en encodage UTF-16. Il doit comprendre exactement 4 chiffres.
Voici des exemples avec des séquences d'échappement Unicode :
Chaque caractère spécial commence par une barre oblique inverse, c'est pourquoi la barre oblique inverse est également appelée le caractère d'échappement. Vous pouvez l'utiliser pour insérer un guillemet correspondant dans une string :
La barre oblique inverse existe uniquement pour indiquer à JavaScript comment lire le code source — elle disparaît une fois la string créée, elle n'est donc pas stockée en mémoire. Lorsque vous avez réellement besoin d'une barre oblique inverse dans la string, doublez-la :
La longueur de la string
La propriété length vous donne le nombre de caractères dans une string :
Notez que \n est un caractère spécial unique, donc la longueur est 7 (W3Docs plus une nouvelle ligne), et non 8.
Une erreur courante consiste à appeler str.length() au lieu de lire str.length. length est une propriété, pas une méthode — ajouter () provoque une erreur « not a function ».
Accéder aux caractères
Les crochets [pos] sont la façon habituelle d'obtenir le caractère à une position donnée. Vous pouvez également appeler la méthode str.charAt(pos). Les positions commencent à zéro, donc le premier caractère est à l'index 0 :
La seule différence : si aucun caractère n'existe à la position, str[pos] retourne undefined tandis que str.charAt(pos) retourne une string vide ''. Le code moderne préfère généralement les crochets ; charAt est rarement utilisé aujourd'hui.
Les strings sont immuables
Les strings en JavaScript sont immuables — vous ne pouvez pas modifier un caractère en place. L'affectation ci-dessous échoue silencieusement (en mode strict, elle lève une exception), donc le caractère original reste inchangé :
À la place, construisez une toute nouvelle string et assignez-la à la variable :
Changer la casse
Deux méthodes changent la casse de toute une string — toUpperCase() et toLowerCase() :
Pour mettre en minuscule un seul caractère, accédez d'abord à ce caractère dans la string, puis appelez la méthode sur ce caractère :
Rechercher une sous-chaîne
Il existe plusieurs façons de rechercher une sous-chaîne à l'intérieur d'une string.
str.indexOf
str.indexOf(substr, pos) recherche substr dans str, en commençant optionnellement à partir de la position pos. Il retourne l'index de la première correspondance, ou -1 s'il n'y a pas de correspondance :
str.lastIndexOf
str.lastIndexOf(substr, pos) fonctionne comme indexOf, mais recherche depuis la fin de la string vers le début, retournant l'index de la dernière correspondance.
Un piège courant : n'utilisez pas indexOf directement dans un test if. Parce qu'une correspondance à la position 0 est falsy, cela semble correct mais est erroné :
Comparez toujours avec -1 à la place :
includes, startsWith, endsWith
La méthode plus moderne str.includes(substr, pos) retourne true ou false selon que str contient substr. Utilisez-la lorsque vous avez seulement besoin de savoir si une correspondance existe, pas où :
Son deuxième argument optionnel est la position à partir de laquelle commencer la recherche :
str.startsWith(substr) et str.endsWith(substr) sont étroitement liés — ils testent le début et la fin de la string :
Extraire une sous-chaîne
JavaScript dispose de trois méthodes pour obtenir une sous-chaîne : slice, substring et substr. Dans le code moderne, slice est la méthode recommandée — elle est la plus flexible et substr est considérée comme héritée (legacy).
str.slice(start, end)
slice retourne la partie de la string de start jusqu'à (mais sans inclure) end :
Si le deuxième argument est omis, slice s'exécute jusqu'à la fin de la string :
Vous pouvez également utiliser des valeurs négatives, qui comptent depuis la fin :
str.substring(start, end)
substring retourne la partie de la string entre start et end. Elle ressemble beaucoup à slice, avec une différence notable : si start est supérieur à end, substring intervertit les deux arguments, alors que slice retourne une string vide. Elle traite également les arguments négatifs comme 0 :
str.substr(start, length)
substr retourne la partie de la string à partir de start avec une length donnée. Contrairement aux autres, son deuxième argument est une longueur, pas une position de fin. Cette méthode est héritée (legacy) — préférez slice dans le nouveau code.
Un start négatif compte depuis la fin :
Comparaison de strings
Les opérateurs <, >, <= et >= comparent les strings caractère par caractère, en utilisant le code Unicode de chaque caractère (voir les opérateurs de comparaison pour les règles générales). Deux conséquences surprennent souvent les débutants :
- Une lettre minuscule est « supérieure à » une lettre majuscule, car les lettres minuscules ont des codes plus élevés :
- Les lettres avec des marques diacritiques sont triées « hors ordre » — elles se trouvent en dehors de la plage de base A–Z, donc elles sont comparées comme plus grandes :
Pour cette raison, les opérateurs de comparaison conviennent bien pour trier strictement par code, mais pas pour un ordre alphabétique convivial. Pour une comparaison tenant compte des paramètres régionaux, utilisez str.localeCompare(other), qui retourne un nombre négatif, 0 ou un nombre positif :
Les caractères et leurs codes
Puisque les strings sont en UTF-16, chaque caractère possède un code numérique. str.codePointAt(pos) retourne le code du caractère à la position pos :
String.fromCodePoint(code) fait l'inverse — il construit un caractère à partir d'un code numérique :
Vous pouvez également insérer un caractère par son code dans un littéral de string en utilisant \u suivi du code hexadécimal :
À titre d'exemple plus complet, voici une string construite à partir des caractères avec les codes 65..220 :
Les lettres majuscules viennent en premier, puis plusieurs caractères spéciaux, et le résultat se termine aux alentours de Ö.
Sujets connexes
- Les types de données JavaScript — la place des strings parmi les primitives.
- Les méthodes des primitives — comment une string primitive peut avoir des méthodes.
- Les nombres — le type primitif complémentaire.
- Les opérateurs de comparaison — les règles complètes de comparaison.
- Les méthodes d'array — utiles après que
split()transforme une string en array.