javascript multiline string

Javascript Multiline String

The user uses languages such as HTML, CSS etc for web designing application, there is a time when he needs to use javascript multiline string. These strings are used as variables but were unavailable in 2015 and came with the latest update in ES6. It seemed to introduce strong literals with a fact that even the old browser will be able to support the multi-line in various ways now.

How to create Javascript multiline String using literals

<html>      
<head> 
<title> 
Create multi-line strings 
</title> 
</head>   
<body> 
    <h1 style="color: blue"> 
        Welcome to Developer Helps 
    </h1> 
      
    <b> 
        Creating multi-line 
        strings in JavaScript! 
    </b> 
      
    <div class="multiline"></div> 
      
    <p> 
        Click on the button to 
        insert multiline text 
    </p> 
      
    <button onclick="showMultiline()"> 
        Click 
    </button> 
      
    <script type="text/javascript"> 
        function showMultiline() { 
            multilineString =  
                `<div> 
                    <h3>This is the heading</h3> 
    <p> 
                        This is a paragraph. This uses 
                        template literals that were 
                        added in ES6 of JavaScript 
   </p> 
                </div>` 
              
            document.querySelector('.multiline').innerHTML 
                    = multilineString; 
        } 
    </script> 
</body>
</html> 

Β The output of this program will be:

After clicking the button, the output of the code will be:

Best Laptops under 40,000

ITEMSPRICE
Click here for Price
Click here for Price
Click here for Price

This method of creating javascript multiline strings is by using literal templates. Template literals are basically a form of expression which have various features for strings in them. The expressions are already embedded in the literals for use. The creation of a multi-line string can also be done using other methods.

For example, it can be done by escaping every newline on each line. There is one more method in which the user can concatenate two strings together as a final string. In ES5 which is the old browser, the creation of multi-string is now possible. Β The user can execute it by adding a backslash at the end of each line in the code. This will define the multi-line string.

How to create Javascript multiline String using the concatenation of strings

<script>
    var str = '<div class="content">' +
                  '<h1>Welcome to Developer Helps</h1>' +
                  '<p>Please scroll down for details</p>' +
              '</div>';
        document.write(str);
</script>

The output of the program will be:

In the above code, the user can use β€˜+’ operator for the concatenation of two strings. It can be used after each line in the code as a format of ES5. However the user doesn’t has to perform any of this in ES6 version. The use of document.write in the code is to print the final string after concatenation of the two strings.

Leave a comment

Your email address will not be published. Required fields are marked *