placeholder não funciona no vscode

[joao.oferraz]

Estou preso na aula 10 do curso "JavaScript" do professor Guanabara, onde ele faz o uso de ${ } (placeholder) numa função. Mas, na minha tela não funcionou.

function somar() {

        var tn1 = window.document.getElementById('txtn1')

        var tn2 = window.document.querySelector('input#txtn2')

        var res = window.document.getElementById('res')

        var n1 = Number(tn1.value)

        var n2 = Number(tn2.value)

        var s = n1 + n2

        res.innerText = 'A soma entre ${n1} e ${n2} é igual ${s}'

Depois de muitas pesquisas encontrei pessoas com a mesma duvida, porém, nenhuma resposta que nos ajudasse a resolver esse problema.

Foi quando decidi quebrar a cabeça e encontrar o erro eu mesmo. 

Finalmente encontrei o erro e para minha surpresa era muito simples...

 

Eu estava usando aspas ( 'xxxx' ) ao invés do acento ( `xxxx` )

function somar() {

        var tn1 = window.document.getElementById('txtn1')

        var tn2 = window.document.querySelector('input#txtn2')

        var res = window.document.getElementById('res')

        var n1 = Number(tn1.value)

        var n2 = Number(tn2.value)

        var s = n1 + n2

        res.innerText = `A soma entre ${n1} e ${n2} é igual ${s}`

 

Ao que parece o "placeholder" só funciona entre acentos, e nao entre aspas.

Espero ter ajudado alguém que tenha caído no mesmo erro.

[denisbr]

Nesse exemplo, está sendo utilizado o Template String do javascript (https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Template_literals)

Para funcionar no primeiro exemplo teria que modificar para:
 

res.innerText = 'A soma entre ' + n1 + ' e ' + n2 + ' é igual ' + s

Mas não fica tão elegante como a solução que você mesmo apresentou.