What is the `$` 's meaning in this code?

Question

Here is partly code,I got confused about the $ 's meaning.

function playSound(e) {
     const audio = document.querySelector('audio[data-key="${e.keyCode}"]');
     const key = document.querySelector('.key[data-key="${e.keyCode}"]');
     ...
}

I know the first code will return the first element <audio> which has data-key="..." .But I don't understand the $ 's function and how to find it.So is there a document to explain it or anything else can help me understand it?

Answer 1

I can assume you are taking the Javascript30 challenge. As this code is from the first level there.

Here ${} is a special ES6 string interpolation. To use this you have to use backticks. ( Here $ does NOT mean jQuery. )

For example : The same thing above can be written as :

const key = document.querySelector('.key[data-key="' + e.keyCode + '"]');

Hence, instead of using the + sign for the variables, it is much easier and better to use the ${} for the string interpolation for the variables. Makes the code much easier to understand. Please note that you need to use backticks to let the interpolation work.