Écrire une nouvelle ligne en JavaScript

Harshit Jindal 12 octobre 2023
  1. Ajouter une nouvelle ligne à l’aide du caractère de nouvelle ligne en JavaScript
  2. Ajouter une nouvelle ligne à l’aide de littéraux de modèle en JavaScript
  3. Ajouter une nouvelle ligne à l’aide de la balise HTML <br> à la sortie DOM en JavaScript
Écrire une nouvelle ligne en JavaScript

Nous pouvons ajouter une nouvelle ligne en JavaScript de trois manières en fonction de la situation et de la sortie souhaitée. Ce didacticiel décrit les trois scénarios.

Ajouter une nouvelle ligne à l’aide du caractère de nouvelle ligne en JavaScript

En JavaScript, le symbole \n représente le caractère de nouvelle ligne. Si nous devons imprimer des mots dans différentes lignes sur la console, nous pouvons utiliser \n à l’intérieur de la chaîne pour introduire le saut de ligne.

Exemple:

let str = 'This is in line 1.\nThis is in line 2.';
console.log(str);

Production :

This is in line 1.
This is in line 2.

Ajouter une nouvelle ligne à l’aide de littéraux de modèle en JavaScript

Les littéraux de modèle sont le moyen utilisé par JavaScript pour permettre l’interpolation de variables et d’expressions dans des chaînes, des chaînes entre guillemets et des chaînes multilignes. Ils sont entourés de backticks, ce qui facilite l’introduction de nouvelles lignes en JavaScript.

Exemple:

let str = `This is in line 1.
This is in line 2.`;
console.log(str);

Production :

This is in line 1.
This is in line 2.

Ajouter une nouvelle ligne à l’aide de la balise HTML <br> à la sortie DOM en JavaScript

Nous pouvons utiliser le DOM pour avoir un saut de ligne en utilisant la balise <br> en HTML. Mais cette méthode est spécifique aux pages Web et ne fonctionne pas sur la console.

Exemple:

<body>
  <div id="addNewline"></div>
  <script>
    let element = document.getElementById("addNewline");
    element.innerHTML = "Hello World!<br/>This is my string";
  </script>
</body>

Production :

Hello World!
This is my string

Ici, nous sélectionnons un élément HTML et ajoutons une chaîne avec un saut de ligne comme HTML interne.

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