Manipulating strings in JavaScript is a skill that is straightforward to grasp but challenging to excel in. JavaScript did not initially support multi-line strings; however, ES6 (ECMAScript 6) introduced string literals post-2015, enabling multi-line string functionality.
There are multiple approaches to managing multi-line strings. In this section, we will explore various techniques for handling multi-line strings individually.
Below are a couple of methods for handling multi-line strings:
Method 1
One straightforward method in JavaScript to display text strings across multiple lines is by utilizing the line break character (<br>) or incorporating HTML tags within the document.write function to initiate a new line for the text.
Example
Below is a demonstration illustrating the practical application of multi-line strings in JavaScript programming:
Copy Code
<html>
<head>
<title> Multiple new lines example </title>
</head>
<script>
document.write("This is first line display using JavaScript.");
document.write("<br>");
document.write("This is second line and divided using break line tab of HTML.");
document.write("<br>");
document.write("Now, we again printed another new line.")
</script>
</html>
Output
Upon running this code, three text strings will be shown on the web, separated by the HTML line break tag (<br>).
This is first line display using JavaScript.
This is second line and divided using break line tab of HTML.
Now, we again printed another new line.
Example 2: Concatenating individual string
In the forthcoming demonstration, we will showcase the method of displaying a multi-line string in JavaScript without incorporating any line breaks.
Copy Code
<html>
<head>
<title> Multiple new lines example </title>
</head>
<script>
var myString ='C# Tutorial is a website of technologies, ' +
'which provides tutorials of different technologies and tools. ' +
'Here you will get tutorials in detail' +
'like theory as well as practical implementation.' +
'<br> We will try to provide you the best knowledge from our side.' +
'Student, teachers, and industry professionals can learn from here.';
document.write(myString);
</script>
</html>
Output
Upon running this code, two separate text paragraphs will be displayed on the webpage, each separated by an HTML line break tag (<br>).
C# Tutorial is a website of technologies, which provides tutorials of different technologies and tools. Here you will get tutorials in detail 'like theory as well as practical implementation.
We will try to provide you the best knowledge from our side. 'Student, teachers, and industry professionals can learn from here.
Example 3
Below is a straightforward illustration demonstrating the printing of multi-line text through JavaScript coding. In this instance, we solely utilized the HTML <br> element to segment the sentences into multiple lines:
Copy Code
<html>
<head>
<title> Multiple new lines example </title>
</head>
<script>
var multilineString ='JavaScript is a programming language that is useful for web development at client-side execution.' +
'This language is very light-weighted mostly used to put validations, so they check at the client-side.' +
'<br> Nowadays, it is very trending in market for web development.' +
'<br> As it also allows dynamic execution of code.';
document.write(multilineString);
</script>
</html>
Output
Upon running the provided code, three separate paragraphs will be rendered on the webpage, each appearing on a new line due to the implementation of the HTML line break tag (<br>).
JavaScript is a programming language that is popular for web development at the client-side execution. This language is very light-weighted mostly used to put validations, so they check at client-side.
Nowadays, it is very trending in market for web development.
As it also allows dynamic execution of code.
Method 2: You can also pass the text string inside <p> or <b> or heading tabs (<h1> to <h6>) to divide them into multiple lines or paragraphs. See the code below:
Copy Code
<script>
var multilineString ='<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(multilineString);
</script>
Output
The line that was passed above will be displayed across multiple new lines. These new lines begin on a fresh line utilizing the paragraph and bold tab.
This is first line of the paragraph.
This text will show you in bold letters in next line.
Now, it is again a simple text line.
Method 3 involves printing a string that spans multiple lines. This approach is commonly used when you need to create formatted paragraphs.
Example
To improve the clarity of paragraphs in HTML, you can utilize multiple HTML elements to contain multi-line text. This method helps in organizing and presenting content effectively. Below is an example demonstrating this technique:
Copy Code
<html>
<head>
<title> Create multi-line strings </title>
</head>
<body>
<center>
<h1 style="color: green"> C# Tutorial </h1>
<b> Multi-line string creation example using JavaScript and HTML </b>
<p> Click on the button to insert multi-line text </p>
<button onclick="showMultilineString()"> Display Multiline </button>
<span id="multiline"> </span>
<script>
function showMultilineString() {
multilineString =
"<div>" +
"<h3>This is an heading using h3 tab. </h3>" +
"</br><p> This is another string new line." +
"We have combined all these strings using" +
"concatenation operator. This text string will show you two three lines.</p> " +
"</div>" ;
document.getElementById('multiline').innerHTML = multilineString;
}
</script>
</center>
</body>
</html>
Output
Upon execution, the result will be presented on the web interface. Upon observing the output, a "Display Multiline" button will be available to reveal a text string.
Press the "Display Multiline" button to view a text string presented across multiple lines. Refer to the output displayed below: