Introduction

In modern JavaScript, the standard way to assign a multiline string to a variable is to use a template literal with backticks. That gives you actual line breaks directly in the source code without awkward concatenation. Older techniques still exist, but they are mostly useful for compatibility or for very specific formatting needs.

The Preferred Solution: Template Literals

Template literals preserve line breaks exactly as written between backticks.

1const message = `This is line one.
2This is line two.
3This is line three.`;
4
5console.log(message);

This is usually the cleanest option because:

• the source matches the final text closely
• no manual \n is required
• interpolation is built in

That last point matters a lot in real code.

Multiline Strings With Interpolation

Template literals can include variables or expressions using ${...}.

1const name = "Alice";
2const count = 3;
3
4const text = `Hello ${name},
5You have ${count} new messages.
6Please check your inbox.`;
7
8console.log(text);

This is one of the main reasons template literals replaced older concatenation-heavy patterns in modern JavaScript.

Older Alternative: Concatenation With \n

Before template literals, developers usually built multiline strings with explicit newline escape sequences.

1const message = "This is line one.\n" +
2                "This is line two.\n" +
3                "This is line three.";
4
5console.log(message);

This still works, and it can be useful when the string is assembled dynamically from small fragments. It is just less readable when the content is mostly fixed text.

Backslash Line Continuation Is Not the Same Thing

Another older pattern uses a backslash at the end of a source line:

1const text = "This is one long \
2string written across \
3multiple source lines.";
4
5console.log(text);

This does not insert real line breaks into the resulting string. It only lets the source code continue across lines. That is why it is usually the wrong tool when you actually want a multiline value.

Arrays Plus join() for Structured Text

If your text is assembled from separate logical lines, an array can be easier to manage than a giant literal:

1const lines = [
2  "Server started successfully.",
3  "Port: 8080",
4  "Mode: development"
5];
6
7const output = lines.join("\n");
8console.log(output);

This is especially useful when the number of lines is dynamic or when they come from conditional logic.

Watch Out for Indentation

One common surprise with template literals is that indentation in the source code becomes part of the string.

1const text = `
2    first line
3    second line
4`;

That string contains leading spaces before each line. If indentation matters, either align the literal carefully or trim the result afterward.

This is the most common practical bug with multiline strings in real codebases.

Choosing the Right Approach

Use this simple rule:

• use template literals for most fixed or semi-fixed multiline text
• use concatenation or arrays when you are building the content programmatically
• avoid backslash continuation when you need actual newline characters

That keeps the code readable and the output predictable.

Common Pitfalls

• Using a backslash line continuation and expecting real line breaks in the final string.
• Forgetting that template-literal indentation becomes part of the string.
• Overusing concatenation for fixed text that would be clearer as a template literal.
• Mixing actual newlines and \n escapes inconsistently inside one string-building pattern.
• Forgetting that interpolation works only inside template literals, not normal quoted strings.

Summary

• In modern JavaScript, template literals are the preferred way to create multiline strings.
• They preserve real line breaks and support interpolation naturally.
• Concatenation with \n still works and is sometimes useful for dynamic assembly.
• Backslash source continuation does not create real multiline output.
• Always check indentation when using multiline template literals.