How to print a new line in TypeScript

In TypeScript, printing a new line to the console or incorporating a new line into a string is straightforward. This guide will show you different methods to achieve this.

Using \n for a new line

The most common method to insert a new line in a string in TypeScript (and in most programming languages) is by using the newline character \n.

In a console log:

console.log("This is the first line.\nThis is the second line.");

When executed, this will display:

This is the first line. This is the second line.

In a string variable:

let multiLineString = "Hello,\nWorld!"; console.log(multiLineString);

Using template literals

Introduced in ECMAScript 2015 (ES6), template literals provide a convenient way to create multi-line strings without needing to use the \\n character. They're wrapped in backticks (``) instead of the usual single (' ') or double (" ") quotes.

let multiLineString = `This is the first line. This is the second line.`; console.log(multiLineString);

Printing to HTML content

If you're using TypeScript with a web framework and you want to insert a new line into HTML content, the newline character \n won't work. Instead, you'd use the HTML line break tag <br>.

let htmlString = "This is the first line.<br>This is the second line."; document.getElementById("myElement").innerHTML = htmlString;

String concatenation

You can also concatenate strings and the newline character \n to produce multi-line strings:

let line1 = "This is the first line."; let line2 = "This is the second line."; let multiLineString = line1 + "\n" + line2; console.log(multiLineString);

Final thoughts

Printing a new line in TypeScript is as easy as knowing which character or method to use based on your application's needs. Whether you're printing to the console, creating a string variable, or interacting with the DOM, you have several methods at your disposal to effectively manage new lines.

Invite only

The next generation of charts.

Coming soon.

The next generation of charts. Coming soon.

The next generation of charts. Coming soon.

Fast. Opinionated. Collaborative. Local-first. Keyboard centric. Crafted to the last pixel. We've got 50 slots for Alpha access.