Écrire une nouvelle ligne en JavaScript

Pour écrire une nouvelle ligne en JavaScript, insérez la séquence d’échappement \n dans une chaîne ou utilisez un littéral de gabarit avec un saut de ligne littéral. Ces deux méthodes conviennent aux chaînes et à l’affichage dans la console. Pour afficher du texte dans un navigateur, créez un élément HTML <br> ou utilisez des éléments de bloc distincts ; un caractère de nouvelle ligne dans une chaîne ne devient pas automatiquement un saut de ligne visible en HTML.

Insérer un saut de ligne avec une séquence d’échappement

La séquence d’échappement \n représente un saut de ligne dans une chaîne JavaScript. Placez-la là où la ligne suivante doit commencer, puis transmettez la chaîne à la méthode de sortie souhaitée. Par exemple, console.log() envoie le saut de ligne à la console, où le message apparaît sur deux lignes.

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const message = "Hello, World!\nWelcome to JavaScript.";
console.log(message);

Vous pouvez aussi stocker cette chaîne, la concaténer ou la transmettre à une autre fonction. Le saut de ligne fait partie de la valeur de la chaîne ; il ne dépend pas de console.log(). Si la destination n’affiche pas visuellement les sauts de ligne, comme c’est le cas du texte HTML ordinaire, choisissez plutôt une méthode de rendu adaptée à cette destination.

Utiliser les littéraux de gabarit pour les chaînes multilignes

Les littéraux de gabarit utilisent des accents graves et permettent d’écrire une chaîne sur plusieurs lignes du code source. Les sauts de ligne saisis entre ces accents graves font partie de la chaîne ; cette syntaxe peut donc être plus lisible pour un texte fixe un peu long. Les littéraux de gabarit prennent aussi en charge l’interpolation avec ${expression}, ce qui permet d’insérer une valeur sans assembler manuellement plusieurs chaînes.

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const name = "JavaScript";
const message = `Hello, World!
Welcome to ${name}.`;
console.log(message);

Utilisez un littéral de gabarit lorsque le code source gagne à être réparti sur plusieurs lignes ou lorsque la chaîne contient des valeurs interpolées. Utilisez \n si le texte est court ou si vous voulez indiquer précisément le saut de ligne dans une chaîne écrite sur une seule ligne. Les deux méthodes produisent une chaîne contenant un saut de ligne ; aucune ne détermine la façon dont un navigateur l’affichera.

Afficher des sauts de ligne en HTML

Dans le contenu d’une page Web, <br> crée un saut de ligne visible à l’intérieur d’un texte. Pour du contenu fixe, insérez directement cette balise dans le HTML. Pour du contenu dynamique, créez l’élément avec document.createElement("br") et ajoutez-le entre des nœuds de texte ; les valeurs restent ainsi du texte, au lieu d’être analysées par le navigateur comme du balisage.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

<p>Hello, World!<br>Welcome to JavaScript.</p>

L’exemple de page HTML statique ci-dessous montre un saut de ligne dans le navigateur ; il ne s’agit ni d’un exemple de console ni d’une sortie d’exécution. Le libellé visible dans le bloc reste en anglais, car l’exemple est conservé à l’identique. Lorsqu’une valeur dynamique est concernée, privilégiez textContent ou les nœuds de texte. Affecter une entrée non fiable à innerHTML peut amener le navigateur à l’interpréter comme du balisage, ce qui crée un risque de script intersites (XSS). Utilisez innerHTML uniquement si le balisage est fiable et si son analyse est nécessaire.

Les marges et le padding CSS peuvent ajouter un espace visuel entre des éléments distincts, mais ils n’insèrent pas de caractère de nouvelle ligne dans une chaîne JavaScript et ne créent pas de saut de ligne dans un nœud de texte. Choisissez \n ou un littéral de gabarit multiligne pour le contenu d’une chaîne, <br> pour couper une ligne de texte dans le navigateur, et l’espacement CSS pour organiser la disposition des éléments.