Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Multiline Strings in JavaScript
3.
Using the break line (<br>) tag
3.1.
Program
3.2.
Output
4.
By Concatenation of Strings
4.1.
Program
4.2.
Output
5.
Using Template Literals
5.1.
Program
5.2.
Output
5.3.
Check out this article - C++ String Concatenation
6.
Using the Backslash
6.1.
Program
6.2.
Output
7.
Frequently Asked Questions
7.1.
Which is better, HTML or JavaScript?
7.2.
What is === and == in JavaScript?
7.3.
What are string functions?
7.4.
What is the main difference between an array and a string?
7.5.
Is string a keyword?
8.
Conclusion
Last Updated: Mar 27, 2024
Medium

JavaScript Multiline String

Author Amit Singh
0 upvote
Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

Introduction

Have you worked on strings in JavaScript? Do you know how to use multi-line strings in JavaScript?

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.

See, Javascript hasOwnProperty

Multiline Strings in JavaScript

multiline

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.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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

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

output
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>

 

Output

output
output

Check out this article - C++ String Concatenation

Using the Backslash

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>

 

Output

output
output

For good practice implement it on an online javascript compiler.

Must Read Fibonacci Series in JavaScript

Frequently Asked Questions

Which is better, HTML or JavaScript?

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.
 

Recommended problems -

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available; take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Merry Learning!

Previous article
JS Strings
Next article
How to Reverse a String in Javascript?
Live masterclass