Aperçu

L'objet URL en JavaScript fournit un moyen de travailler et de manipuler facilement les URL. C'est particulièrement utile lorsque vous devez construire, analyser ou modifier des URL dans votre code.

Souvent, des chaînes de modèles sont utilisées pour créer des URL en JavaScript. Cela est souvent assez simple et clair, mais l'objet URL est une méthode POO plus robuste pour traiter les URL.

Même OpenWeatherMap.org utilise des chaînes de modèles dans sa documentation : https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={clé API }

Pour une URL assez statique, cela convient, mais si vous souhaitez apporter des modifications à cette URL, vous pouvez envisager d'utiliser un objet 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);

Utilisation de base

Vous pouvez créer un nouvel objet URL en transmettant une chaîne d'URL à son constructeur.

Dans ce cas (contrairement à ci-dessus), l'URL entière est transmise avec différentes parties :

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

Propriétés

L'objet URL possède plusieurs propriétés que vous pouvez utiliser pour accéder à des parties de l'URL :

• href : l'URL complète sous forme de chaîne.
• protocole : le protocole (par exemple, https :).
• nom d'hôte : le nom de domaine (par exemple, exemple.com).
• port : le numéro de port (par exemple, 8080).
• pathname : le chemin suivant le domaine (par exemple, /path).
• recherche : la chaîne de requête, y compris le ? (par exemple, ?query=123).
• hash : l'identifiant du fragment, y compris le # (par exemple, #section).
• host : le nom d'hôte et le port combinés (par exemple, example.com:8080).
• origin : L'origine de l'URL, qui est le protocole, le nom d'hôte et le port.

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

Ceux-ci peuvent également être utilisés pour modifier les différentes parties de l'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éthodes

L'objet URL dispose également de méthodes permettant de modifier et d'interagir avec l'URL.

Par exemple, un paramètre de recherche d'URL est une paire clé et valeur qui informe les détails du serveur API pour servir un utilisateur.

url.searchParams : renvoie un objet URLSearchParams, qui fournit des méthodes permettant de travailler avec les paramètres de chaîne de requête. Tu peux:

Obtenir un paramètre de requête : url.searchParams.get('query')
Définir un paramètre de requête : url.searchParams.set('query', '456')
Supprimer un paramètre de requête : url.searchParams.delete('query')

Itérer sur les paramètres de requête :

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

toString() : renvoie l'URL complète sous forme de chaîne, reflétant toutes les modifications apportées aux propriétés ou aux paramètres de requête.

Exemple avec l'API Open Weather Map

Voici la documentation pour OpenWeatherMap : https://openweathermap.org/api/one-call-3

Voici un exemple simple montrant comment créer un objet URL et manipuler ses parties :

// 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)

sortir:

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

Résumé

L'objet URL en JavaScript fournit une manière structurée de travailler avec les URL, permettant une manipulation et une construction faciles d'URL complexes. Alors que les chaînes de modèles sont simples et efficaces pour les URL statiques, les objets URL sont idéaux pour les cas où les URL sont dynamiques ou nécessitent des modifications fréquentes.

Photo d'Anne Nygård sur Unsplash