Como usar template string em JavaScript

Neste artigo vamos aprender a como utilizar template string em JavaScript, para inserir valores de variáveis em meio a um texto

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre strings e variáveis interpoladas nos textos!

Primeiramente é bom deixar claro que a template string é um recurso do ES6, uma versão que não é muito nova do JS, porém ainda não é padronizada em todos os navegadores

Ou seja, não podemos utilizar livremente o seguinte código:

var nome = "Matheus";
var idade = 29;

console.log(`Meu nome é ${nome} e tenho ${idade} anos.`);

Isso por que em navegadores desatualizados ou que não se adequaram o código irá falhar

Você pode utilizar o Babel para compilar o JavaScript para uma versão padronizada de JS

Ou também utilizar uma técnica mais convencional, que é a concatenação de strings

Veja um exemplo prático:

var nome = "Matheus";
var idade = 29;

console.log("Meu nome é " + nome + " e tenho " + idade + " anos");

Desta forma, você pode utilizar livremente em qualquer navegador que vai funcionar e atinge o mesmo propósito das template strings

Porém com uma sintaxe um pouco mais suja

Há implementações que podem ser feitas para remediar esta função do ES6 em JavaScript puro, conhecida como supplant

A fonte utilizada é deste link, veja o exemplo:

if (typeof String.prototype.supplant !== 'function') {
    String.prototype.supplant = function (o) {
        console.log(o);
        return this.replace(/{([^{}]*)}/g, function (a, b) {
            var r = o[b];
            console.log(a, ' - ', b, ' - ', r);
            return typeof r === 'string' ? r : a;
        });
    };
}

window.onload = function(){
    var html = '<div>{title}<h3>{time}</h3><p>{content}</p></div>',
        obj = {
            title: "my title", 
            time: "12h00m", 
            content:"blablabla"
        },
        supplanted = html.supplant(obj);
    
    document.body.innerHTML = supplanted;
};

Este exemplo faz com que um objeto seja inserido em uma string, graças a função supplant que simula as query strings de JavaScript ES6

Conclusão

Neste artigo aprendemos a como utilizar template string em JavaScript

A versão mais nova do recurso só está disponível em navegadores que já estão adaptados a versão ES6

Já a boa e velha concatenação pode ser utilizada de forma simples, em qualquer navegador e também resolve o problema

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube