Creating Multi Line Strings in JS with Backticks

To create a multi-line JavaScript string, wrap your text in backticks and press Enter wherever you need a new line. The line breaks you type become line breaks in the string output.

javascript

const poem = `Roses are red,
Violets are blue,
Template literals are concise,
And easy to use.`;
 
console.log(poem);

The console prints four lines exactly as typed. No newline escape sequences, no plus operators between lines. Just type the text the way you want it to appear.

This technique relies on template literals, the same backtick syntax used for string interpolation.

The old ways: before template literals

Before ES6 introduced template literals, JavaScript had three workarounds for multi-line text. Each produced the correct output but was unpleasant to read.

The first approach packed newline escape sequences into a single quoted string:

javascript

const a = "Line one\nLine two\nLine three";

Every \n blends into the surrounding text, making the string hard to scan. The second approach split the string across lines with plus operators:

javascript

const b = "Line one\n" +
          "Line two\n" +
          "Line three";

You must remember to add \n and + on every line. Forgetting either produces a broken result. The third approach put each line in an array and joined with a newline:

javascript

const c = [
  "Line one",
  "Line two",
  "Line three"
].join("\n");

This is the cleanest of the old methods because each line is a standalone string. But the .join("\n") call is still an extra step you must remember each time. All three print the same three-line output.

If you are new to the backtick syntax used below, start with the guide to template literal strings before continuing.

The modern way with backticks

With template literals, you type the text between backticks and press Enter where you want line breaks. The source code matches the output.

javascript

const address = `Rune Hub
123 Developer Lane
San Francisco, CA 94107`;
 
console.log(address);

The console shows three lines. The newline after "Rune Hub" in the source is the same newline in the output.

You can also combine multi-line text with ${} interpolation to insert dynamic values without breaking the layout.

javascript

const city = "San Francisco";
const zip = "94107";
 
const address = `Rune Hub
123 Developer Lane
${city}, CA ${zip}`;
 
console.log(address);

The third line becomes San Francisco, CA 94107 at runtime. The static parts stay as typed, and the dynamic parts fill in from variables.

Building HTML fragments

One of the most practical uses is building small HTML snippets. The structure stays visible and readable inside the JavaScript.

javascript

function createCard(title, description) {
  return `
    <div class="card">
      <h2>${title}</h2>
      <p>${description}</p>
    </div>
  `;
}
 
console.log(createCard("Welcome", "Thanks for visiting."));

The console prints the full HTML with proper indentation. You can see the nesting at a glance: the div wraps both the h2 and p elements.

No escaped double quotes, no plus signs, no newline characters to manage. Compare this to the old concatenation approach:

javascript

function createCard(title, description) {
  return "<div class=\"card\">\n" +
         "  <h2>" + title + "</h2>\n" +
         "  <p>" + description + "</p>\n" +
         "</div>";
}

Every double quote inside the HTML needs a backslash escape, and every line needs a \n and a +. It is easy to miss a character and get a malformed string.

The template literal version eliminates all of these failure points.

The indentation trap

Template literals preserve every space and tab inside the backticks. When you indent the literal to match your surrounding code, that indentation becomes part of the output.

javascript

function getMessage() {
  return `
    Hello, World!
    This is indented.
  `;
}
 
console.log(getMessage());

The console prints a leading blank line from the newline right after the opening backtick, then four-space indentation before each line of text. It also prints a trailing blank line from the newline before the closing backtick.

None of this is visible as code logic, but it all ends up in the string.

When clean output matters, call .trim() on the result to strip the leading and trailing whitespace:

javascript

function getMessage() {
  return `
    Hello, World!
    This is indented.
  `.trim();
}
 
console.log(getMessage());

This prints Hello, World!\n This is indented. with the outer blank lines removed. The inner indentation on the second line stays, because trim only strips whitespace from the very start and end of the whole string.

For longer blocks, trimming is usually the better choice because it lets you keep the source code indented while producing clean output.

When to use each approach

Different situations call for different approaches. Here is a quick reference to help you choose the right tool for the job.

For new code, reach for backticks first. The other approaches are useful to recognize when reading older JavaScript, but you rarely need to write them yourself.

Multi-line template literals combined with ${} interpolation handle the vast majority of real-world string formatting needs.

Common mistakes

Using regular quotes and expecting multi-line behavior causes a SyntaxError. Only backticks support line breaks in the source. Single and double quotes cannot span multiple lines.

Forgetting that leading indentation becomes part of the string is another pitfall. When building HTML inside backticks, extra whitespace usually does not matter because browsers collapse it. But for plain text or API payloads, unexpected indentation causes bugs that are hard to spot.

Do not put template literals inside a JSON file. JSON does not support backticks or template literals, so use newline escapes inside double-quoted JSON strings instead.

See the guide to working with JSON in JavaScript for more on handling structured data across the JavaScript and JSON boundary.