Backquote notation in the code

JavaScript
1

Hello I’m workng on the Drum Machine and I’m trying to do it with pure JS

and look throught one code I met such example

here is only part of code

<div data-key="65" class="key">
            <kbd>A</kbd>
            <span class="sound">clap</span>
        </div>
        <div data-key="83" class="key">
            <kbd>S</kbd>
            <span class="sound">hihat</span>
        </div>

    <audio data-key="65" src="sounds/clap.wav"></audio>
    <audio data-key="83" src="sounds/hihat.wav"></audio>

   <script>
        window.addEventListener('keydown', function(e) {
            console.log(e);
           const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
            console.log(audio);
        });
    </script>

question is about this part of code “${e.keyCode}”

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

It’s look like $ jQuery but it’s pure JS or I someting missed??
Where I can read documentation about this notaion?
And what mean backquote in this code because such notation working with only it ``?

2

Plain old vanilla JavaScript

It is called a Template Literal.

That is what is referred to as a backtick ` and is used to define the string boundaries of a template literal.

It is a cleaner way of writing:

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