Ecrire une chaîne multiligne en JavaScript

Harshit Jindal 12 octobre 2023
  1. Concaténer plusieurs lignes en JavaScript
  2. Utilisez la barre oblique inverse \ pour échapper aux nouvelles lignes littérales
  3. Utiliser des littéraux de modèle pour créer une chaîne mutliline en JavaScript
Ecrire une chaîne multiligne en JavaScript

Ce didacticiel explique comment écrire une chaîne multiligne en JavaScript. Dans l’ère pré ES6, il n’y avait pas de support direct pour les chaînes multilignes en JavaScript. Il y a plusieurs façons d’y parvenir, les méthodes pré-ES6 qui n’étaient pas si bonnes, et la méthode ES6, la méthode du sucre syntaxique. Nous couvrirons toutes ces méthodes une par une.

Concaténer plusieurs lignes en JavaScript

Nous pouvons diviser la chaîne en plusieurs sous-chaînes, puis utiliser le signe + pour les concaténer ensemble pour obtenir la chaîne unique complète. De cette façon, nous réalisons la division des chaînes en plusieurs lignes et les assemblons en une seule chaîne en même temps.

const str = 'This is DelftStack' +
    ' We make cool How to Tutorials' +
    ' &' +
    ' Make the life of other developers easier.';

Production:

"This is DelftStack We make cool How to Tutorials & Make the life of other developers easier."

C’était le moyen le plus simple et le plus prometteur d’écrire des chaînes multilignes avant l’introduction des littéraux de gabarit, mais cette méthode ne peut pas afficher la chaîne formée sous forme de chaînes multilignes et cela doit être réalisé en ajoutant un \n à la fin de chaque ligne.

Utilisez la barre oblique inverse \ pour échapper aux nouvelles lignes littérales

Nous pouvons ajouter une barre oblique inverse à la fin de chaque ligne pour créer une chaîne multiligne entre guillemets doubles/simples, car ce caractère nous aide à échapper au caractère de nouvelle ligne.

const str = 'This is DelftStack \
We make cool How to Tutorials \
& \
Make the life of other developers easier.';

Production:

"This is DelftStack We make cool How to Tutorials & Make the life of other developers easier."

Nous avons donc écrit la chaîne coupée sur plusieurs lignes tout en rassemblant la chaîne unie, ce qui nous aide à atteindre nos deux objectifs, la sortie d’affichage correcte et la lisibilité du code. Mais il n’est pas toujours souhaitable que nous souhaitons des chaînes qui sont réellement réparties sur plusieurs lignes, même lorsqu’elles sont affichées. Ceci est réalisé en utilisant des littéraux de modèle dans ES6.

Utiliser des littéraux de modèle pour créer une chaîne mutliline en JavaScript

Le template littéral est la nouvelle manière introduite par ES6 qui nous aide à écrire des chaînes multilignes à l’aide de backticks (ce caractère ` est appelé backtick). C’est de loin la meilleure solution car elle nous permet non seulement d’écrire des chaînes multilignes, mais aussi de les imprimer exactement de la même manière, ce qui n’était possible avec aucune des méthodes précédentes.

var str = `This is DelftStack 
We make cool How to Tutorials 
& 
Make the life of other developers easier.
`

Production:

This is DelftStack 
We make cool How to Tutorials 
& 
Make the life of other developers easier.
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

Article connexe - JavaScript String