Visão geral

O objeto URL em JavaScript fornece uma maneira de trabalhar e manipular URLs facilmente. É particularmente útil quando você precisa construir, analisar ou modificar URLs em seu código.

Muitas vezes, strings de modelo são usadas para criar URLs em JavaScript. Muitas vezes isso é fácil e claro o suficiente, mas o objeto URL é um método OOP mais robusto para lidar com URLs.

Até o OpenWeatherMap.org usa strings de modelo em sua documentação: https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key }

Para um URL que é bastante estático, tudo bem, mas se você quiser fazer alterações neste URL, considere usar um objeto URL.

// Using template strings
const lat = 32.087;
const lon = 34.801;
const apiKey = 'your_api_key';
const url = `https://api.openweathermap.org/data/3.0/onecall?lat=${lat}&lon=${lon}&appid=${apiKey}`;

// Using the URL object
const openWeatherUrl = new URL('https://api.openweathermap.org/data/3.0/onecall');
openWeatherUrl.searchParams.set('lat', lat);
openWeatherUrl.searchParams.set('lon', lon);
openWeatherUrl.searchParams.set('appid', apiKey);

Uso Básico

Você pode criar um novo objeto URL passando uma string de URL para seu construtor.

Neste caso (ao contrário do acima), o URL inteiro é passado com várias partes:

const url = new URL('https://example.com:8080/path?query=123#section');

Propriedades

O objeto URL possui diversas propriedades que você pode usar para acessar partes da URL:

• href: o URL completo como uma string.
• protocolo: O protocolo (por exemplo, https:).
• nome do host: o nome do domínio (por exemplo, exemplo.com).
• porta: o número da porta (por exemplo, 8080).
• nome do caminho: o caminho após o domínio (por exemplo, /caminho).
• search: A string de consulta, incluindo o ? (por exemplo, ?query=123).
• hash: O identificador do fragmento, incluindo o # (por exemplo, #section).
• host: o nome do host e a porta combinados (por exemplo, example.com:8080).
• origem: a origem do URL, que é o protocolo, nome do host e porta.

> const url = new URL('https://example.com:8080/path?query=123#section');
> url.port
'8080'
> url.protocol
'https:'
> url.hostname
'example.com'
> url.pathname
'/path'
> url.search
'?query=123'
> url.hash
'#section'
> url.host
'example.com:8080'

Eles também podem ser usados ​​para alterar as diferentes partes do URL?:

> url.port = 1234
1234
> url.pathname = "differentpath"
'differentpath'
> url.hostname = "example.org"
'example.org'
> url
URL {
  href: 'https://example.org:1234/differentpath?query=123#section',
  origin: 'https://example.org:1234',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'example.org:1234',
  hostname: 'example.org',
  port: '1234',
  pathname: '/differentpath',
  search: '?query=123',
  searchParams: URLSearchParams { 'query' => '123' },
  hash: '#section'
}

Métodos

O objeto URL também possui alguns métodos para ajudar a modificar e interagir com o URL.

Por exemplo, um parâmetro de pesquisa de URL é um par de chave e valor que informa os detalhes do servidor API para atender um usuário.

url.searchParams: Retorna um objeto URLSearchParams, que fornece métodos para trabalhar com parâmetros de string de consulta. Você pode:

Obtenha um parâmetro de consulta: url.searchParams.get('query')
Defina um parâmetro de consulta: url.searchParams.set('query', '456')
Exclua um parâmetro de consulta: url.searchParams.delete('query')

Iterar sobre parâmetros de consulta:

url.searchParams.forEach((value, key) => {
  console.log(key, value);
});

toString(): Retorna o URL completo como uma string, refletindo quaisquer alterações feitas nas propriedades ou parâmetros de consulta.

Exemplo com API Open Weather Map

Aqui estão os documentos do OpenWeatherMap: https://openweathermap.org/api/one-call-3

Aqui está um exemplo simples que mostra como criar um objeto URL e manipular suas partes:

// get values to interpolate to URL
const apiKey = process.env.openWeatherApiKey || 0
const [lat, lon] = [32.08721095615897, 34.801588162316506]

const openWeatherUrl = new URL("https://api.openweathermap.org")

openWeatherUrl.pathname = "data/3.0/onecall"
openWeatherUrl.searchParams.set('lat',lat)
openWeatherUrl.searchParams.set('lon',lon)

// from the docs
openWeatherUrl.searchParams.set('exclude', 'hourly')

openWeatherUrl.searchParams.set('appid', apiKey)

console.log(openWeatherUrl)

saída:

URL {
  href: 'https://api.openweathermap.org/data/3.0/onecall?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  origin: 'https://api.openweathermap.org',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'api.openweathermap.org',
  hostname: 'api.openweathermap.org',
  port: '',
  pathname: '/data/3.0/onecall',
  search: '?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  searchParams: URLSearchParams {
    'lat' => '32.08721095615897',
    'lon' => '34.801588162316506',
    'exclude' => 'hourly',
    'appid' => '0' },
  hash: ''
}

Resumo

O objeto URL em JavaScript fornece uma maneira estruturada de trabalhar com URLs, permitindo fácil manipulação e construção de URLs complexos. Embora as strings de modelo sejam simples e eficazes para URLs estáticos, os objetos URL são ideais para casos em que os URLs são dinâmicos ou exigem modificações frequentes.

Foto de Anne Nygård no Unsplash