How to Create Multi-Line String with Template Literals

With the arrival of Template Literals, it’s finally super easy to produce multi-line strings. Previously, we had to use the \n or separate string concatenation which was messy and difficult to read. Finally, it’s easier now. ES6 for the win 🙌
// Old way
const multiLine1 = “1️⃣first \n2️⃣second";

// ✅ ES6 way
const multiLine2 = `1️⃣first
2️⃣second`;

/* RESULT
1️⃣first
2️⃣second
*/

Multi-line vs Single-line Strings

I just want to make sure I clarify that when I say "Multi-Line", I mean the output of the string is spanning on multiple lines. For example, if I console.log the variable, it will produce something like this:
// Multi-Line

1️⃣first
2️⃣second

And here’s a "Single-Line" output:
// Single-Line

1️⃣first 2️⃣second

The reason why I’m emphasizing this is because there are other methods in JavaScript to create strings. But watch out, they actually don’t produce true "Multi-Line" outputs 😱
Ex. Using +
const notTrueMultiLine = ‘1️⃣first’ +
‘2️⃣second’ +
‘3️⃣three’;

console.log(notTrueMultiLine);
// 1️⃣first2️⃣second3️⃣three

Ex. Using \
const notTrueMultiLine = "\
1️⃣first \
2️⃣second \
3️⃣three";

console.log(notTrueMultiLine);
// 1️⃣first2️⃣second3️⃣three

Even though, it may appear in your code as multi-line. But when it’s outputted, it’s actually a single-line. To create true multi-line output, you have to use Template Literals or \n. Just wanted to make sure I point this out cause I remember making this mistake when I was first learning JavaScript 😖

Blank Space in Template Literals

So template literals will output as it appears, spaces and all! Because of that, be mindful of your blank spaces or lines.
const blankSpace = `
first
second
third
`;

Here’s the output. I denoted the white space with a dot, ⚪️ and line break with a square ◻️:

first
····second
··third

HTML Templating with Template Literals

This is my favorite use case of using template literals multi-string capability. It makes super readable and easy to render HTML markup. I remember before, the only way to do this is to use a template system such as Handlebars.js. Well, not anymore. We can achieve the same result without importing anything and just use vanilla JS. It’s awesome! Anyhoo, let’s take a look at some examples:
✅Ex. HTML Markup using Template Literals
const HTMLmarkup = `

<h1>Code Tidbits</h1>
</article>
`;

Ex. HTML Markup using Old JavaScript
const HTMLmarkup = "<article>" +
"<h1>Code Tidbits</h1>" +
"</article>";

Ex. HTML Markup using Handlebars.js
<script id="entry-template" type="text/x-handlebars-template">
<article>
<h1>Code Tidbits</h1>
</article>
</script>

<!– also need to import handlebars –>

Resources

MDN Web Docs: Template Literals
Stack Overflow: Creating multiline strings in JavaScript
CSS Tricks: Multiline String Variables in JavaScript
DWB: Multi-Line JavaScript Strings
Multiline strings in ES6 JavaScript
Github Gist: Multiline
Easy Creation of HTML with JavaScript’s Template Strings

Thanks for reading ❤
Say Hello! Instagram | Twitter | Facebook | Medium | Blog

Link: https://dev.to/samanthaming/how-to-create-multi-line-string-with-template-literals-2bbc