Why use back tick with ${ in const in typescript

Question

I am going through the angular turorial and I see the below

const url = `${this.heroesUrl}/${hero.id}`;

Can someone explain why I need to use ` before ${ ? Since this is typescript and similar to javascript can I not use

 this.heroesUrl + "/" + hero.id

Why do I need to use back tick and the ${ operation?

Those are called template literals. You don't have to use them, you can definitely use the latter option, but isn't the first option much simpler? — Saravana

Nitzan Tomer Nitzan Tomer · Accepted Answer · 2017-07-03T13:24:19

That is called Template literals and it's a javascript feature, it is not typescript specific.

True, you can indeed replace this:

const url = `${this.heroesUrl}/${hero.id}`;

With:

const url = this.heroesUrl + "/" + hero.id;

But it is sometimes more comfortable to use the template literals, especially when the string is made out of a lot of parts. i.e.:

const url1 = protocol + "://" + host + ":" + port + "/" + path + "." + extension;
const url2 = `${protocol}://${host}:${port}/${path}.${extension}`;