VorwortDas 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 analysierenDas 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 ändernEs 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 ZusammenfassenDas 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:
|
<<: HTML-Grundstruktur_Powernode Java Academy
Dieser Artikel soll als Ausgangspunkt für Diskuss...
Als Pflichtkurs für Frontend-Entwickler kann CSS3...
Installieren Sie die entpackte Version der MySql-...
Inhaltsverzeichnis getApp() Definieren Sie Variab...
Viele Freunde berichten von folgendem Fehler, wen...
Installieren Sie Docker Desktop Download-Adresse:...
Geben Sie ein Shell-Skript unter Linux frei, um d...
Manchmal müssen Sie basierend auf der offiziell v...
Inhaltsverzeichnis Nachfragehintergrund Gedankena...
Bibliotheksbetrieb Abfrage 1.SHOW DATABASE; ----A...
Dieser Artikel ist eine selbstgeschriebene Nachah...
<br />Struktur und Hierarchie reduzieren die...
Hier sind 30 Best Practices für HTML-Anfänger. 1....
Inhaltsverzeichnis Grundlagen langsamer Abfragen:...
Tab-Auswahlkarten werden auf echten Webseiten seh...