How to create multiline strings in JavaScript?

December 11, 2020 - 1 min read

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>
<p>A paragrapgh</p>

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 = `
    <p>A paragrapgh</p>



    <p>A paragrapgh</p>


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 😃.