JavaScript Program to Create Multiline Strings (4 Ways)
Multiline strings are essential when working with large blocks of text or HTML content in JavaScript. They make code easier to read and maintain. JavaScript provides several ways to create multiline strings, ranging from modern techniques like template literals to traditional methods like string concatenation. This tutorial covers each method in detail to help you choose the best approach for your projects.
Create Multiline Strings in JavaScript Using Template Literals
Template literals, introduced in ES6, are the most modern and readable way to create multiline strings.
Code
const multilineString = `This is a multiline string.
It spans multiple lines
using template literals.`;
console.log(multilineString);
Output
This is a multiline string.
It spans multiple lines
using template literals.
Explanation
-
Use backticks (`) to enclose the string.
-
Line breaks are preserved without requiring any special characters.
JavaScript Program to Create Multiline Strings Using String Concatenation
Concatenating strings using the + operator can create multiline strings in older JavaScript versions.
Code
const multilineString = "This is a multiline string.\n" +
"It spans multiple lines\n" +
"using string concatenation.";
console.log(multilineString);
Output
This is a multiline string.
It spans multiple lines
using string concatenation.
Explanation
-
Strings are joined using the + operator.
-
Use \n to indicate line breaks.
JavaScript Program to Create Multiline Strings Using Escape Characters
Escape characters, like \n, can be used directly to insert line breaks within a string.
Code
const multilineString = "This is a multiline string.\nIt spans multiple lines\nusing escape characters.";
console.log(multilineString);
Output
This is a multiline string.
It spans multiple lines
using escape characters.
Explanation
-
Escape characters allow for line breaks within a single string.
-
This method is less readable compared to template literals.
JavaScript Program to Create Multiline Strings using Arrays and join()
This method involves storing each line of the string in an array and joining them with a separator (e.g., \n).
Code
const multilineArray = [
"This is a multiline string.",
"It spans multiple lines",
"using an array and join()."
];
const multilineString = multilineArray.join("\n");
console.log(multilineString);
Output
This is a multiline string.
It spans multiple lines
using an array and join().
Explanation
-
Each line is stored as an element in an array.
-
The join() method combines the elements into a single string with \n as the separator.
Content Used in the above Programs
-
Template Literals: Modern and intuitive way to handle multiline strings with backticks.
-
String Concatenation: Joins strings using the + operator, suitable for older JavaScript versions.
-
Escape Characters: Uses special characters (like \n) to insert line breaks in a string.
- Arrays and join(): Combines array elements into a single multiline string.