Template literals | Template strings

Template literals in ES6 (EcmaScript) allows us to embed expressions to our string literals. We can use multi-line strings and string interpolation features with them.

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

var message = `single line string`;
console.log(message);

// single line string

We can include place holders for string substitution using ${ } syntax

var expression = "place holder"; // string substitution
console.log(`this is a text with ${expression} in a line`);

// this is a text with place holder in a line

We can directly use expression interpolation to embed inline math

var a = 5;
var b = 5;

console.log(`the addition of a+b = ${a+b}`);
// the addition of a+b = 10

We can also call functions and use member functions in strings

function sample() { return "text from sample method"; }

console.log(`yes! ${sample()} and i am in uppercase`.toUpperCase());

// YES! TEXT FROM SAMPLE METHOD AND I AM IN UPPERCASE

The above code retrieves data from sample() method and converts it to uppercase in run-time.

Multiline Strings

We can achieve multi line strings, previously we used to insert new line character in our string

console.log(`First line
Second line`);
// First line 
// Second line

Raw strings

The special raw property, available on the first function argument of tagged template literals, allows you to access the raw strings as they were entered.

String.raw`Hi \n ${2+3}!`;
// "Hi \n 5!"

Tagged template literals

A more advanced form of template literals are tagged template literals. With them we able to modify the output of template literals using a function. The first argument contains an array of string literals. The second, and each argument after the first one, are the values of the processed substitution expressions. We can use any name to our function.

var a = 1;
var b = 2;

function tag(strings, ...values) {
 console.log(strings[0]); // "One "
 console.log(strings[1]); // " Two"
 console.log(strings[2]); // " Three"
 console.log(values[0]); // 1
 console.log(values[1]); // 2
}

tag`One ${ a } Two ${ b } Three`;

// One 
// Two 
// Three
// 1
// 2

Happy exploring EcmaScript 🙂

ECMAScript – Trailing Commas

JavaScript allowed trailing commas in array literals since the beginning. Trailing commas in other places have added in the later edition of ECMAScript.

What is trailing comma & why?

Trailing commas is also called as final commas.

It can be used while if you are adding new parameters or property to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.

Arrays, Object literals, function parameters allow trailing commas. However, JSON doesn’t allow trailing commas.

Trailing commas in Array literals

JavaScript allows the trailing commas in arrays.

literals1

If more than one trailing comma is used, an elision (or hole) is produced. An array with holes is called sparse (a dense array has no holes). When iterating arrays for example with Array.prototype.forEach() or Array.prototype.map(), array holes are skipped.

literals2

However, the final comma in the array is ignored.

Object literals

Trailing comma is supported in Object literals from the ECMAScript 5 edition.

literals3.PNG

Trailing commas in functions

ECMAScript 2017 allows trailing commas in function parameter lists.

Trailing commas allowed function definition and function calls. Trailing commas don’t affect the length property of function declarations or their arguments object.

literals4.PNG

Function parameters with commas only are invalid which will throw SyntaxError.

literals5

What about Internet Explorer Support?

If we are using babel to convert our scripts to native JavaScript to support Internet Explorer. We don’t have to worry about the compatibility.

The babel will convert our scripts with trailing commas to support the IE.

Example: It will remove the commas while building the package.

Left side: Our ECMAScript code

Right side: Equivalent Code generated by babel

literals6.PNG

makes version-control diffs cleaner and editing code might be less troublesome

Let’s talk about the main advantage, the Version control support.

Check out the below sample, I’m trying to add an entry to list to two arrays.

One has trailing commas and other not. When we are adding an entry to an array which has trailing comma, the GIT diff looks clean. That’s the main advantage of this whole concept.

When we are having a trailing comma, it only shows the addition of entry.

gitliteral

 

And again, its based every individual to decide whether they want to use this concept or not.

Cheers,

Happy Coding!