JavaScript: MultiLine Strings Using \n and Template Literals

You can create a JavaScript multiline string using new line characters, concatenation, and template string literals. Template string literals are the most modern syntax and also let you embed variables into a string.

Have you ever wanted to span a string across multiple lines of text? I would not be surprised. This is a very common need for developers. The last thing you want to do is add a string into your code that does not display the way you want it to.

Not to worry because JavaScript has us covered. In JavaScript, there are three ways you can create multi-line strings:

• Using new line characters (\n).
• Using string concatenation.
• Using template string literals.

In this guide, we’re going to talk about how to use each of these three approaches to write a multi-line string. We’ll walk through examples of each approach so you can easily get started.

Prior to ES6: New Lines and Concatenation

Before ECMAScript 6 (ES6), you had to use new line characters or string concatenation to separate a string into multiple lines.

const multiLine = (str) => {
   return str;
 }
  let string = "\nHarry Potter\nHermione Grainger\nRonald Weasley\nNeville Longbottom\n"
  console.log(multiLine(string));

New line characters are part of the string. These characters are common in many programming languages. A new line character is denoted by “\n”. We can use this character to span our string across multiple lines. The resulting output is:

Our code returns our four Harry Potter characters on new lines. Each \n denotes a new line. If we wanted to have a one line gap between each name, we would need to specify two \n characters.

You can also use the JavaScript string concatenation operator:

const multiLine = ((str) => {
   return str;
})
let string = "The main characters in Harry Potter are:" + "\n\t" + "Harry Potter" + "\n\t" + "Hermione Grainger" + "\n\t" + "Ronald Weasley" + "\n\t" + "Neville Longbottom" + "\n";
console.log(multiLine(string));

In this example, we’re also depending on the new line characters. These are denoted by the \n example. This approach is useful if you have multiple strings you want to appear on different lines. But, your code can very quickly get messy. Nobody likes messy code.

These are acceptable ways of creating multi lines in JavaScript. But, with the advent of ES6 there is a new way to do the same thing: template string literals.

JavaScript Multiline String: Template String Literals

As part of EcmaScript 6 (ES6), we can use back ticks to create a string formatted in a particular way. This is called a template string literal. You can add new line breaks using the Enter key inside a template string literal.

The back tick, “`”, is the upper leftmost key on a standard keyboard.

Let’s take a look at the syntax for a string literal:

 const multiLine = (str) => {
   return str;
 }
  let string = `
 Harry Potter
 Hermione Grainger
 Ronald Weasley
 Neville Longbottom
 `
  console.log(multiLine(string));

We have declared a string that spans multiple lines. The back tick character denotes a string literal.

A big advantage of the string literal syntax is you can use variables inside the string. Use ${variableNameHere} to add variables to your template literal, like so:

var age = "13";
var message = `Jimmy is ${13}.`;

console.log(message);

Our code returns:

Jimmy is 13.

We have used the ${} syntax to add the contents of a variable into our string. For this syntax to work, we must use back ticks to declare our string. Let’s take a look at a more complicated example:

const multiLine = ((str, chars) => {
   let mapped = chars.map(char => {
     return `
      • ${char.name} -- ${char.role}`
   }).join('');
  return `${str}
${mapped}`
})
let characters = [
  {name: "Harry Potter", role: "The Chosen One"},
  {name: "Hermione Grainger", role: "The Smart One"},
  {name: "Ronald Weasley", role: "The Funny One"},
  {name: "Neville Longbottom", role: "The Forgetful One"}
];
let string = "The main characters in Harry Potter are:"
console.log(multiLine(string, characters));

Our code returns:

The main characters in Harry Potter are:

      • Harry Potter -- The Chosen One
      • Hermione Grainger -- The Smart One
      • Ronald Weasley -- The Funny One
      • Neville Longbottom -- The Forgetful One

One thing to note with the template literal is that it will observe all white space and carriage returns.

You can read more about JavaScript literals in our JavaScript string interpolation guide.

That’s all there is to it! You now have the ability to write JavaScript multi line strings in both ES6 and ES5 syntax!

Conclusion

There are three ways to create a multiline string in JavaScript. We can use the concatenation operator, a new line character (\n), and template literals. Template literals were introduced in ES6. They also let you add the contents of a variable into a string.

Do you want to learn more about JavaScript? Check out our complete How to Learn JavaScript guide. You’ll find expert advice and guidance on top courses, books, and online resources in this guide.