Comment assigner une chaîne multiligne à une variable en JavaScript : analyse pour débutants
\n\nAvez-vous déjà écrit un long texte dans du code en pensant : « Je ne peux pas simplement appuyer sur Entrée et continuer sur une nouvelle ligne ? » Si vous êtes débutant en JavaScript, vous avez probablement déjà rencontré ce problème. Vous essayez de sauvegarder un texte multiligne dans une variable, et vous obtenez une erreur de syntaxe. Cela vous dit quelque chose ?
\n\nLa question « How can I assign a multiline string literal to a variable? » est l'une des plus populaires sur Stack Overflow. Des milliers de développeurs cherchent une réponse. Et ce n'est pas surprenant : travailler avec des chaînes multilignes est une base que tout développeur JavaScript doit maîtriser.
\n\nDans cet article, nous ne donnerons pas simplement une réponse sèche. Nous analyserons trois méthodes fonctionnelles, montrerons des exemples concrets et vous indiquerons quelle méthode choisir pour que votre code soit propre, lisible et sans maux de tête.
\n\nPourquoi JavaScript n'aime-t-il pas les sauts de ligne entre guillemets ?
\n\nCommençons par comprendre le problème principal. Si vous essayez d'écrire ceci :
\n\nlet message = "Bonjour !\nComment ça va ?\nTout va bien ?";\nconsole.log(message);\n\n… vous obtiendrez une erreur SyntaxError: unterminated string literal. Pourquoi ? Parce que dans les chaînes classiques (entre guillemets doubles ou simples), JavaScript considère que la chaîne se termine sur la même ligne où elle a commencé. Le saut de ligne brise physiquement la chaîne.
\n\nMais ne vous inquiétez pas. Nous avons au moins trois méthodes pour contourner cette limitation. Et la première est la plus moderne et la plus pratique.
\n\nMéthode 1 : Littéraux de gabarit (Template Literals) — votre nouveau meilleur ami
\n\nDepuis ES6 (ECMAScript 2015), JavaScript dispose des littéraux de gabarit. Ce sont des chaînes délimitées par des accents graves (` `). Et ils résolvent définitivement le problème des chaînes multilignes.
\n\nRegardez comme c'est simple :
\n\nlet multilineString = `Ceci est la première ligne.\nCeci est la deuxième ligne.\nEt ceci est la troisième ligne.`;\n\nconsole.log(multilineString);\n// Affichage :\n// Ceci est la première ligne.\n// Ceci est la deuxième ligne.\n// Et ceci est la troisième ligne.\n\nTout fonctionne immédiatement. Vous écrivez simplement le texte avec des sauts de ligne, et JavaScript les conserve tels quels. Pas de caractères superflus, pas de magie.
\n\nPourquoi est-ce la meilleure option pour les débutants ?
\n- \n
- Lisibilité : Le code ressemble à ce que vous avez imaginé. \n
- Support de l'interpolation : Vous pouvez insérer des variables directement dans la chaîne avec
${...}. \n - Standard : Tous les navigateurs modernes et Node.js prennent en charge les littéraux de gabarit. \n
Exemple avec interpolation :
\n\nlet name = "Anna";\nlet greeting = `Bonjour, ${name} !\nBienvenue sur PythonLib.\nAujourd'hui est une excellente journée pour apprendre le code.`;\n\nconsole.log(greeting);\n// Affichage :\n// Bonjour, Anna !\n// Bienvenue sur PythonLib.\n// Aujourd'hui est une excellente journée pour apprendre le code.\n\nCette méthode est si pratique que dans le développement moderne, elle est utilisée dans 90 % des cas. Si vous débutez, retenez celle-ci.
\n\nMéthode 2 : Concaténation de chaînes (méthode ancienne mais fiable)
\n\nAvant l'apparition des littéraux de gabarit, les développeurs utilisaient la concaténation — l'assemblage de chaînes avec l'opérateur +. Cette méthode est toujours pertinente, surtout si vous travaillez avec du code très ancien ou si vous ne pouvez pas utiliser ES6 pour une raison quelconque.
Voici à quoi cela ressemble :
\n\nlet multilineString = "Ceci est la première ligne.\\n" +\n "Ceci est la deuxième ligne.\\n" +\n "Et ceci est la troisième ligne.";\n\nconsole.log(multilineString);\n// Affichage :\n// Ceci est la première ligne.\n// Ceci est la deuxième ligne.\n// Et ceci est la troisième ligne.\n\nNotez le \\n — c'est une séquence d'échappement