Use of backtick in ember computed properties

Question

The guides show a computed property written with backticks. I am not sure if they are necessary.

Could this:

fullName: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
})

Be rewritten as this:

fullName: Ember.computed('firstName', 'lastName', function() {
    return this.get('firstName') + ' ' + this.get('lastName');
})

?

For me, that's less obscure. What are the plus / cons of each method?

Answer 1

The back ticks have nothing to do with Ember. They are part of ES6 called template strings. They simply make it easier for string interpolation. You can have any valid js statement in the curly braces and they get evaluated. They also allow multi line strings.

One major point that I am aware of is that template strings get evaluated immediately. So cannot be reused by assigning it to a variable. The variable will only get the evaluated result.

Here is more info about them in MDN.

Answer 2

They are basically the same. In fact, for now, the backtick syntax, or es6 template strings is being transpiled back into the second version in final code.

Some could argue the first form is more logical and, when using simpler variable names, more readable. It also allows code-scanning i18n libs, such as gettext-based ones, to find them easily. I doubt they can make anything useful of that until the backtick syntax is widely supported by browsers though. It's coming. Chrome, Firefox, Safari, Edge support it.

In the end use them if you like, don't if you don't like them. Does not matter.

(formal definition in specs)