How to include line breaks and tabs in strings in JavaScript

01/03/2024

JavaScript has special characters to include newlines and tabs in strings. This article explains how to use them.

How can I include line breaks and tabs in a string in JavaScript?

If you want to include special characters such as line breaks and tabs when writing in JavaScript, use special characters called escape sequences .

TOC

Include line breaks and tabs in string

JavaScript uses special characters called escape sequences　to include special characters in a string .

To include a newline, insert the newline code \n in the string.

var str = “Hello, \n World!”;

To include a tab, insert the tab code \t in the string.

var str = “Hello, \tWorld !”;

However, in JavaScript, when a string containing line breaks and tabs is displayed in HTML, the line breaks and tabs are not reflected as is . Therefore, to reflect line breaks and tabs in HTML, do the following.

<!DOCTYPE html>
<html>
<body>

<h1>How to include line breaks in a string in JavaScript</h1>

<p id="demo">The string is output here.</p>

<script>
    var str = "Hello,\nWorld\t!";
    document.getElementById("demo").innerHTML = str.replace(/\n/g, "<br>")
                                                    .replace(/\t/g, "    ");
</script>

</body>
</html>

To reflect a line break, use the tag in the HTML document.

In the above example, str.replace(/\n/g, “”) is used to replace a newline in a string with an HTML tag.

Also, str.replace(/\t/g, ” “) is used to replace tabs in strings with HTML’s (non-breaking space).

CHECK

innerHTML is a property for retrieving and setting HTML code within an HTML element.

By using innerHTML, you can get or set the HTML code inside an HTML element, which can contain not only HTML code but also text, images, etc.

About the main escape sequence strings

JavaScript uses special characters called escape sequences to include special characters in a string. You can use escape sequences to disable the functionality of special characters in strings.

Below is a list of escape sequences that can be used in JavaScript.

escape sequence	meaning
\	represents a backslash
‘	represents a single quote
“	represents a double quote
\n	represents a line break
\t	represents a tab
\b	represents backspace
\f	represents a page break
\r	represents a carriage return

Mainly used escape sequences

How to use template literals

Template literals allow you to surround strings with backticks (`). You can enter special characters such as line breaks and tabs directly within template literals. Below is an example.

// Template literals are used to create strings containing newlines and tabs
const multilineString = `row1
row2
row3`;
console.log(multilineString);

const tabbedString = `col1\tcol2\tcol3`;
console.log(tabbedString);

Running the above code will output the following:

row1
row2
row3
col1    col2    col3

How to use String.raw()

The String.raw() method allows you to create a string ignoring escape sequences. Below is an example.

// Use String.raw() to create a string containing newlines and tabs
const multilineString = String.raw`row1\nrow2\nrow3`;
console.log(multilineString);

const tabbedString = String.raw`col1\tcol2\tcol3`;
console.log(tabbedString);

Running the above code will output the following:

row1
row2
row3
col1    col2    col3

summary

　In JavaScript, there are ways to include line breaks and tabs in strings, such as escape sequences, template literals, and the String.raw() method. It is important to use these methods properly to create strings appropriately. Don’t forget to select the appropriate output method to display the string.