Accueil » Blog » Comment Faire un Retour à Ligne en Javascript

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’échappement (escape séquence)

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éter 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 literal est une chaîne de caractère permettant d’intégrer des expressions comme des chaînes multilignes ou de l’interpolation. Mais ce qui nous intéresse ici est l’interprétation du retour à la ligne.

Le template literal 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

La dernière solution qu’on présentera dans cet article est l’utilisation d’une balise <br/> dans la chaîne de caractère. À 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>
Etienne Passot

C'est grâce à l'immense communauté de développeurs dans le monde entier que l'on peut accéder à des ressources librement, partout et tout le temps. J'ai donc décidé d'apporter ma contribution à cette incroyable communauté en écrivant des articles sur divers sujet comme Javascript, Typescript, Nuxt, Vue ...

Post navigation