ES6 - A beginners guide - Template Literals
Stefan Wright
Posted on September 1, 2021
Welcome back! This time I will be covering Template Literals (or Template Strings as some people call them). Primarily, Template Literals are just "syntactic sugar" in the sense that the substitutions it makes make the code much more readable and it can remove the requirement for more variables in your code. Let's look at some examples...
The ES5 way
var person = {name: "Stefan Wright", age: 33};
var retString = "My name is: " + person.name + ", and I am " + person.age + " years old.";
console.log(retString);
// Returns: My name is: Stefan Wright, and I am 33 years old
Above is a really simple example, we only have 2 variables to concatenate into our string and we're only using double quotes. It's not actually too hard to read as ES5. Let's try a harder variation, this time let's imagine we want to create a JSON string:
var device = {device_id:1, guid: "00000000-0000-0000-0000-000000000000", owner: "Stefan", name: "Samsung S20 Plus 5G"};
var todaysDate = "01/01/01";
var retString = '{"device_id":"' + device.device_id + '","device_guid":"' + device.guid + '","device_name":"' + device.name + '", "device_owner":"' + device.owner + '","device_loanDate":"' + todaysDate + '"}';
console.log(retString);
// Returns: "{\"device_id\":\"1\",\"device_guid\":\"00000000-0000-0000-0000-000000000000\",\"device_name\":\"Samsung S20 Plus 5G\", \"device_owner\":\"Stefan\",\"device_loanDate\":\"01/01/01\"}")
Wow! isn't that horrible! Such a mix of quotation marks, singles, doubles, did we miss any? (well, in my example we didn't but it took a long time to write!). This way of working is susceptible to syntax errors and it will take a long time to debug.
The ES6 way of working
Let's tidy this up a bit, bring in ES6 and the first example:
const person = {name: "Stefan Wright", age: 33};
const retString = `My name is: ${person.name}, and I am ${person.age} years old.`;
console.log(retString);
// Returns: My name is: Stefan Wright, and I am 33 years old
Above you can see that we have removed the + symbols for concatenation, we've changes the double quotes for back-ticks and our variables are now wrapped with ${}. Let's have a look at the really long and horrible looking second example from above:
const device = {device_id:1, guid: "00000000-0000-0000-0000-000000000000", owner: "Stefan", name: "Samsung S20 Plus 5G"};
const todaysDate = "01/01/01";
const retString = `{"device_id":"${device.device_id }","device_guid":"${device.guid}","device_name":"${device.name}", "device_owner":"${device.owner}","device_loanDate":"${todaysDate}"}`;
console.log(retString);
// Returns: {"device_id":"1","device_guid":"00000000-0000-0000-0000-000000000000","device_name":"Samsung S20 Plus 5G", "device_owner":"Stefan","device_loanDate":"01/01/01"}
So we've reduced the ES5 version down from 190 down to 166 characters, whilst making the whole string more readable and syntax highlighting in the IDE aids in making it even easier to read. You'll also notice that the output no longer returns escaped quotations which saves on further possible processing.
Extra
When using Template Literals, it is also possible to perform simple function evaluations such as adding two numbers together:
const device = {device_id:1, guid: "00000000-0000-0000-0000-000000000000", owner: "Stefan", name: "Samsung S20 Plus 5G"};
const todaysDate = "01/01/01";
const retString = `{"device_id":"${device.device_id + 10}","device_guid":"${device.guid}","device_name":"${device.name}", "device_owner":"${device.owner}","device_loanDate":"${todaysDate}"}`;
console.log(retString);
// Returns: {"device_id":"11","device_guid":"00000000-0000-0000-0000-000000000000","device_name":"Samsung S20 Plus 5G", "device_owner":"Stefan","device_loanDate":"01/01/01"}
We could also call another function to be evaluated whilst building the Template Literals such as below where I call a function to add 21 days to the provided date:
const addDays = (date, days) => {
var result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}
const device = {device_id:1, guid: "00000000-0000-0000-0000-000000000000", owner: "Stefan", name: "Samsung S20 Plus 5G"};
const todaysDate = new Date("01/01/01");
const retString = `{"device_id":"${device.device_id}","device_guid":"${device.guid}","device_name":"${device.name}", "device_owner":"${device.owner}","device_loanDate":"${todaysDate}","device_returnDate":"${addDays(todaysDate, 21)}"}`;
console.log(retString);
// Returns: {"device_id":"11","device_guid":"00000000-0000-0000-0000-000000000000","device_name":"Samsung S20 Plus 5G", "device_owner":"Stefan","device_loanDate":"Mon Jan 01 2001 00:00:00 GMT+0000 (Greenwich Mean Time)","device_returnDate":"Mon Jan 21 2001 00:00:00 GMT+0000 (Greenwich Mean Time)"}
Posted on September 1, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
