”;
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 stringn" + "created by concatenating the individual stringsn" + "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 stringn created using the backslash operatorn 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.
”;