JavaScript - Multiline Strings

Amultiline stringis 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 usetemplate 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

Thetemplate literalsare the best way to create multiline string in JavaScript. Template literals are enclosed withbacktick ()characters. A template literal containsstringsand alsoplaceholders. Template literals are sometimes also calledtemplate 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 calledmultilineString.

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.

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.

Output

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

Creating Multiline String Using \ Operator

We can usebackslash() 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>.

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.