Einige wunderbare Verwendungsmöglichkeiten von URL-Objekten in JavaScript

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!

Das könnte Sie auch interessieren:
  • JavaScript-Datenübertragung zwischen verschiedenen Seiten (URL-Parametererfassung)
  • So entfernen Sie jsessionid nach der URL in Springboot
  • vue.js lädt Bilder entsprechend der Bild-URL herunter
  • JavaScript-Bibliothek urlcat URL-Builder-Bibliothek

<<:  HTML-Grundstruktur_Powernode Java Academy

>>:  Detaillierte Erläuterung zum Bereitstellen und Installieren der chinesischen Version von Redash in Docker

Artikel empfehlen

Erzielen Sie mit reinem CSS3 in wenigen einfachen Schritten einen 3D-Flip-Effekt

Als Pflichtkurs für Frontend-Entwickler kann CSS3...

Lösung für falsche Zeichenfolgenwerte in MySQL

Viele Freunde berichten von folgendem Fehler, wen...

Shell-Skript zur Überwachung des MySQL-Master-Slave-Status

Geben Sie ein Shell-Skript unter Linux frei, um d...

So erstellen Sie eine Testdatenbank mit zig Millionen Testdaten in MySQL

Manchmal müssen Sie basierend auf der offiziell v...

Implementierungsbeispiel für Scan-Code-Zahlung im Vue-Projekt (mit Demo)

Inhaltsverzeichnis Nachfragehintergrund Gedankena...

Zusammenfassung der grundlegenden Operationen für MySQL-Anfänger

Bibliotheksbetrieb Abfrage 1.SHOW DATABASE; ----A...

JavaScript imitiert Xiaomi-Karusselleffekt

Dieser Artikel ist eine selbstgeschriebene Nachah...

Empfehlen Sie 60 Paging-Fälle und bewährte Vorgehensweisen

<br />Struktur und Hierarchie reduzieren die...

15 Best Practices für HTML-Anfänger

Hier sind 30 Best Practices für HTML-Anfänger. 1....

So analysieren Sie die Leistung von MySQL-Abfragen

Inhaltsverzeichnis Grundlagen langsamer Abfragen:...

Implementierung einfacher Tabs mit js

Tab-Auswahlkarten werden auf echten Webseiten seh...