Javascript: Tagged templates Literals

Fala dev, tudo bem?

O JavaScript é uma linguagem de programação extremamente popular e flexível que tem trazido muitas novidades durante os últimos anos, desde a sua grande mudança em 2015, que trouxe uma série de funcionalidades modernas na linguagem consolidando o que é conhecido como ES6.

Uma das novidades trazidas pelo o ES6 foi as Template Strings, que expandiu o leque de possibilidades ao se trabalhar com interpolação de de cadeia de caracteres na linguagem, as tagged templates são uma funcionalidades que veio junto das template literals e nesse post vamos falar um pouco sobre elas.

Antes de falarmos sobre o conceito, vamos recordar do que são templates strings.

Durante o processo de desenvolvimento de uma funcionalidade para a sua aplicação é bem comum a necessidade de se manipular cadeias de caracteres, é bem trivial a necessidade de concatenar uma cadeia de caracteres com algum dado armazenado em uma variável por exemplo, para fazer isso no Javascript é bem simples:

const bmi = 24;

const bmiMessage = "Your BMI is" + bmi

Concatenar uma cadeia de caracteres é uma tarefa bem comum e que realizamos muitas vezes ao escrever um código em qualquer linguagem, a maioria das linguagem a tempos atrás, quiçá até hoje, possuem uma característica ao fazer a concatenação de strings, que é quando precisamos concatenar dados em uma cadeia de caracteres significativamente grande:

const weight = 77;
const height = 1.75; 
const bmi = weight / (height * height);

const bmiMessage = "Your weight is: " + weight + ", your height is: " 
        + height + " and your BMI is " + bmi;

Perceba que a legibilidade tende a ficar comprometida mesmo se quebrarmos a cadeia de caracteres atribuída á variável bmiMessage em mais de uma linha, foi pra resolver problemas como esse que as Template Strings foi criada no Javascript, olha só a diferença:

const weight = 77;
const height = 1.75; 
const bmi = weight / (height * height);

const bmiMessage = `Your weight is: ${weight}, your height is: ${height} 
                    and your BMI is: ${bmi}`;

Com as Template Strings, não precisamos nos preocupar com a ordem de abertura e fechamento das aspas nem com o sinal de + para que a concatenação funcione corretamente, além da melhoria na legibilidade do seu código e flexibilidade para trabalhar com uma string com múltiplas linhas sem deixar seu código uma bagunça.

Uma peculiaridade das template strings é que elas são representadas pelo acento agudo invertido ao invés de usar aspas, e a interpolação é representada pelo ${} entre a abertura e fechamento da string.

Mas e as Tagged Template Literals?

Agora que você já conhece o que são as templates strings vamos entender o que são as tagged template literals, que nada mais são do que uma funcionalidade que vem junto com as template strings que nos dá ainda mais flexibilidade para manipular os dados que são interpolados na cadeia de caracteres.

A palavra tagged denota a chamada à uma função que recebe como parâmetro os argumentos de uma template literal, ao fazer a interpolação em uma sentença a cadeia de caracteres é quebrada na posição da interpolação e assim cria-se uma lista, vamos ver um exemplo:

const weight = 77;
const height = 1.75; 
const bmi = weight / (height * height);

const bmiMessage = `Your weight is: ${weight}, your height is: ${height} 
                    and your BMI is: ${bmi}`;


function customMessage(arguments, ...words){
  return `${arguments[0]}${words[0].toLowerCase()}`;
}

const newMessage = customMessage`Hello Dan, ${bmiMessage}`

console.log(newMessage)
// Hello, your weight is: 77, your height is: 1.75 
// and your bmi is: 25.142857142857142

A função customMessage recebe dois argumentos:

• arguments: Este primeiro armazena [“Hello Dan, “, “”] que é o array contendo as sentenças antes e depois da string interpolada, nesse caso bmiMessage
• words: Este último armazena todos os valores interpolados, aqui usamos o rest operator do Javascript para condensar todos os valores em unico argumento.

Perceba que estamos chamando a função passando uma template literals como parâmetro em:

const newMessage = customMessage`Hello Dan, ${bmiMessage}`

É muito semelhante à forma de chamar uma função tradicionalmente no Javascript, a diferença é que não precisamos colocar os parênteses pois a função é capaz de acessar a template literal como parâmetro.

Esta funcionalidade é bem útil e versátil, a sutileza na sua declaração nos permite criar um código mais enxuto e limpo quando precisarmos realizar operações de transformações em uma cadeia de caracteres, além de melhorar a legibilidade do seu código ao trabalhar com cadeias de caracteres mais complexas.

Conclusão

O ECMAScript 6 trouxe recursos poderosos para trabalhar com strings no JavaScript ao incluir as template literals, melhorou a legibilidade, e expandiu as possibilidades, e hoje é usada por diversas outras ferramentas como Styled Components para declarar estilos em cascata usando CSS-in-JS, no GraphQL para a declaração de queries e mutations, até mesmo em conjunto com o JSX.

Template Literals é suportada por todos os browsers, além de possuir suporto nos ambientes NodeJS e Deno também, ou seja, você tem todos os motivos para começar usar nos seus códigos e desfrutar da versatilidade e flexibilidade dessa característica introduzida pela linguagem para tornar a manipulação de strings menos poluente no seu código.

E aí, o que achou desse conteúdo? Compartilhe sua opinião nos comentários!

Curta o post para que ele possa alcançar mais devs!

Fica a dica de para sua próxima leitura, confira também:

— Entenda o que é desestruturação no JavaScript de uma vez por todas!

— O caminho até a primeira oportunidade como desenvolvedor

Até logo, Dev!!