In this tutorial, we will learn about multiline string in javascript. In the world of Javascript programming, comments play a crucial role in explaining the functionality of the program. When it comes to displaying long strings of text, it is essential to divide them into logical sections. However, presenting such strings on a single line can make them difficult to read and understand.
This is where multi-line strings come in handy. They are the most effective way to display several string statements in a logical order. With multi-line strings, we can easily split a long string into separate lines, making it more readable and comprehensible.
To declare javascript string multiline, there are several options available. One way is to use the new line character (/n) to separate the lines. Another way is to use string concatenation (+) to join different strings together.
It’s worth noting that before ES6, multi-line strings were not allowed in Javascript. However, if you need to support older browsers, there are still other options available for dealing with multi-line strings.
Some Methods of Multiline String JavaScript
(1) Using <br> tag to seperate the line of a given String multiline string in javascript
<!DOCTYPE html>
<html lang="en">
<head>
<title> Multiple new lines example </title>
</head>
<script>
var mulstr='This website tries to keep you many types of updates like in Programming world like JAVA, JSP, PHP, WORDPRESS and much more.<br>The word developer helps indicates that this website will help to the every starting level to the high-level programmer.'
document.write(mulstr);
</script>
</html>
Output :
This website tries to keep you many types of updates like in Programming world like JAVA, JSP, PHP, WORDPRESS and much more.
The word developer helps indicates that this website will help to the every starting level to the high-level programmer.
(2) Using + operator to concatenate the Strings
If you have a preference for writing code in a traditional manner that is easy to comprehend, you can utilize the conventional string concatenation technique to create a multiline string javascript. This involves concatenating each line of the string to the designated variable individually. The resulting code will be more transparent and accessible to other programmers who may read or modify it.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Multiple new lines example </title>
</head>
<script>
var mulstr="This is my" +
" multiline String " +
" which is amazing";
document.write(mulstr);
</script>
</html>
Output :
This is my multiline String which is amazing
(3) Using <p> or <b> to divide them into multiple lines or paragraphs multiline string in javascript
<!DOCTYPE html>
<html>
<script>
var mulstr ='<p> This is fist line of the paragraph. </p>' +
'<b> This text will show you in bold letters in next line. </b>' +
'<p> Now, it is again a simple text line. </p>';
document.write(mulstr);
</script>
</html>
Output :
This is fist line of the paragraph.
This text will show you in bold letters in next line.
Now, it is again a simple text line.
(4) Using \ operator, writing a javascript multiline strings using double/single quotes, we can use the newline character (\n)
After each newline character (n), add an extra backslash ( \ ), which tells the compiler that the string isn’t finished yet.
<!DOCTYPE html>
<html>
<head>
<title> Create multi-line strings </title>
</head>
<body>
<h1> JavaScript multi-line Strings using / operator</h1>
<div class="multiline"></div>
<p> Click on the button to insert multiline text </p>
<button onclick="showMultiline()"> Click here </button>
<script type="text/javascript">
function showMultiline() {
multilineString =
"<div> \
<h3>This is the heading</h3> \
<p>This is a paragraph \
This uses backslashes in place\
of new lines</p> \
</div>"
document.querySelector('.multiline').innerHTML
= multilineString;
}
</script>
</body>
</html>
Output :
Before Clicking
After Clicking
(5) Using Template Literals for multiline string in javascript
One of the exciting features introduced in EcmaScript 6 (ES6) is the ability to use back ticks to create a string with a specific format, which is known as a template string literal. This is a handy tool that offers a lot more flexibility and readability than traditional strings.
One of the benefits of using template string literals is the ability to add new line breaks without resorting to clunky escape characters or concatenation. Simply pressing the Enter key inside a template string literal will create a new line in the output string. This feature can be particularly useful when dealing with longer strings or when trying to create a more readable and organized output.
It is also worth noting that the back tick key, “`”, is typically located in the upper leftmost corner of a standard keyboard, making it easy to access and incorporate into your code. By utilizing template string literals, developers can create more elegant and sophisticated code that is easier to read and maintain.
In conclusion, the inclusion of template string literals in ES6 provides a simple yet powerful way to format strings in a more flexible and intuitive way. By using the back tick key to create template string literals, developers can easily incorporate new line breaks and other formatting elements, making their code more readable and efficient.
<!DOCTYPE html>
<html>
<head>
<title> Create multi-line strings </title>
</head>
<body>
<script>
const multiLine = (str) => {
return str;
}
let string = `
Harry Potter
Hermione Grainger
Ronald Weasley
Neville Longbottom
`
console.log(multiLine(string));
</script>
</body>
</html>
Output :
Harry Potter
Hermione Grainger
Ronald Weasley
Neville Longbottom
