1

Estava estudando alguns plugins jquery e percebi que para criar o html, o programador escreveu cada linha em um array e ao final usou o join:

var tpl = [
		'<div class="popover clockpicker-popover">',
			'<div class="arrow"></div>',
			'<div class="popover-title">',
				'<span class="clockpicker-span-hours text-primary"></span>',
				' : ',
				'<span class="clockpicker-span-minutes"></span>',
				'<span class="clockpicker-span-am-pm"></span>',
			'</div>',
			'<div class="popover-content">',
				'<div class="clockpicker-plate">',
					'<div class="clockpicker-canvas"></div>',
					'<div class="clockpicker-dial clockpicker-hours"></div>',
					'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>',
				'</div>',
				'<span class="clockpicker-am-pm-block">',
				'</span>',
			'</div>',
		'</div>'
	].join('');

Alguém, com experiência, sabe porque escrever dessa forma, ou seja, sem usar uma string e concatenar cada linha?

var tpl = '<div class="popover clockpicker-popover">'+
			'<div class="arrow"></div>'+
			'<div class="popover-title">'+
				'<span class="clockpicker-span-hours text-primary"></span>'+
				' : '+
				'<span class="clockpicker-span-minutes"></span>'+
				'<span class="clockpicker-span-am-pm"></span>'+
			'</div>'+
			'<div class="popover-content">'+
				'<div class="clockpicker-plate">'+
					'<div class="clockpicker-canvas"></div>'+
					'<div class="clockpicker-dial clockpicker-hours"></div>'+
					'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>'+
				'</div>'+
				'<span class="clockpicker-am-pm-block">'+
				'</span>'+
			'</div>'+
		'</div>';

5
  • Defina "melhor".
    – Jéf Bueno
    Commented 20/06/2017 às 17:13
  • Template strings do ECMA6 no quesito "programar" é muito bom, porém não sei quanto ao desempenho e compatibilidade ainda não é tão amplo.
    – BrTkCa
    Commented 20/06/2017 às 17:15
  • A dúvida é quanto ao desempenho mesmo, corrigir o "melhor"
    – N. Dias
    Commented 20/06/2017 às 17:19
  • No Ecma6 tem o template string segue link: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
    – cido18
    Commented 20/06/2017 às 17:41
  • Não conhecia este template string.
    – N. Dias
    Commented 20/06/2017 às 19:54

1 Resposta 1

1

Entre usar join ou concatenação, concatenar apresenta um melhor desempenho, porém a escrita do código pode ser mais massante, principalmente ao se usar ' com " e quando há muitas linhas.

Nesse teste, localmente, a concatenção correu 12.497 vezes em 0.083 segundos contra 11.144 em 0.087 segundos com join.

Nesse outro, localmente, a concatenção correu 12.703 vezes em 0.086 segundos contra 12.875 em 0.080 segundos com Template strings.

Particularmente estou preferindo usar template string quando preciso escrever HTML no javascript. Subjetivamente ele se parece melhor e mais fácil de se ler, justamente para strings multi-linhas e string contendo ' e ". E o mais interessante sobre ele são as Tagged template, que da esse poder:

let conta = {numero: '9999-9'};   
tag `Minha conta é ${conta.numero}.`

Compatibilidade com navegadores inserir a descrição da imagem aqui

1
  • Obrigado pela resposta.
    – N. Dias
    Commented 21/06/2017 às 10:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .