Beginner looking for javascript syntax help

[ShawnQuixote]

Taking a pluralsight course and the course includes some syntax that is not explained well.

this.ratingClicked.emit(`The rating ${this.rating} was clicked`);

the ${this.rating} syntax is confusing to me and I cannot find any documentation in the big bad javascript world to explain what this is doing.

I know simplistically what it's doing but I'm looking to some sort or reference material that explains the general syntax associated with ${....} embedded within backtics.

Thanks,

Shawn

[robzilla]

You're probably looking at a snippet of AngularJS and TypeScript code; it's not "vanilla" (plain) Javascript. But you're probably aware of that, seeing as you're following a tutorial.

This might help: [basarat.gitbooks.io...]

[ShawnQuixote]

Exactly what I was looking for. Thanks!

If I'd known to search for "templating" I would have found it instantly. But searches for "${}" and variants resulted in garbage results. Very frustrating.

Thanks again.

[Fotiman]

Actually, that *is* vanilla JavaScript. It's new in ES6 (aka ES2015). You can read more about Template literals here:
[developer.mozilla.org...]

[Fotiman]

If you already have Pluralsight, one of the courses "Rapid ES6 Training" includes a section on Template Literals. :)

[ShawnQuixote]

Ah - good advice - that one's next!

[NickMNS]

As robzilla mentioned above you code snippet is not plain vanilla js.

But this is how I interpret it.
"this" is a keyword in js generally used to refer to a specific instance of a class or object. It is similar to "self" in python.

So in your example "this" seems to be an object that has several methods, such as ratingClicked and rating. And ratingClicked has a method emit. The object could be repeated at several places on a page. Let assume the "this" refers to a button, and there are many buttons and each button is an instance of that specific object. Say button 1, button 2 etc...

When the user clicks on button 1 it triggers the click event that is most probably handled by ratingClicked, which in turn calls the method .emit, which prints ('the rating ${this.rating} was clicked'). The $this.rating would refer to the .rating method of button 1. probably a description of the button, "I like this". So you should see "The rating I Like This was clicked"

If you then click button 2, the $this.rating would refer to the .rating method of button 2 "I hate this", and so you see "The rating I Hate This was clicked"

Without any further details it is hard to be more specific, but I hope I was able to get the idea across.

[lucy24]

Actually, that *is* vanilla JavaScript. It's new in ES6 (aka ES2015).

The juxtaposition of "new" and "vanilla" makes me uneasy. Is there a standard place (analogous to caniuse dot com) where we can find out which browsers will know what to do with any given element?

[robzilla]

Actually, that *is* vanilla JavaScript. It's new in ES6 (aka ES2015).

Good to know!

But searches for "${}" and variants resulted in garbage results. Very frustrating.

Try using the character names next time, i.e. "dollar sign" and "curly braces".

Is there a standard place (analogous to caniuse dot com) where we can find out which browsers will know what to do with any given element?

This one seems authoritative enough: [kangax.github.io...]

[Fotiman]

@lucy24, the pages on MDN usually contain a small Browser compatibility table for each feature. For example, Template Literals won't work in any version of IE, but they do work in Edge. Also, I've seen a page on caniuse.com before that contained a breakdown of ES6 features in a large browser compatibility table... can't seem to locate it now though.

[Fotiman]

Just clicked on the link that robzilla shared above, and I believe that it the link that caniuse links to (the one I was referring to).