Create Multiline string in JavaScript ES6

JavaScript

In this post, we are going to learn how to Create Multiline strings in JavaScript ES6. In ES6 Template literal is used to create a multiline string. The Template literal is introduced in ES6 that can be used to create a multiline string. The earlier ways to create a multiline string in javascript are Escaping Newlines, Concatenating Strings, by using Array. join() method,. We are going to understand each of them step by step with an example.

Template literal:Create Multiline string in JavaScript ES6

In JavaScript ES6 the Template literal is used to create a multiline string this is the best and easy way to create a multiline string. We will understand what is Template literal and how to Create Multiline strings in JavaScript ES6.

What is Template literal?

Template literal was Introduced in ES6(2015), Earlier, we used to create a string using single quotes (‘) or double quotes (“) quotes. But creating a string this way has some limited functionality. Template literal gives us more facility to create a dynamic string. Template literal use back-ticks(“) to define a string as shown below

Syntax

string sentence = `Let work with string using Template literal`

Benefits of ES6 Template literal

  • String Substitution/Interpolation
  • Multiline String
  • Template Tag

Template literal: Create Mutiline string in JavaScript ES6

In this example, we are creating a multiline string by using template literal().We have closed the multiline strings inside this ( ‘ ‘) as in the output the string is printing multiline as passed.

var mutiLineStr =  `Hi Welcome to devenum ,
  Hi,How are you! ,
  Thanks for visiting us,
  Happy Learning!`
  
console.log(mutiLineStr)

Output

Hi Welcome to devenum ,
  Hi,How are you! ,
  Thanks for visiting us,
  Happy Learning!

Before ES6 ways to create Multiline string in JavaScript

  • JavaScript Multiline string Using Newline
  • JavaScript Multiline Concatenating Strings
  • Create Mutiline string using array.join()

1. JavaScript Multiline string Using Newline

Earlier ES6 the newline character(\n) is part of the string and used to create a multiline string in JavaScript.

var mutiLineStr = 'Hi Welcome to devenum\nHi,How are you! \nThanks for visiting us\n Happy Learning!'
console.log(mutiLineStr)

Output

Hi Welcome to devenum
Hi,How are you! 
Thanks for visiting us
 Happy Learning!

2.JavaScript Multiline Concatenating Strings

To create a multi-line string we break the string into multiple substrings and concatenate them using the + operator. But it is tedious and needs extra markup to get the final string. In this approach, we also use the + operator along with the \n (newline character to display a string in multiple lines.

var mutiLineStr = 'Hi Welcome to devenum\n'+
'Hi,How are you!\n'+
'Thanks for visiting us\n'+
'Happy Learning!'
console.log(mutiLineStr)

Output

Hi Welcome to devenum
Hi,How are you!
Thanks for visiting us
 Happy Learning!

3. Create Mutiline string using array.join()

In this example, we are passing the multiline string as elements of the javascript array and making it a multi-line string by using the array. join() and in output, we can see the string is printing as multiline.

var mutiLineStr = [  
  'Hi Welcome to devenum \n',
  'Hi,How are you!\n',
  'Thanks for visiting us\n',
  'Happy Learning!\n'
].join('')

console.log(mutiLineStr)

Output

Hi Welcome to devenum 
Hi,How are you!
Thanks for visiting us
Happy Learning!

Related Posts