Trois façons d'écrire une chaîne de caractères
En JavaScript, on dispose de trois délimiteurs pour créer une chaîne. Deux sont parfaitement interchangeables ; le troisième, lui, va beaucoup plus loin.
Les guillemets simples et doubles produisent exactement la même chaîne de caractères — choisis-en un et tiens-t'y (la plupart des codebases modernes utilisent les guillemets simples par défaut, ou laissent le formateur trancher). Les backticks, eux, produisent un template literal, et c'est là que ça devient intéressant : ils permettent l'interpolation et s'étalent sur plusieurs lignes.
En coulisses, les trois produisent le même type primitif string. Le délimiteur n'est qu'un choix syntaxique.
Séquences d'échappement et guillemets imbriqués
À l'intérieur d'une chaîne, un antislash introduit une séquence d'échappement. Les plus courantes sont \n (saut de ligne), \t (tabulation), \\ (antislash littéral), ainsi que \" / \' pour insérer le même guillemet que celui qui ouvre la chaîne :
Tu peux éviter la plupart des échappements en choisissant l'autre type de guillemets : 'She said "hi" and left.' ne nécessite aucun backslash. Pragmatique plutôt que dogmatique.
Les template literals : le super-pouvoir des backticks
Un template literal fait deux choses qu'une chaîne classique ne sait pas faire. D'abord, il permet l'interpolation d'expressions avec ${...} :
Tout ce qu'on met entre ${...} est une expression JavaScript à part entière, pas juste un nom de variable. Calculs, appels de fonctions, ternaires, et même d'autres template literals — tout est permis :
Ensuite, les template literals s'étendent sur plusieurs lignes sans avoir besoin de \n :
Les retours à la ligne présents dans le code source se retrouvent tels quels dans la chaîne. Dès qu'on dépasse le simple libellé court, les backticks sont quasiment toujours le bon choix.
L'interpolation, bien plus pratique que la concaténation
Avant l'arrivée des template literals, la seule façon de construire une chaîne dynamique en JavaScript, c'était l'opérateur + :
Les deux produisent exactement le même résultat. Le template literal se lit comme la phrase qu'il construit, alors que la version avec + t'oblige à jongler entre guillemets, espaces et opérateurs de concaténation. Garde le + uniquement quand tu ajoutes un petit bout à une chaîne existante. Dès que ça devient un peu plus long, passe aux backticks.
Les chaînes de caractères sont immuables
Chaque méthode qui semble modifier une chaîne renvoie en réalité une nouvelle chaîne :
Pour voir le changement, il faut bien affecter le résultat à une variable. C'est le genre de piège qui coince les débutants : ils écrivent s.replace("a", "b") en pensant que s va changer. Eh bien non. En JavaScript, les chaînes de caractères se comportent comme les nombres : la valeur elle-même est immuable, on ne peut que faire pointer la variable vers une nouvelle valeur.
Les méthodes string JavaScript que vous utiliserez vraiment
L'API des chaînes est vaste. Voici celles que vous sortirez du chapeau au quotidien :
Quelques points à garder en tête :
lengthest une propriété, pas une méthode — donc pas de parenthèses.- Avec une chaîne classique,
replacene remplace que la première occurrence trouvée. Pour tout remplacer, il faut passer parreplaceAllou une regex avec le flagg. slice(start, end)fonctionne sur un intervalle semi-ouvert : le caractère situé à l'indiceendn'est pas inclus.- Les indices négatifs de
slicecomptent à rebours depuis la fin :s.slice(-3)renvoie les trois derniers caractères.
Indexer et parcourir les caractères d'une string
En JavaScript, les chaînes se comportent comme des tableaux de caractères en lecture seule. On peut les indexer et les parcourir, mais impossible d'affecter une nouvelle valeur à une position donnée :
for...of parcourt les code points, ce qui gère correctement la majorité de l'Unicode. En passant par les indices (s[i]), on itère sur les unités de code UTF-16, ce qui peut couper en deux un emoji ou tout caractère hors BMP. Pour du texte classique, les deux approches se valent ; dès qu'il s'agit de contenu saisi par l'utilisateur, mieux vaut utiliser for...of ou [...s].
Les tagged template literals
Il reste une dernière forme à connaître, même si on l'utilise rarement au quotidien. Un tagged template literal appelle une fonction en lui passant séparément les morceaux de chaîne statiques et les valeurs interpolées :
La fonction tag décide de la forme finale de la chaîne — elle peut échapper du HTML, construire du SQL en toute sécurité, compiler du CSS ou parser du GraphQL. On croise ce pattern bien plus souvent dans des bibliothèques (styled-components, graphql-tag, lit-html) qu'on n'en écrit soi-même. Mais le jour où tu as besoin de traiter des chaînes de façon personnalisée, les tags sont l'outil le plus propre pour ça.
Pièges classiques
Voici quelques trucs qui posent souvent problème :
- Oublier d'assigner le résultat d'une méthode.
s.trim()tout seul ne fait rien. - Utiliser
+pour concaténer un nombre et une chaîne."Age: " + 30 + 5donne"Age: 305", pas"Age: 35". Les template literals évitent le souci :`Age: ${30 + 5}`. - Confondre
==et comparaison de chaînes. On reviendra sur l'égalité plus en détail, mais"1" == 1vauttruealors que"1" === 1vautfalse. Privilégie===. - Croire que
lengthcorrespond au nombre de caractères. Pour les emojis et autres caractères en paire de substitution,"".lengthvaut 2, pas 1. Passe par[..."".length]ouArray.from(s).lengthquand tu as besoin du nombre de caractères perçus par l'utilisateur.
La suite : Number et BigInt
Les chaînes de caractères sont un type primitif parmi d'autres ; les nombres en sont un autre, et le système numérique de JavaScript a ses propres particularités — un seul type Number pour les entiers comme pour les flottants, plus BigInt pour quand ça ne suffit pas. C'est le sujet de la page suivante.
Questions fréquentes
Quelle est la différence entre guillemets et backticks en JavaScript ?
Les guillemets simples (') et doubles (") produisent des strings classiques — les deux sont équivalents. Les backticks (`), eux, créent des template literals : ils acceptent l'interpolation via ${...} et s'étendent sur plusieurs lignes sans caractère d'échappement. Dès que tu insères une variable ou que tu écris du texte sur plusieurs lignes, pars directement sur les backticks.
Comment insérer une variable dans une string en JavaScript ?
Avec un template literal : entoure la chaîne de backticks et place l'expression dans ${...}. Par exemple, `Hello, ${name}!` évalue name et l'injecte dans le texte final. Tu peux mettre n'importe quelle expression à l'intérieur : ${a + b}, ${user.name.toUpperCase()}, et même d'autres template literals imbriqués.
Les strings sont-elles immuables en JavaScript ?
Oui. Chaque méthode de string (toUpperCase, slice, replace, etc.) renvoie une nouvelle chaîne au lieu de modifier l'originale. Si tu écris s.toUpperCase() sans affecter le résultat à une variable, rien ne change. C'est le même fonctionnement qu'en Python ou en Java.
C'est quoi un tagged template literal ?
Un tagged template literal appelle une fonction en lui passant séparément les morceaux de texte et les valeurs interpolées : tag`Hello, ${name}` revient à appeler tag(["Hello, ", ""], name). Des bibliothèques comme styled-components ou graphql-tag s'en servent pour analyser ou transformer le template avant de produire la valeur finale.
