The Handsome Template Literals

Published on 03 Mar, 2019 · 2 minutes read

Michele Riva

The Handsome Template Literals

What if we need to concatenate some strings?
ES5 forces us to approach the problem in the following way:

var name = "John";
var age  = 24;

var result = "I am " + name + " and I am " + age " years old";

Such an ugly way to concatenate strings!
Thankfully, with ES6 JavaScript introduces Template Literals, which will help us to concatenate strings as follows:

const name = "John";
const age  = 24;

var result = `I am ${name} and I am ${age} years old`;

The greatest part of template literals, is that you can write any kind of JavaScript expression inside a string.
Let me explain that with the following code:

const base   = 20;
const height = 50;

const result = `Triangle area is ${(base * height) / 2}`;

We just made some math inside a string!

Why should we care about writing some expressions inside a string?

Because sometimes it can make things easier. We can call functions, doing maths and other kind of stuff without writing extra boilerplate code.
We could call (as an example) a method which will calculate a triangle area:

const area = (base, height) => (height * base) / 2;

const result = `Triangle area is ${area(20, 50)}`;

Or we can conditionally write parts of a string:

const age = 24;

const result = `You ${age >= 18 ? "can" : "can't"} drive a car in Europe`;

And please note another great thing: in the above example, we were able to use both double and single quotes characters without escaping them!

Multiline strings with ease

Another great thing about template literals, is that we are able to write multiline strings inside of them:

const multiline = `I am a multiline string!
Try to do the same with ES6 if you can!

Of course you can, but it will be harder`;

You will also be able to format your text as you prefer, try to run the following code in a browser:

const multiline = `Try to do this in


It will be harder than you think!`;


Try to do this in


It will be harder than you think!

Wow! It will respect our indentation!

Tagged templates

A tagged template is a function which uses template literals to get its arguments:

function introduce(arr, name, age) {
  return arr[0] + name + arr[1] + age + arr[2];

const myName = "John";
const myAge  = 24;
const result = introduce`Hi! I am ${myName} and I am ${myAge} years old!`;

What? Did we call a function without brackets?
Yeah we did! But that’s a silly example, let’s write down a function which is actually useful:

function format(arr, username, password) {
  const censoredUsername = `****${username.substr(4)}`;
  const censoredPassword = password.split('').map(ch => '*').join('');

  return arr[0]
       + censoredUsername
       + arr[1]
       + censoredPassword

const usr = "iamadmin";
const psw = "iamapassword";

const censored = format`Your username is ${usr}, and your password is ${psw}`;


// => "Your username is ****dmin, and your password is ************"