How to create multiline strings in JavaScript?

Published December 11, 2020

To create multiline strings in JavaScript, you can use the backticks (``) in JavaScript.

Consider this HTML string,

const htmlStr = "<div><h1>Heading</h1><p>A paragrapgh</p></div>";

This string looks super ugly and very hard to read 😱.

Even if we try to make a new line in the above string by pushing the contents to a new line, JavaScript will throw an error because here we are using double quotes to wrap the string.

// This is an error in JavaScript
// You can't do this ❌
const htmlStr = "<div>
<h1>Heading</h1>
<p>A paragrapgh</p>
</div>";

console.log(htmlStr); // Error: Invalid or unexpected token

This is where backticks come into play.

All we have to do is switch the double quotes ("") with backticks (``) like this,

// Switch double quotes with backticks
// Now you can create strings that strechtes to
// Multi lines ✅
const htmlStr = `
<div>
    <h1>Heading</h1>
    <p>A paragrapgh</p>
</div>
`;

console.log(htmlStr);

/*

<div>
    <h1>Heading</h1>
    <p>A paragrapgh</p>
</div>

*/

Now we have a clean, readable string that stretches to multiple lines.

See this example live in JSBin.

Feel free to share if you found this useful 😃.


Share on: Facebook Twitter