Skip to main content

Explore your training options in 10 minutes

JavaScript: MultiLine Strings Using \n and Template Literals

Christina Kopecky - December 18, 2020

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:

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

  • 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"

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";

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

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

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

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}.`;


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 = => {
     return `
      • ${} -- ${char.role}`
  return `${str}
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!


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.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy,, and Educative.

Skip to main content