Olá pessoal! Hoje, estou compartilhando uma dica rápida que melhorou significativamente a semântica do meu código.

Muitas vezes, seja trabalhando em desenvolvimento frontend ou backend, precisamos construir URLs com parâmetros, certo?

Eu costumava escrever os URLs das minhas solicitações assim:

const url = `http://localhost:3000/endpoint/param1=${var1}&param2=${var2}&param3=${var3}`

Concordamos que este URL é difícil de ler e manter; sempre precisamos identificar quais partes são parâmetros, quais são variáveis ​​e quais são apenas sintaxe Javascript.

Para resolver esse problema semântico, descobri o Construtor de URL, que realiza a mesma tarefa, mas de maneira mais eficiente e elegante.

Agora, podemos reescrever o mesmo código assim:

const url = new URL('http://localhost:3000/endpoint')

url.searchParams.set('param1', var1)
url.searchParams.set('param2', var2)
url.searchParams.set('param3', var3)

O código indica claramente o que está fazendo. Na primeira linha criamos a URL base e nas linhas subsequentes adicionamos os parâmetros de pesquisa necessários.

Feito. Agora, a variável url contém os mesmos parâmetros de pesquisa de antes, mas agora estamos usando a classe URL, tornando o código muito mais simples e fácil de manter.

E você? Você já usou a classe URL antes? Talvez para outro propósito? Sinta-se à vontade para compartilhar suas experiências comigo.