How to create multi-line strings in JavaScript ?

Last Updated : 11 Jul, 2025

In JavaScript, the absence of native support for multi-line strings was a longstanding challenge. However, with the advent of ES6 (ECMAScript 2015), the things changed dramatically. ES6 introduced string literals, offering robust support for multi-line strings, which was a significant enhancement for developers.

In this article, we'll see the evolution of multi-line string handling in JavaScript, exploring how ES6 string literals revolutionized the way developers work with text data. We'll also discuss various strategies for managing multi-line strings, especially for scenarios where compatibility with older browsers remains a priority.

Table of Content

Method 1: Using template literals

The strings are delimited using backticks, unlike normal single/double quotes delimiter.

Example: This example uses template literals to create multi-line strings.

html

<h1 style="color: green"> GeeksforGeeks </h1> <b> How to create multi-line strings in JavaScript? </b> <div class="multiline"></div> <p> Click on the button to insert multiline text </p> <button onclick="showMultiline()"> Click here </button> <script type="text/javascript">  function showMultiline() {  multilineString =  `<div>  <h3>This is the heading</h3>  <p>  This is a paragraph. This uses  template literals that were  added in ES6 of JavaScript  </p>  </div>`    document.querySelector('.multiline').innerHTML  = multilineString;  } </script>

Output:

How to create multi-line strings in JavaScript?

Method 2: Using the backslash to escape the literal newlines

The other method that can be used to create multi-line strings is escaping every newline on each line.

Example: This example uses the backslash to escape the literal newlines to create multi-line strings.

html

<h1 style="color: green"> GeeksforGeeks </h1> <b> How to create multi-line strings in JavaScript? </b> <div class="multiline"></div> <p> Click on the button to insert multiline text </p> <button onclick="showMultiline()"> Click here </button> <script type="text/javascript">  function showMultiline() {  multilineString =  "<div> \  <h3>This is the heading</h3> \  <p>This is a paragraph \  This uses backslashes in place\  of new lines</p> \  </div>"    document.querySelector('.multiline').innerHTML  = multilineString;  } </script>

Output:

Method 3: Concatenating the individual strings together.

The simplest, but cumbersome way is separating each line as a string and concatenating it into one final string.

Example: This example concatenates the string to create multi-line strings.

html

<h1 style="color: green"> GeeksforGeeks </h1> <b> How to create multi-line strings in JavaScript? </b> <div class="multiline"></div> <p> Click on the button to insert multiline text </p> <button onclick="showMultiline()"> Click here </button> <script type="text/javascript">  function showMultiline() {  multilineString =  "<div>" +  "<h3>This is the heading</h3>" +  "<p>This is a paragraph" +  "This uses simple concatenation " +  "of strings for every line</p> " +  "</div>"    document.querySelector('.multiline').innerHTML  = multilineString;  } </script>