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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!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:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!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:
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:
|
1 2 3 |
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:
|
1 |
`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
|
1 2 3 |
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:-
|
1 2 3 4 |
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.
|
1 2 3 4 |
'Hello Javascript' + 'world' + '!!!' + ... |
How to JavaScript split multi-line string to array?
Answer: Use split() Method to multiline string to array.
|
1 2 |
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
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.