Descripción general

El objeto URL en JavaScript proporciona una forma de trabajar y manipular URL fácilmente. Es particularmente útil cuando necesitas construir, analizar o modificar URL dentro de tu código.

Muchas veces se utilizan cadenas de plantilla para crear URL en JavaScript. A menudo esto es bastante fácil y claro, pero el objeto URL es un método de programación orientada a objetos más sólido para tratar las URL.

Incluso OpenWeatherMap.org utiliza cadenas de plantilla en su documentación: https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={Clave API }

Para una URL que es bastante estática, esto está bien; sin embargo, si desea realizar cambios en esta URL, puede considerar usar un 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

Puedes crear un nuevo objeto URL pasando una cadena de URL a su constructor.

En este caso (a diferencia del anterior), la URL completa se pasa con varias partes:

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

Propiedades

El objeto URL tiene varias propiedades que puedes usar para acceder a partes de la URL:

• href: La URL completa como una cadena.
• protocolo: el protocolo (p. ej., https:).
• nombre de host: el nombre de dominio (por ejemplo, ejemplo.com).
• puerto: el número de puerto (p. ej., 8080).
• nombre de ruta: la ruta que sigue al dominio (por ejemplo, /ruta).
• buscar: la cadena de consulta, incluido el ? (por ejemplo, ?query=123).
• hash: el identificador del fragmento, incluido el # (por ejemplo, #sección).
• host: el nombre de host y el puerto combinados (por ejemplo, ejemplo.com:8080).
• origen: el origen de la URL, que es el protocolo, el nombre de host y el puerto.

> 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'

¿Estos también se pueden usar para cambiar las diferentes partes de la 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

El objeto URL también tiene algunos métodos para ayudar a modificar e interactuar con la URL.

Por ejemplo, un parámetro de búsqueda de URL es un par de clave y valor que informa los detalles del servidor API para atender a un usuario.

url.searchParams: devuelve un objeto URLSearchParams, que proporciona métodos para trabajar con parámetros de cadena de consulta. Puede:

Obtener un parámetro de consulta: url.searchParams.get('query')
Establezca un parámetro de consulta: url.searchParams.set('query', '456')
Eliminar un parámetro de consulta: url.searchParams.delete('query')

Iterar sobre los parámetros de consulta:

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

toString(): Devuelve la URL completa como una cadena, reflejando cualquier cambio realizado en las propiedades o parámetros de consulta.

Ejemplo con API Open Weather Map

Aquí están los documentos de OpenWeatherMap: https://openweathermap.org/api/one-call-3

Aquí hay un ejemplo sencillo que muestra cómo crear un objeto URL y manipular sus 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)

producción:

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: ''
}

Resumen

El objeto URL en JavaScript proporciona una forma estructurada de trabajar con URL, lo que permite una fácil manipulación y construcción de URL complejas. Si bien las cadenas de plantilla son simples y efectivas para URL estáticas, los objetos de URL son ideales para casos en los que las URL son dinámicas o requieren modificaciones frecuentes.

Foto de Anne Nygård en Unsplash