Artigo original: JavaScript String Format – How to use String Interpolation in JS

A inclusão das template literals na ECMAScript 6 (ES6) nos permite interpolar strings em JavaScript.

Dito de um modo mais simples, podemos usar placeholders para injetar variáveis em uma string. Você pode ver um exemplo de interpolação de strings usando template literals no trecho abaixo:

const idade = 4.5;
const idadeTerrestre = `Estima-se que a Terra tenha ${idade} bilhões de anos.`;

console.log(idadeTerrestre);

Para começar, você verá que estamos usando backticks (sinal de crase) para as template literals. Além disso, também temos o formato ${placeholder}, que nos permite inserir um valor dinâmico à string. Tudo o que estiver dentro de ${} é avaliado como código em JavaScript.

Por exemplo, poderíamos escrever Estima-se que a Terra tenha ${idade + 10} bilhões de anos., e seria como se tivéssemos escrito const idade = 4.5 + 10;.

Como fazíamos isso antes?

Antes das template literals, teríamos algo assim:

const idadeTerrestre = "Estima-se que a Terra tenha " + idade + " bilhões de anos.";

Como você pode ver, já temos muitas aspas para uma string simples. Imagine que temos que inserir algumas variáveis, não apenas uma. Isso pode se transformar rapidamente em uma string complexa e não muito legível. Assim, as template literals tornam as strings mais limpas e legíveis.

No entanto, esse é apenas um caso. Vamos ver mais casos de uso para as template literals.

Strings de várias linhas

Outra utilidade das strings com template literals é quando temos strings de várias linhas. Antes das template literals , usávamos \n para a nova linha, por exemplo: console.log('linha 1\n' + 'linha 2').

Para duas linhas, tudo bem. Imagine, no entanto, se quiséssemos cinco linhas. Novamente, a string ficaria com uma complexidade desnecessária.

const idadeTerrestre = `Estima-se que a Terra tenha ${idade} bilhões de anos.

Os cientistas vasculharam todo o planeta procurando pelas rochas mais antigas para fazer a datação por radiometria.

No noroeste do Canadá, eles encontraram rochas de cerca de 4,03 bilhões de anos.
`;

O trecho acima demonstra mais uma vez como escrever strings de várias linhas fica mais fácil e limpo com as template literals.

Como exercício, tente converter a string acima usando concatenação e o recurso para a nova linha, \n.

Expressões

Com as template literals, podemos usar expressões nas strings. O que isso significa?

Por exemplo, podemos usar expressões matemáticas, como multiplicar dois números. O trecho abaixo é uma ilustração disso:

const primeiroNumero = 10;
const segundoNumero = 39;
const resultado = `O resultado da multiplicação de ${primeiroNumero} por ${segundoNumero} é ${primeiroNumero * segundoNumero}.`;

console.log(resultado);

Sem as template literals, teríamos algo assim:

const resultado = "O resultado da multiplicação de " + primeiroNumero + " por " + segundoNumero + " é " + primeiroNumero * segundoNumero + ".";

Escrever strings da maneira como acabamos de fazer pode se tornar complexo e confuso rapidamente. Como vemos, as template literals facilitam e tornam mais elegante a inclusão de expressões em uma string.

Operador ternário

Com a interpolação de strings, podemos até mesmo usar um operador ternário dentro de uma string. Isso nos permite conferir o valor de uma variável e exibir coisas diferentes, dependendo daquele valor.

Vejamos o exemplo abaixo:

const bebidas = 4.99;
const refeicao = 6.65;
const total = bebidas + refeicao;

const resultado = `O valor da conta é de ${total}. ${total > 10 ? `Seu pagamento com o cartão não será aceito.` : `Seu pagamento com o cartão será aceito.`}.`

console.log(resultado);

No exemplo acima, conferimos se o valor total é superior a dez, por exemplo.

Se for maior do que dez, avisamos ao usuário que o pagamento por cartão não será aceito. Caso contrário, o pagamento será aceito, sem problemas. Como você pode ver, a interpolação de strings nos permite fazer coisas interessantes com strings.

Conclusão

A inclusão das template literals na ES6 nos permite escrever strings melhores, mais curtas e mais claras. Elas também nos permitem injetar variáveis e expressões em qualquer string. Essencialmente, sempre que escrevermos dentro de chaves (${}) o conteúdo será tratado como JavaScript.

Assim, podemos usar as template literals para:

• escrever strings de diversas linhas
• incluir expressões
• escrever strings com o operador ternário

Obrigado pela leitura! Se quiser entrar em contato com o autor, é possível fazer isso pelo Twitter. O autor também publica artigos com frequência em seu blog, catalins.tech (em inglês), caso você queira ler sobre outros conteúdos escritos por ele.