Multi-line Strings in Template Literals in JavaScript

Template literals are the objects such as characters (A−Z,a−z), numbers(0−9) and printable special characters (_,*....) enclosed between the backticks ( `` ) instead of a regular string literal notation such as double quotes (“ “) or single quotes (‘ ’). This feature is unique to JavaScript and was introduced in ES6 specification.

Now, let's move on to understanding multi−line strings.

Multi−line strings are string literals spanning over multiple lines of code. In JavaScript, there is no specific limit of characters allowed for a particular line, this depends on the editor used. But, in practice not more than 120 characters are used in a line.

Representation of Multiline strings

In standard libraries, multi−line strings are represented by a sequence of characters enclosed within the double quotes. The lines are demarcated by the new−line character (
) and a backslash.

Example

“A string which
\

spans a lot
\

of lines
\”

This is the standard method but the backslashes at the end can lead to parsing errors. Therefore, it is advisable to use the template libraries. You can also use the string−concatenation method as well.

In template libraries, the multi−line strings will be represented by a sequence of characters enclosed within backticks. The spaces and implicitly mentioned newlines will be carried over.

Example

` A string which

spans a lot

Of lines`

The above strings when printed will yield:

A string which

spans a lot

of lines.

Algorithm

Step−1: Declare or initialize a new constant object, say, multistr.

Step−2: Initialize the multistr object with a multi−string enclosed within backticks.

Step−3: Print the value stored in the multistr object.

Example

// a new variable is declared and initialized.
var multistr = `A string which
spans a lot
Of lines`;
// The value in multistr is printed
console.log(multistr);

Template libraries also allow us to use place−holders in between the strings. The place−holders are generally variables. The editor identifies the place−holder when it is placed between flower brackets preceded by a dollar sign (“ ${} ”) . Using this attribute we can allocate values to the string dynamically.

Syntax

${ identifier_name }

Example

var str= “string”
`A multi- ${str}`

Algorithm

Step−1 : Declare and initialize a valid string object with an initial value.

Step−2 : Use the placeholder variable in the multiline string.

Step−3 : Print the multiline string.

Example

// a new variable is declared and initialized.
var str=`string`
// a multiline string variable is declared.
var multistr = `A ${str} which
spans a lot
Of lines`;
// The value in multistr is printed
console.log(multistr);

Conclusion

In this article, we understood how multi−strings are represented using template libraries. The differences between the standard representation and the representation using template libraries was clarified. The placeholder application was also illustrated.