JavaScript - Multiline Strings

---

---

A multiline string is a JavaScript string that spans multiple lines. Using multiline strings in programs make it easier to read and maintain. In JavaScript, the easiest way to create multiline strings is to use template literals (template strings). The template literals are introduced in ECMAScript 2015 (ES6). Before introduction of template literals, the multiline strings are created by concatenating multiple strings using + operator.

In JavaScript, a string is a sequence of characters containing alphabetical, numeric, and special characters. We can create the string using single quote ('), double quote (") or backtick (`) characters.

Creating Multiline Strings Using Template Literals

The template literals are the best way to create multiline string in JavaScript. Template literals are enclosed with backtick (`) characters. A template literal contains strings and also placeholders. Template literals are sometimes also called template strings.

A simple example of a template literal is as follows −

`This is a template literal enclosed by backtick characters.`

Let's now create a multiline string using template literals −

let multilineString = `This is a multiline
string created using
template literal.`

In the above JavaScript code snippet, we have created a multiline string containing three lines. We assigned this multiline string to the variable called multilineString.

Example

In the below example, we have created a multiline string using template literal and displayed the string in the web console.

let mulString = `This is a multiline
string created using
template literal.`;
console.log(mulString);

Output

This is a multiline
string created using
template literal.

Example

In the below example, we are trying to display the multiline string crated using the template literal on the webpage. We used <br> to make a line break.

<!DOCTYPE html>
<html>
<body>
   <p id = "output"></p>
   <script>
      let mulString = `This is a multine <br>
      string created using template literal <br>
      and displayed on the webpage.`;    
      document.getElementById("output").innerHTML = mulString;
   </script>
</body>
</html>

Output

This is a multine
string created using template literal
and displayed on the webpage.

Creating Multiline String Using + Operator

We can also create a multiline string in JavaScript by concatenating the individual strings using + operator. To create a line break, we can use the escape character \n or <br>.

You can concatenate the strings defined with single or double quotes.

Let's have a look at the following example −

Example

In this example, we created a multiline string by concatenating three individual strings. We used escape character (\n) at the end of the individual strings to break the line.

let mulString = "This is a multiline string\n" +
"created by concatenating the individual strings\n" +
"and using \\n to break the line.";
console.log(mulString);

Output

This is a multiline string
created by concatenating the individual strings
and using \n to break the line.

Example

In the example below, we created a multiline string by concatenating three strings. We used <br> to break the line.

<!DOCTYPE html>
<html>
<body>
   <p id = "output"></p>
   <script>
      let mulString = "This is a multiline string <br>" +
	   "created by concatenating the individual strings<br>" +
   	"and line break.";  
      document.getElementById("output").innerHTML = mulString;
   </script>
</body>
</html>

Output

This is a multiline string
created by concatenating the individual strings
and line break.

Creating Multiline String Using \ Operator

We can use backslash (\) operator to create multiline strings in JavaScript. We can use the escape character (\n) to break the line.

Example

Try the following JavaScript example −

let mulString = "This is a multiline string\n\
created using the backslash operator\n\
and escape character to break the line.";
console.log(mulString);

Output

This is a multiline string
created using the backslash operator
and escape character to break the line.

Example

In the example below, we have created a multiline string using the backslash (\) operator. And to make a line break, we used <br>.

<!DOCTYPE html>
<html>
<body>
   <p id = "output"></p>
   <script>
      let mulString = "This is first line of the multiline string <br>\
      This is second line of the multiline string <br> \
      This is the last line of multiline string.";    
      document.getElementById("output").innerHTML = mulString;
   </script>
</body>
</html>

Output

This is first line of the multiline string
This is second line of the multiline string
This is the last line of multiline string.