ES6 String Interpolation in Aurelia

Question

I am trying to follow the "Getting Started" section on aurelia.io and having some problem with string interpolation inside a string.

In the viewmodel in the first example, the 'fullName' calculated getter returns a string

return '${this.firstName} ${this.lastName}'

This value is used in the view (html template) as ${fullName}.

The problem is instead of showing the calculated full name, the actual return string is shown. I have tried with both Chrome and Firefox and both are not showing the correct value.

Same problem exists with the welcome() function since it also returns a string value.

I noticed in the Aurelia Visual Studio sample, the return values were changed to the actual calculated string.

return this.firstName + " " + this.lastName;

What am I doing wrong?

Answer 1

Your answer is correct. This is actually a feature of ECMAScript 6, not Aurelia specifically. In ES6, the ` character, not the ' character, delimits templated strings.

Regarding the Visual Studio sample, this is just another style of outputting the same result. This style, however, is valid in ECMAScript 5/JavaScript. You could also write the following, as they are all equivalent:

return [this.firstName, this.lastName].join(' ');

Answer 2

My novice mistake. I used a single quote rather than a back stroke for the string interpolation string.

So the proper way is

return `${this.firstName} ${this.lastName}`

Sorry about that.