Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] A concatenação do JS pode dar problema no HTML?

Na aula foi falado que existe a possibilidade do HTML não entender direito uma template string. Mas se eu usasse a concatenação, continua existindo a possibilidade de dar problema ou o HTML entenderia tranquilamente?

exibirTextoNaTela('p', 'Você descobriu o número secreto com ' + tentativas + ' ' + palavraTentativa + '!');
1 resposta
solução!

Não sei o que a função exibirTextoNaTela faz, nem como os argumentos são aplicados no HTML, mas, a meu ver, não há problema algum. Até porque a sua string não é uma template string.

Exemplo do uso de template string:

`Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`

Nesse caso, se essa string for enviada diretamente para o HTML, ele pode não assimilar a referenciação dos cifrões e chaves ao redor das variáveis interpoladas e tratar eles todos como texto, para evitar isso, normalmente se faz a concatenação tradicional, como você fez. Uma alternativa é fazer o processo de armazenar uma string de formato template string em uma variável para que então se lance essa variável no HTML. Assim, por exemplo:

var texto = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
exibirTextoNaTela('p', texto);

Ainda assim, entendo que podem, sim, surgir outras confusões envolvendo valores entre o HTML e JS, já que o JS é uma linguagem de tipagem fraca.

Em relação ao HTML, creio que o maior problema é o envio de textos (nesse caso, strings) do JavaScript para o documento HTML é a possibilidade de confusão entre texto e HTML.

Vou tentar dar um exemplo fácil. Supondo o seguinte ambiente em JavaScript:

function Funcao() {
    var teste = document.getElementById('teste')
    teste.innerHTML = "Eu gosto de jogar boliche :D";
}

Resultado (obviamente):

Eu gosto de jogar boliche :D

Quando a função é chamada, o conteúdo do elemento de id "teste" vai mudar, e é aparentemente somente texto. Mas não se engane, o que mudou foi o HTML contido no elemento, o texto só foi consequência da mudança, já que o próprio HTML se baseia em texto por natureza.

Perceba a inserção de tags no texto:

function Funcao() {
    var teste = document.getElementById('teste')
    teste.innerHTML = "<b>Eu gosto de jogar boliche :D<b>";
}

Resultado:

Eu gosto de jogar boliche :D

Isso acontece porque o HTML tem caracteres, símbolos e expressões reservadas para a marcação de tags de elementos dentro da sua própria estrutura. Para o sistema tratar a expressão da função como texto e preservar as tags, eu posso usar a propriedade innerText ao invés de innerHTML.

function Funcao() {
    var teste = document.getElementById('teste')
    teste.innerText = "<b>Eu gosto de jogar boliche :D<b>";
}

Já a concatenação, mais ligada ao JavaScript, pode se tornar problemática ao ter interpolação de string com valores numéricos. Vou dar um exemplo breve.

function funcao() {
    var a = 1;
    var b = 2;
    return "1 + 2 = " + a + b;
}

Peça para o JavaScript lançar o valor dessa função no console e veja o resultado para entender o quão irritante pode ser trabalhar com JS.

Espero que eu tenha ajudado de alguma forma :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software