Template Literals

The Template Literal is a way of applying a "short-hand" to your code. I was going to say "simplify" but if you don't know what it means it hardly simplifies things!

When you come across a Template Literal in someone elses code it is easy not to see the grave quote symbol [the backtick symbol] (see the example I show below). The MDN website explains this is far more detail than I do here, but I started this page as I thought it was pretty neat.

The addition of the $ (place holder) is as I say an addition to what a Template Literal is. The Template Literal is just a way of of embedding a string within your code.

I came across this when looking at Event Bubbling and Capture.

`Capturing: ${elem.tagName}`

The ${ } is a placeholder within the template.

The code in the bubbling and capturing:

<script>
for(let elem of document.querySelectorAll('*')) 
 {
  elem.addEventListener("click", 
  e => alert(`Capturing: ${elem.tagName}`), true);
  elem.addEventListener("click", 
  e => alert(`Bubbling: ${elem.tagName}`));
 }
</script>

What MDN say:

The placeholder: