Comment Faire un Retour à Ligne en Javascript

Les solutions pour faire un retour à la ligne dans du code Javascript.

En Javascript, on trouve plusieurs solutions pour faire un retour à la ligne. Faisons un petit tour des différentes possibilités offertes par le langage.

Faire un retour à la ligne en Javascript avec une séquence d'echappement (escape sequence)

La première solution pour faire un retour à la ligne est l'utilisation d'une séquence d'échappement. Les séquences d'échappements sont des suites de caractères qui ont un rôle particulier à l'endroit où elles sont placées dans une chaîne de caractère. Il en existe de nombreuses, mais celle qui nous intéresse ici est le \n qui représente un retour à la ligne.

On peut ainsi l'utiliser dans notre code comme ci-dessous. Lorsque Javascript va interprétrer cette séquence, il va la remplacer par un retour à la ligne.

console.log('Hello World !\nHow are you ?')

/*
Hello World !
How are you ?
*/

Faire un retour à la ligne avec un template literal

Une deuxième solution pour nos retours à la ligne est l'utilisation d'un template literal (ou Littéraux de gabarits en français). Un template litteral est une chaîne de caractère permettant d'intégrer des expressions comme des chaînes multi-ligne ou de l'interpolation. Mais ce qui nous intéresse ici est l'interprétation du retour à la ligne. Le template litteral est caractérisé par les Magic quotes (``)

Alt gr + 7

console.log(`Hello World !
How are you ?`)

/*
Hello World !
How are you ?
*/

Faire un retour à la ligne HTML dans le DOM avec la balise <br/>

La dernière solution qu'on présentera dans cet article est l'utilisation d'un balise <br/> dans la chaîne de caractère. A l'image de la séquence d'échappement, la balise <br/> sera interprété dans le code html comme un retour à la ligne.

En Javascript, on peut écrire avec document.write directement dans le DOM.

document.write('Hello World !<br/>How are you ?')

Le résultat nous donne en HTML le code présent ci-dessous

<body>
  Hello World !
  <br />
  How are you ?
</body>

➡️ Pour recevoir toutes les semaines un article sur le développement web et son écosystème, n'hésitez pas à suivre codeNews sur LinkedIn. 🗞

Apprenez à programmer avec des exemples simples et concrets.

English / Français