How to create multi-line strings in JavaScript ?

How to create multi-line strings in JavaScript ?

Last Updated : 27 May, 2024

In JavaScript, the absence of native support for multi-line strings was a longstanding challenge. However, with the advent of ES6 (ECMAScript 2015), the things changed dramatically. ES6 introduced string literals, offering robust support for multi-line strings, which was a significant enhancement for developers.

In this article, we'll see the evolution of multi-line string handling in JavaScript, exploring how ES6 string literals revolutionized the way developers work with text data. We'll also discuss various strategies for managing multi-line strings, especially for scenarios where compatibility with older browsers remains a priority.

Table of Content

Method 1: Using template literals
Method 2: Using the backslash to escape the literal newlines
Method 3: Concatenating the individual strings together.

Method 1: Using template literals

The strings are delimited using backticks, unlike normal single/double quotes delimiter.

Example: This example uses template literals to create multi-line strings.

html

<h1 style="color: green">
    GeeksforGeeks
</h1>

<b>
    How to create multi-line
    strings in JavaScript?
</b>

<div class="multiline"></div>

<p>
    Click on the button to
    insert multiline text
</p>

<button onclick="showMultiline()">
    Click here
</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>

Output:

How to create multi-line strings in JavaScript?

Method 2: Using the backslash to escape the literal newlines

The other method that can be used to create multi-line strings is escaping every newline on each line.

Example: This example uses the backslash to escape the literal newlines to create multi-line strings.

html

<h1 style="color: green">
    GeeksforGeeks
</h1>

<b>
    How to create multi-line
    strings in JavaScript?
</b>

<div class="multiline"></div>

<p>
    Click on the button to
    insert multiline text
</p>

<button onclick="showMultiline()">
    Click here
</button>

<script type="text/javascript">
    function showMultiline() {
        multilineString =
            "<div> \
                <h3>This is the heading</h3> \
                <p>This is a paragraph \
                This uses backslashes in place\
                of new lines</p> \
            </div>"
        
        document.querySelector('.multiline').innerHTML
                = multilineString;
    }
</script>

Output:

How to create multi-line strings in JavaScript?

Method 3: Concatenating the individual strings together.

The simplest, but cumbersome way is separating each line as a string and concatenating it into one final string.

Example: This example concatenates the string to create multi-line strings.

html

<h1 style="color: green">
    GeeksforGeeks
</h1>

<b>
    How to create multi-line
    strings in JavaScript?
</b>

<div class="multiline"></div>

<p>
    Click on the button to
    insert multiline text
</p>

<button onclick="showMultiline()">
    Click here
</button>

<script type="text/javascript">
    function showMultiline() {
        multilineString =
            "<div>" +
                "<h3>This is the heading</h3>" +
                "<p>This is a paragraph" +
                "This uses simple concatenation " +
                "of strings for every line</p> " +
            "</div>"
        
        document.querySelector('.multiline').innerHTML
                = multilineString;
    }
</script>

Output:

How to create multi-line strings in JavaScript?

How to create multi-line strings in JavaScript ?

sayantanm19

Improve

Article Tags :

Similar Reads

How to Create JSON String in JavaScript?

JSON strings are widely used for data interchange between a server and a client, or between different parts of a software system. So converting objects to JSON strings is very important for good client-server communication. Below are the following approaches to creating a JSON string: Table of Conte

How to Create a New Line in JavaScript ?

A new line can be made in JavaScript using the below-discussed methods.Using Escape Sequence `\n`The \n escape sequence represents a newline character in JavaScript strings and it can used to render a new line in JavaScript.JavaScriptconsole.log("GfG"); console.log("\n"); // New line console.log("Co

How to Print a String in JavaScript ?

In JavaScript, printing a string means displaying the contents of a string variable or literal to the console, webpage, or any other output medium. Strings are a fundamental data type in JavaScript, representing sequences of characters enclosed within single ('') or double ("") quotes. Table of Cont

How to Concatenate Strings in JavaScript?

Here are the various methods to concatenate strings in JavaScript1. Using Template Literals (Template Strings)Template literals (introduced in ES6) provide a simple way to concatenate strings. With template literals, you can embed expressions inside a string using ${} syntax. This method makes the c

How to modify a string in JavaScript ?

JavaScript strings are used for storing and manipulating text. It can contain zero or more characters within quotes and its indexing starts with 0. Strings are defined as an array of characters. In Javascript, we can also convert strings to a Character array.Â Representing a String:Â 1. Using double

How to Convert JSON to string in JavaScript ?

In this article, we are going to learn the conversion of JSON to string in JavaScript. Converting JSON to a string in JavaScript means serializing a JavaScript object or data structure represented in JSON format into a textual JSON string for data storage or transmission.Several methods can be used

How to Convert String to JSON in JavaScript?

In JavaScript, converting a string to JSON is important for handling data interchangeably between server and client, parsing external API responses, and storing structured data in applications. Below are the approaches to converting string to JSON in JavaScript: Table of Content Using JSON.parse()Us

How to Create a Nested Object in JavaScript ?

JavaScript allows us to create objects having the properties of the other objects this process is called as nesting of objects. Nesting helps in handling complex data in a much more structured and organized manner by creating a hierarchical structure. These are the different methods to create nested

Create a string with multiple spaces in JavaScript

We have a string with extra spaces and if we want to display it in the browser then extra spaces will not be displayed. Adding the number of spaces to the string can be done in the following ways. In this article, we are going to learn how to Create a string with multiple spaces in JavaScript. Below

How to concatenate regex literals in JavaScript ?

Regex is a sequence of pattern that is used for matching with a pattern. While searching for data in a text, the search pattern is described for what we are searching for. It can be a single character or a more complex pattern. It can be used to perform all types of text searches. Regex has its own