How to Add Newline in JavaScript
- Use Escape Sequence to Add a New Line in JavaScript
- Use the Temperate Literals to Add a New Line in JavaScript
- Use the HTML Break Element to Add a New Line in JavaScript
This article will look at some JavaScript line break methods and how to use them when working with strings.
String manipulation in JavaScript can be a tricky topic. String manipulation is easy to learn but difficult to implement, and one such thing is the addition of new lines in strings.
There are many ways to break lines in JavaScript, but they are not as simple as paragraphs or break tags in HTML.
Let’s look at the most commonly used line break methods in JavaScript.
Use Escape Sequence to Add a New Line in JavaScript
Escape sequences are a popular way to create new lines in JavaScript. The \n escape sequence creates line breaks on Windows and Linux, but \r is used on some older Macs.
The implementation of escape sequences is very simple.
let orgnstring = 'Hello Shiv welcome to upwork platform';
let newstring = 'Hello Shiv \nwelcome to\nupwork platform';
console.log(orgnstring);
console.log(newstring);
Output
Hello Shiv welcome to upwork platform
Hello Shiv
welcome to
upwork platform
Use the Temperate Literals to Add a New Line in JavaScript
Template literals sound pretty cool, but they’re just string literals that accept inline expressions.
It is easier to work with multiline strings. Template literals are enclosed in backticks.
let orgnstring = 'Hello Shiv welcome to upwork platform';
let newstring = `Hello Shiv
welcome to
upwork platform`;
console.log(orgnstring);
console.log(newstring);
Output
Hello Shiv welcome to upwork platform
Hello Shiv
welcome to
upwork platform
In both cases, the output returned is the same. But as you can see, template literals make it easier to write multiline strings.
Use the HTML Break Element to Add a New Line in JavaScript
Adding an HTML newline element to a line is another way to add a new JavaScript line.
The line break element should only be used when line breaks are important. However, consider this method as it is very common.
<html>
<body>
<p id="newline"></p>
<script>
let orgnstring = "Hello shiv" + "<br>" + "welcome to "+ "<br>" + "upwork platform";
document.getElementById("newline").innerHTML = orgnstring;
</script>
</body>
</html>
Output
Hello shiv
welcome to
upwork platform
.innerHTML instead of .innerText.
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn