Have you worked on strings in JavaScript? Do you know how to use multi-line strings in JavaScript?
In JavaScript, a string stores a sequence of characters like "Coding Ninjas." A string is any text inside double or single quotes. For example, car1 = "Maruti WagonR" and car2 = 'Maruti Swift'. This article is focused on JavaScript Multiline String. We will learn different methods of multiline strings in detail.
Multiline strings were not present in JavaScript by 2015. When the ES6 was launched, a new feature known as string literals came out with it. The ES6 allows us to use multi-line strings.
There are many ways for you to use multi-line strings. Let's discuss these methods one-by-one in a detailed manner.
Using the break line (<br>) tag
The first method is to use the break line tag or the <br> tag. This is the easiest method of showing string in multiple lines. We can implement the document.write() function to use HTML inside it.
The break line tag is a tag used in HTML. It allows users to start the sentence or text from the next line.
Let's check out an example of the implementation of this method.
Program
<!-- Program of Javascript multiline string by break line tag. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coding Ninjas</title>
<!-- Accomplishing JavaScript multiline string method -->
<script>
document.write("This is the first line.");
document.write("<br>");
document.write("This is the second line which is divided using break line.");
document.write("<br>");
document.write("This is the third line.")
</script>
</head>
</html>
Output
By Concatenation of Strings
This is also one of the simplest methods of creating multi-line strings. In this method, you can separate each line as a single string. Then you can concatenate these single strings into one final string.
Let's check out an example of the implementation of this method.
Program
<!-- Program of Javascript multiline string by concatenation of Strings. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coding Ninjas</title>
<body>
<h1 style="color: orangered">
Coding Ninjas
</h1>
<b>
Creating a multi-line string in JavaScript:
</b>
<div class="multiline"></div>
<p>
Click on the below button to insert the multi-line text using concatenation.
</p>
<button onclick="displayMultiline()">
Click Me
</button>
<script type="text/javascript">
<!-- Accomplishing JavaScript multiline string method -->
function displayMultiline() {
multilineStr = "<div>" +
"<h3>Heading</h3>" +
"<p>This is a sentence. " +
"A simple concatenation of " +
"strings for each line.</p> " +
"</div>"
document.querySelector('.multiline').innerHTML = multilineStr;
}
</script>
</body>
</head>
</html>
Output
Using Template Literals
We can also use template literals to create multi-line strings. We can delimit these strings by backticks. These backticks are different from normal single or double quotes.
Let's check out an example of the implementation of this method.
Program
<!-- Program of Javascript multiline string by template literals. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coding Ninjas</title>
<body>
<h1 style="color: orangered">
Coding Ninjas
</h1>
<b>
Creating a multi-line string in JavaScript:
</b>
<div class="multiline"></div>
<p>
Click on the below button to insert the multi-line text using template literals.
</p>
<button onclick="displayMultiline()">
Click Me
</button>
<script type="text/javascript">
<!-- Accomplishing JavaScript multiline string method -->
function displayMultiline() {
multilineStr = `<div>
<h3>Heading</h3>
<p>This is a sentence.
A simple concatenation of
strings for each line.</p>
</div>`
document.querySelector('.multiline').innerHTML = multilineStr;
}
</script>
</body>
</head>
</html>
The next method is to use a backslash to escape the newline literals. In this method, we can create multi-line strings by escaping each newline on every line.
Let's check out an example of the implementation of this method.
Program
<!-- Program of Javascript multiline string by backslash. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coding Ninjas</title>
<body>
<h1 style="color: orangered">
Coding Ninjas
</h1>
<b>
Creating a multi-line string in JavaScript:
</b>
<div class="multiline"></div>
<p>
Click on the below button to insert the multi-line text using backslash.
</p>
<button onclick="displayMultiline()">
Click Me
</button>
<script type="text/javascript">
<!-- Accomplishing JavaScript multiline string method -->
function displayMultiline() {
multilineStr = "<div> \
<h3>Heading</h3> \
<p>This is a sentence. \
A simple concatenation of \
strings for each line.</p> \
</div>"
document.querySelector('.multiline').innerHTML = multilineStr;
}
</script>
</body>
</head>
</html>
JavaScript adds dynamic content to websites to make them look good. HTML work on the look of the website without the interactive effects and all.
What is === and == in JavaScript?
The main difference between the "===" and "==" operator is that the "==" operator does the type conversion of the operands before any comparison, whereas the === operator compares the values as well as the data types of the operands.
What are string functions?
String functions help you to manipulate strings in a variety of ways.
What is the main difference between an array and a string?
The main difference between an Array and a String is that an Array is a data structure that has a collection of elements having the same data types, while a String is a collection of characters.
Is string a keyword?
A string is NOT a keyword. It is one of the names of data types declared in the standard library.
Conclusion
In this article, we have studied multiline strings in Javascript. We have also studied different methods or functions with their implementations.
We hope that this article has provided you with the help to enhance your knowledge regarding JavaScript multiline string and if you would like to learn more, check out our articles on JavaScript Capitalize, and JavaScript Parse String.
39+ registered 