JavaScript multiline string Best Way and Examples

You can have multiline strings in pure JavaScript. In ES6 Update, you can create multi-line strings simply by using backticks.

The multi-line strings were not supported by JavaScript 2015.

ECMAScript 6 (ES6) introduces a new type of literal, namely template literals.

Template literals are strings delimited by backticks, instead of the normal single/double quote delimiter.

JavaScript multiple line string Example

It have a unique feature to allow multiline strings.

<!DOCTYPE html> 
<html> 
<body> 
    <script> 
      
      	const multilineString = `A string
								on multiple lines`

		const anotherMultilineString = `Hey
							this is cool
							a multiline
							st
							r
							i
							n
							g
							!
							`

		alert(multilineString)
      
    </script> 
  
</body> 
</html>  

Output:

JavaScript multiline string

Other ways to JavaScript multiline string

There are various ways to handle multi-line strings if older browser support is essential.

Using template literals with different Tags

The strings are delimited using backticks, unlike normal single/double quotes delimiter.

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        Create multi-line strings 
    </title> 
</head> 
  
<body> 
    <h1> EyeHunts </h1> 
      
    <b> 
        How to create multi-line 
        strings in JavaScript? 
    </b> 
      
    <p> 
       	Button in 
        multiline text 
    </p> 
      
    <button> Button</button> 
      
    
</body> 
  
</html> 

Output:

JavaScript multiline string example

Multiline string without newlines

If you introduce a line continuation (\) at the point of the new line in the literal, it won’t create a new line on output:

const text = `a very long string that just continues\
and continues and continues`;
console.log(text); 

How to JavaScript multiline string with variables

You can take advantage of Template Literals and use this syntax:

`String text ${expression}`

Template literals are enclosed by the back-tick (` `) (grave accent) instead of double or single quotes.

This feature has been introduced in ES2015 (ES6).

Example

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`)

Q: Can we do javascript multiline string with newlines (\n)?

Answer: Don’t use “\n”. Just enter a back-slash and keep on truckin’! Works like a charm. Example:-

var string = "this\
is a multi\
line\
string";

How to concatenate multiline string in javascript?

Answer:

  • \ – regular escape, if you need the quote in your string just type \’
  • \n – newline
  • \t – tab

Use this method to concatenate multiline string in js.

'Hello Javascript' + 
'world' +
'!!!' +
...

How to JavaScript split multi-line string to array?

Answer: Use split() Method to multiline string to array.

str = "abc\ndef";
console.log(str.split("\n"));

Output:

[“abc”, “def”]

Do comment if you have any questions, doubts and suggestions on this tutorial.

Note: The All JS Examples codes are tested on the Safari browser (Version 12.0.2) and Chrome.
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.