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 ($).

laughing 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}`
}

laughing 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.

laughing 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

Comentários

Compartilhe:

Área do Usuário

Doações

Por favor, ajude o nosso site a se manter online :)

 Obrigado!
Angelo Luis Ferreira
angelo.alf@gmail.com

Produzido por:

Topo