1. Introdução
Em JavaScript, a classe URL() facilita a criação e manipulação de URLs. Ela permite que você construa uma URL a partir de uma base, adicione caminhos e insira parâmetros (query strings) de forma prática e segura.
2. Criando a URL
Para iniciar, você precisa definir a URL base e o caminho específico da aplicação. No nosso exemplo:
URL Base: https://reservas.diariabrasil.com.br
Caminho: /payment/120
Utilizamos o construtor new URL() passando o caminho e a URL base. Isso garante que o caminho seja interpretado corretamente em relação à base.
const baseURL = 'https://reservas.diariabrasil.com.br';
const path = '/payment/120';
const url = new URL(path, baseURL);
3. Adicionando Parâmetros (Query Strings)
Depois de criar a URL base, podemos adicionar os parâmetros necessários usando a propriedade searchParams do objeto URL. Essa propriedade oferece métodos como: append(name, value): Adiciona um novo parâmetro, mantendo os já existentes. set(name, value): Define ou substitui o valor do parâmetro.
No nosso caso, precisamos dos parâmetros:
checkin com valor 2025-02-24
checkout com valor 2025-02-28
adults com valor 2
Veja como fazer:
url.searchParams.append('checkin', '2025-02-24'); url.searchParams.append('checkout', '2025-02-28'); url.searchParams.append('adults', '2');4. Exemplo Completo
Juntando tudo, o código final para montar a URL fica assim:
// Define a URL base e o caminho específico const baseURL = 'https://reservas.diariabrasil.com.br'; const path = '/payment/120'; const url = new URL(path, baseURL);
// Adiciona os parâmetros da query string url.searchParams.append('checkin', '2025-02-24'); url.searchParams.append('checkout', '2025-02-28'); url.searchParams.append('adults', '2');
// Imprime a URL completa console.log(url.toString());
// Saída: "https://reservas.diariabrasil.com.br/payment/120?checkin=2025-02-24&checkout=2025-02
Explicação:
new URL(path, baseURL): Cria um novo objeto URL com o caminho /payment/120 relativo à URL base.
searchParams.append(): Adiciona cada um dos parâmetros necessários à URL.
url.toString(): Converte o objeto URL em uma string que representa a URL completa, exatamente como o exemplo fornecido.
5. Conclusão
Utilizando a classe URL() e a propriedade searchParams, você pode montar URLs de maneira clara e organizada, o que é especialmente útil quando sua aplicação precisa lidar com múltiplos parâmetros dinâmicos. Essa abordagem evita erros comuns de concatenação de strings e facilita a manutenção do código.
Com esse tutorial, você agora tem as ferramentas básicas para criar e manipular URLs em JavaScript de forma eficiente. Se tiver dúvidas ou precisar manipular URLs de maneira mais complexa, explore a documentação oficial do MDN sobre URL para mais detalhes.