Angular 2 - Syntax: Use of $ and { }

Question

I'm completely new to Angular and TypeScript and doing a tutorial (tour of heroes).

There the following line occurs:

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

It makes a string (?) from

private heroesUrl = 'api/heroes';

and the id:number which is passed as an argument to the function.

I get what happens here, but I don't get the syntax. Why do I use the $ and why the brackets?

I would have expected something like this:

const url = heroesUrl + id.toString();

Or if you’re asking why that specific syntax as opposed to some other escape characters, that’s not really a question for SO. — jonrsharpe, Oct 04 '17 at 07:01

score 1 · Answer 1 · answered Oct 04 '17 at 07:46

Template strings in JavaScript are denoted with ticks, rather than quotes.

For example:

const variables = 'EXAMPLE';

let normal = 'A normal string allows no ${variables} ' +
    'and cannot cross lines, without the concatenation trick shown here.';

let template = `A template string does allow ${variables} 
and line breaks too.`;

In the template literal, the token ${variables} will be replaced with the value EXAMPLE - and the line break is also allowed.

Angular 2 - Syntax: Use of $ and { }

1 Answers1