Überblick

Das URL-Objekt in JavaScript bietet eine Möglichkeit, einfach mit URLs zu arbeiten und diese zu bearbeiten. Dies ist besonders nützlich, wenn Sie URLs in Ihrem Code erstellen, analysieren oder ändern müssen.

Oft werden Vorlagenzeichenfolgen verwendet, um URLs in JavaScript zu erstellen. Dies ist oft einfach und klar genug, aber das URL-Objekt ist eine robustere OOP-Methode für den Umgang mit URLs.

Sogar OpenWeatherMap.org verwendet Vorlagenzeichenfolgen in seiner Dokumentation: https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API-Schlüssel }

Für eine URL, die ziemlich statisch ist, ist das in Ordnung. Wenn Sie jedoch Änderungen an dieser URL vornehmen möchten, sollten Sie die Verwendung eines URL-Objekts in Betracht ziehen.

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

Grundlegende Verwendung

Sie können ein neues URL-Objekt erstellen, indem Sie eine URL-Zeichenfolge an seinen Konstruktor übergeben.

In diesem Fall (im Gegensatz zu oben) wird die gesamte URL mit verschiedenen Teilen übergeben:

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

Eigenschaften

Das URL-Objekt verfügt über mehrere Eigenschaften, mit denen Sie auf Teile der URL zugreifen können:

• href: Die vollständige URL als String.
• Protokoll: Das Protokoll (z. B. https:).
• Hostname: Der Domänenname (z. B. example.com).
• port: Die Portnummer (z. B. 8080).
• Pfadname: Der Pfad, der der Domäne folgt (z. B. /pfad).
• Suche: Die Abfragezeichenfolge, einschließlich des ? (z. B. ?query=123).
• Hash: Die Fragment-ID, einschließlich des # (z. B. #Abschnitt).
• host: Der Hostname und der Port kombiniert (z. B. example.com:8080).
• Ursprung: Der Ursprung der URL, also Protokoll, Hostname und 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'

Diese können auch verwendet werden, um die verschiedenen Teile der URL zu ändern?:

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

Methoden

Das URL-Objekt verfügt auch über einige Methoden, die beim Ändern und Interagieren mit der URL helfen.

Zum Beispiel ist ein URL-Suchparameter ein Schlüssel-Wert-Paar, das die API-Serverdetails für die Bedienung eines Benutzers informiert.

url.searchParams: Gibt ein URLSearchParams-Objekt zurück, das Methoden zum Arbeiten mit Abfragezeichenfolgenparametern bereitstellt. Du kannst:

Abfrageparameter abrufen: url.searchParams.get('query')
Legen Sie einen Abfrageparameter fest: url.searchParams.set('query', '456')
Löschen Sie einen Abfrageparameter: url.searchParams.delete('query')

Über Abfrageparameter iterieren:

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

toString(): Gibt die vollständige URL als Zeichenfolge zurück und spiegelt alle an den Eigenschaften oder Abfrageparametern vorgenommenen Änderungen wider.

Beispiel mit Open Weather Map API

Hier sind die Dokumente für OpenWeatherMap: https://openweathermap.org/api/one-call-3

Hier ist ein einfaches Beispiel, das zeigt, wie man ein URL-Objekt erstellt und seine Teile bearbeitet:

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

Ausgabe:

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

Zusammenfassung

Das URL-Objekt in JavaScript bietet eine strukturierte Möglichkeit, mit URLs zu arbeiten und ermöglicht so eine einfache Bearbeitung und Erstellung komplexer URLs. Während Vorlagenzeichenfolgen für statische URLs einfach und effektiv sind, eignen sich URL-Objekte ideal für Fälle, in denen URLs dynamisch sind oder häufige Änderungen erfordern.

Foto von Anne Nygård auf Unsplash