Multiline String in JavaScript
Overview
Working with string values is one of the most common applications of JavaScript. Strings are objects in the JavaScript programming language. A string is a series of one or more characters that can be letters, numbers, or symbols. Strings are primitive data types in JavaScript that are immutable, which means they do not change. Javascript Multiline String improves readability. For example, breaking a long paragraph into points makes the content easier to understand. You can use the + operator, a new line character (\n), and template literals to make multi-line strings in javascript.
Introduction
Multiple line strings are generally used in Javascript programs to give comments that explain the program's operation. A multiple-line string is the most commonly used method for displaying a string.
There are numerous ways to show a string that does not contain a newline character. Multi-line javascript strings are the most effective approach to display several string statements in a logical order. This is important if we have a long string that we want to divide into different lines. We cannot put the data on a single line since it will be unreadable. There are numerous approaches to declaring multiple line strings in javascript. We split a string into many lines by using the new line character (/n), string concatenation (+), and template literals.
Multi-line strings were not allowed by JavaScript 2015 until ES6 introduced string literals. ES6 supports Multi-line strings. If older browser support is required, there are several other options for dealing with multi-line strings.
Methods of Adding Multi-line Strings in Javascript
Example 1. This is a basic example of multi-line text printing in JavaScript. In this example, we merely used the HTML <br> tag to separate the sentences into numerous lines.
Output:
Example 2: In this example, we'll pass the text string inside <p> or <b> or heading tabs (<h1> to <h6>) to divide them into multiple lines or paragraphs.
Output:
Example 3: In this example, we'll concatenate the individual strings using + operator. It is the simplest but most time-consuming method of separating each line as a string and concatenating them into one final string.
Output:
- Before clicking the button:
- After clicking the button:
Example 4: In this example, we'll concatenate the individual strings using \ operator. When writing a multi-line string in javascript using double/single quotes, we can use the newline character (\n). After each newline character (n), add an extra backslash ( \ ), which tells the JavaScript engine that the string isn't finished yet.
Output:
- Before clicking the button:
- After clicking the button:
Example 5: In this example, we'll use a template literal to concatenate the separate strings. Template literals are used to generate multi-line strings in javascript. Unlike the standard single/double quotes delimiter, the strings are separated by backticks.
Output:
- Before clicking the button:
- After clicking the button:
Conclusion
- A multiple lines string breaks the text across numerous lines in order to make the code easier to understand. Your code may contain extremely long strings at times.
- Rather than having lines that continue indefinitely or wrap at the discretion of your editor, you may want to explicitly break the string into numerous lines in the source code without changing the actual string contents.
- There are several ways to specify a multi-line string in Javascript. By using template literals, you can have a string divided across many lines. Alternatively, the + and \ operators can be used to divide a string into multiple lines.
- Multi-line strings in javascript were not allowed by 2015 until ES6 introduced string literals. In ES6, template literals were introduced. You can also use them to add the contents of a variable to a string.