3 Proven Methods to Create Multi-Line Strings in JavaScript

You can break down strings to make them more readable and easy to consume by creating multiline strings in JavaScript. But you have to follow some techniques to display them in a format.

JavaScript has a template literal syntax (``) that can create multi-line strings along with its other use cases. It is easy to format the text using this syntax. There is also a newline (\n) character that creates multiple lines when strings are joined using concatenation.

When we create a string in JavaScript, doesn't matter how long the string is, it will show in a single line. But sometimes for a long text, it doesn't look good.

You can put line breaks and format them so that the strings look and become easy to understand. That's why we break down the long text into multiple lines.

In this article, you will see how to create multiline strings in JavaScript and display them in an eye-catching format.

How to Create Multi-Line Strings in JavaScript

There are mainly 3 ways to add new lines between stings in JavaScript. You can use any one of them. But you should understand all of them so that you can identify the differences.

These 3 methods to create multiline strings in JavaScript are:

1. Using template literal syntax.
2. Using the newline (\n) character with string concatenation.
3. Using the newline (\n) character with the backslash (\) operator.

Let's see how can we apply these methods in our code with some examples.

Also Read: Best Ways to Create Dynamic HTML Element & CSS in JavaScript

Method 1: Using JavaScript Template Literals

The template literal syntax is an amazing feature in JavaScript. It uses the back-ticks (``) instead of the single or double quotes. You can do many things with it.

You can learn more about this syntax here if you want. But it has made our life a lot easier while creating strings with multiple lines.

          Methods to create multi line string:
   – Use template literal
   – Use newline character
   – Use backslash
        

For example, you want to create a sting that will look like that when you display it. As we can see, this string has 4 lines. The last 3 lines also have spaces in front of them.

Now the question is how can you create a such string with this formatting?

          const myString = `Methods to create multi line string:
    – Use template literal
    – Use newline character
    – Use backslash`;

console.log(myString);
        

Output:

          Methods to create multi line string:
   – Use template literal
   – Use newline character
   – Use backslash
        

You can see how easy it is to create a multiline string using the template literals. You just put the string in between the "back-ticks" with the structure you want.

JavaScript will show your text exactly in that format. That's why it is easy to use. You can also put any variables directly inside that string without using the concatenation.

Also Read: Best Guide on Dynamic Import in JavaScript for Importing Modules

Method 2: Using Newline (\n) and String Concatenation

When JavaScript didn't have the template literal syntax, we had to use the newline (\n) characters and string concatenation to generate multiline strings in JavaScript.

If we join multiple strings using the (+) operator, JavaScript will show the text in a single line.

          const myString = 'Methods to create multi line string:' +
    '   – Use template literal' +
    '   – Use newline character' +
    '   – Use backslash';

console.log(myString);
        

Output:

          Methods to create multi line string:   – Use template literal   – Use newline character   – Use backslash
        

As you can see, we are not getting the multiline string in our output. The (+) operator just joins all those strings into a single string.

To display the text in multiple lines, we need to put the newline (\n) characters where we want to create new lines.

          const myString = 'Methods to create multi line string:\n' +
    '   – Use template literal\n' +
    '   – Use newline character\n' +
    '   – Use backslash';

console.log(myString);
        

Output:

          Methods to create multi line string:
   – Use template literal
   – Use newline character
   – Use backslash
        

When we add the newline (\n) characters at the end of each string, we will get the desired output. JavaScript will show the text in the format we wanted.

Also Read: How to Add Hours, Minutes & Seconds to A Date in JavaScript

Method 3: Using Newline (\n) and Backslash (\) Operator

In the previous section, you have seen how to create multiline strings using newline (\n) and string concatenation. But you couldn't write the whole string inside one quote in this method.

It looks very complex when our text gets bigger. Instead of writing many strings and joining them with the (+) operator, we can write the whole text in a single string using one quote.

          const myString = 'Methods to create multi line string: \
    – Use template literal \
    – Use newline character \
    – Use backslash';

console.log(myString);
        

Output:

          Methods to create multi line string:   – Use template literal   – Use newline character   – Use backslash
        

I am writing the string in multiple lines inside the one single quote (''). But in this case, you have to use the backslash (\) operator instead of the (+) operator.

But when JavaScript output the text, it displays it in a single line. It doesn't show in multiple lines.

That's why to create multiline strings, we can combine the newline (\n) character and backslash (\) operator together.

          const myString = 'Methods to create multi line string:\n \
    – Use template literal\n \
    – Use newline character\n \
    – Use backslash';

console.log(myString);
        

Output:

          Methods to create multi line string:
   – Use template literal
   – Use newline character
   – Use backslash
        

When we add the newline (\n) character at the end of each line with the backslash (\) operator, JavaScript will show the string in multiple lines.

Note: You always have to put the backslash (\) operator after the (\n) newline character.

Conclusion

You can follow 3 methods in order to break down a long string into multiple lines with beautiful formatting. JavaScript template literal syntax is the easiest among them.

Most of the time developers choose the template literals to create a multiline string in JavaScript. Because it also has other powerful features.

I have shown you all of them with examples so that you can understand the differences and choose the method you like.

I hope you have understood the topic. Now, you can create multiline strings in JavaScript and break a long string into multiple lines in order to display it in a user-friendly format.