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 = `
<article>
  <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