Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno
- Detalhes
- Angelo Luis Ferreira
- JavaScript
- Acessos: 5778
Neste tutorial vamos mostrar como é fácil manipular strings utilizando o recurso "Template Strings". Sem este recurso, a tarefa de manipular strings com JavaScrpit não é tão fácil assim, veja por quê:
Template Strings
Template strings, ou template literals são strings que permitem expressões embutidas. Este recurso é uma das especificações do ECMAScript 2015 que facilitou a manipulação de strings principalmente nos casos de interpolação de strings e strings com múltiplas linhas.
Strings: qualquer sequência de caracteres (strings normais devem ficar entre aspas simples ou aspas duplas).
Vantagens:
- Com templates strings não precisamos ficar abrindo e fechando a instrução com aspas e o sinal de mais (+). Basta adicionar acentos graves no início e no fim da string.
- Podemos embutir os parâmetros de variável dentro chaves, sendo a de abertura precedida de um cifrão ($).
- Melhora a legibilidade do código.
Sintaxe
`corpo de texto`
`texto string ${expression} texto string`
`texto linha 1
texto linha 2`
Obs.: Templates strings devem ficar entre acentos graves.
Veja abaixo os exemplos para os casos mais comuns onde podemos utilizar templates strings:
Interpolação de Strings
Para encapsular expressões dentro de strings, você precisava utilizar a seguinte forma para a variável texto do exemplo a seguir:
Sem template strings
var nome = prompt('Qual é o nome do aluno?')
var série = prompt("Qual série?")
var texto = "O aluno "+ nome +" está na "+ série +" série."
Observe que no exemplo acima precisamos utilizar o símbolo (+) para concatenar as strings e variáveis. Agora, com template strings, você pode fazer substituições sintáticas, tornando o código mais simples e mais legível:
Com template strings
var nome = prompt('Qual é o nome do aluno?')
var série = prompt("Qual série?")
var texto = `O aluno ${nome} está na ${série} série`
Observe que usando template strings não precisamos mais utilizar o símbolo (+) para a concatenação e as variáveis podem ser inseridas dentro de chaves precedidas do símbolo ($).
Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.
Com Template Strings - uso de expressões
var a = 2;
var b = 5;
function calcular(a, b) {
return `a = ${a} e b = ${b} | a + b + 2 = ${a + b + 2} | a * b = ${a*b} | a ** b = ${a**b}`
}
Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.
Strings com múltiplas linhas
Quando temos marcações que não cabem em uma linha, precisamos usar linhas múltiplas. Veja a seguir como usar multi-linhas sem e com template strings:
Sem Template Strings
var produto = prompt('Nome do produto');
var valor = prompt('Preço');
var lista = compra(produto, valor);
function compra(produto, valor){
return "<table border='1' style='width:70%; text-align:center'>"+
"<tr>"+
"<th>Produto</th>"+
"<th>Valor da Compra</th>"+
"</tr>"+
"<tr>"+
"<td>"+produto+"</td>"+
"<td>"+valor+"</td>"+
"</tr>"+
"</table>";
}
Com Template Strings
var produto = prompt('Nome do produto');
var valor = prompt('Preço');
var lista = compra(produto, valor);
function compra(produto, valor){
return `<table border="1" style='width:70%; text-align:center'>
<tr>
<th>Produto</th>
<th>Valor da Compra</th>
</tr>
<tr>
<td>${produto}</td>
<td>${valor}</td>
</tr>
</table>`;
}
Observe que com essa modificação mantemos o código em múltiplas linhas sem a necessidade do uso de aspas e sinal de mais (+). E quando é necessário interpolar algum valor, isso pode ser feito sem problemas.
Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.
Documentação Oficial
1. [Templates Strings] » Sobre a propriedade templates strings.
O anúncio abaixo ajuda manter o Portal Visual Dicas