Einige wunderbare Verwendungsmöglichkeiten von URL-Objekten in JavaScript

Vorwort

Das URL-Objekt wird auf der Seitenseite möglicherweise weniger häufig verwendet. Im Allgemeinen dienen die meisten Operationen an der URL auf der Seitenseite dazu, URL-Parameter zu analysieren. Zum Parsen von URL-Parametern stehen viele Bibliotheken zur Auswahl, z. B. qs, oder Sie verwenden die nativen URLSearchParams des Browsers.

// Angenommen, die aktuelle URL ist „https://www.test.com?a=1&b=2“
const b = neue URLSearchParams(Standort.Suche);
const aParam = b.get('a'); // 1
const bParam = b.get('b'); // 2
const-Einträge = [...b];
// [['a', '1'], ['b', '2']]
// Wenn Sie ein Objekt wie qs.parse erhalten möchten, können Sie Folgendes tun: const params = Object.fromEntries(entries);
// {a: 'c', b: '2'}

Parameter analysieren

Das Parsen von Parametern über URLSearchParams scheint nicht eng mit dem URL-Objekt zusammenzuhängen, Sie können sich aber das zurückgegebene Objekt ansehen, nachdem das URL-Objekt instanziiert wurde.

const a = neue URL('https://www.test.com?a=1&b=2');
// Hash: ""
// Host: "www.test.com"
// Hostname: "www.test.com"
// href: "https://www.test.com/?a=1b=2"
// Herkunft: "https://www.test.com"
// Passwort: ""
// Pfadname: "/"
// Hafen: ""
// Protokoll: "https:"
// Suche: "?a=1&b=2"
// Suchparameter: URLSearchParams {}
// Benutzername: ""
// [[Prototyp]]: URL

Aus dem zurückgegebenen Objekt können wir ersehen, dass das zurückgegebene Attribut searchParams nach der Instanziierung der URL tatsächlich ein instanziiertes URLSearchParams-Objekt ist. Es gibt also tatsächlich eine andere Möglichkeit, die Parameter über das URL-Objekt abzurufen. Beispielsweise kann die obige Operation geändert werden in

const a = neue URL('https://www.test.com?a=1&b=2');
const-Einträge = [...a.searchParmas];
const params = Object.fromEntries(Einträge);

// In der Browserkonsole eine Zeile [...new URL(location.href).searchParams];

URL-Parameter ändern

Es ist nicht nötig, URLs zum Parsen von Parametern zu verwenden. Es reicht aus, das Objekt URLSearchParams zu verwenden. Was kann man also sonst noch mit URL-Objekten machen? Tatsächlich können wir uns vorstellen, dass URLSearchParams Schreiboperationen wie Setzen und Anhängen bereitstellt. Gleichzeitig können auch die vom URL-Objekt zurückgegebenen Eigenschaften geändert werden. Können wir eine URL ändern oder eine URL generieren, indem wir die Parameter in der URL ändern? Schließlich bleibt die Änderung einer URL oft eine Zeichenfolgenoperation, was ebenfalls gefährlich ist und leicht zu Fehlern führt.

const a = neue URL('https://www.test.com?a=1&b=2');
a.searchParams.set('a', '18');
a.searchParams.set('b', '14');
a.searchParams.set('c', 'test');
let newURL = a.toString(); // https://www.test.com/?a=18&b=14&c=test
a.hash = "hasha";
neueURL = a.toString(); // 'https://www.test.com/?a=18&b=14&c=test#hasha'
a.host = "www.init.com";
neueURL = a.toString(); // https://www.init.com/?a=18&b=14&c=test#hasha

Zusammenfassen

Das URL-Objekt ist sehr praktisch für den Umgang mit URLs. Eine einfache Kapselung kann viele Pakete einsparen. Mit einigen Workarounds kann die URL auch umgekehrt geändert werden. Dieses Objekt kann im Browser verwendet werden, es können jedoch Kompatibilitätsprobleme auftreten. Wenn es sich auf dem Desktop befindet, können Sie es bedenkenlos verwenden (was ist IE). Wenn es sich auf dem mobilen Endgerät befindet, müssen Sie möglicherweise Polyfill konfigurieren. Dieses Objekt kann auch in Deno verwendet werden

Damit ist dieser Artikel über einige wunderbare Verwendungsmöglichkeiten von JavaScript-URL-Objekten abgeschlossen. Weitere relevante Inhalte zu den wunderbaren Verwendungsmöglichkeiten von JavaScript-URL-Objekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!