Lassen Sie uns darüber sprechen, was das URL-Objekt von JavaScript ist

Überblick

Wenn wir unseren eigenen Code schreiben, um Elemente aus einer URL zu analysieren und zu extrahieren, kann dies mühsam und umständlich sein. Programmierer gehören zu den faulsten Gruppen in unserer Gesellschaft und es ist für sie unerträglich, das Rad ständig neu erfinden zu müssen. Daher verfügen die meisten Browser über integrierte URL-Objekte in ihren Standardbibliotheken.

Können wir damit jetzt die URL-Zeichenfolge als Parameter an den URL-Konstruktor übergeben und eine Instanz davon erstellen, um den URL-Inhalt zu analysieren? Die Antwort ist: „Ja!“.

Um ein URL-Objekt mit dem URL-Konstruktor zu erstellen, verwenden wir im folgenden Code new:

neue URL('https://www.grapecity.com.cn');

Im obigen Code erstellen wir eine Instanz des URL-Objekts mit einer absoluten Adresse. Gleichzeitig können wir aber auch eine relative Adresse als ersten Parameter und die Basis-URL der relativen Adresse als zweiten Parameter übergeben, um ein URL-Objekt zu erstellen. Das ist vielleicht etwas schwer zu verstehen, also nehmen wir ein Beispiel:

neue URL('/Entwickler', 'https://www.grapecity.com.cn');

Betrachtet man den obigen Code, muss der zweite Basis-URL-Parameter eine gültige absolute Adresse sein, kein relatives Adressfragment. Er muss mit http:// oder https:// beginnen. Wir können ihn im folgenden Code auch kettenartig verwenden:

const gcUrl = "https://www.grapecity.com.cn/";
const gcDevUrl = neue URL("/Entwickler", gcUrl);
const gcUrl2 = neue URL(gcUrl);
const gcSlnUrl = neue URL('/Lösungen', gcUrl2);
const Url = neue URL('aboutus', gcSlnUrl);

Wenn jeder Parameter toString() verwendet, sollten unsere Ausführungsergebnisse wie folgt aussehen:

https://www.grapecity.com.cn/developer

https://www.grapecity.com.cn/

https://www.grapecity.com.cn/solutions

https://www.grapecity.com.cn/aboutus

Der zweite Parameter ist optional und sollte nur übergeben werden, wenn der erste Parameter eine relative Adresse ist. Das von uns übergebene String- oder URL-Objekt wird in ein USVString-Objekt konvertiert, das der Menge der möglichen Sequenzen von Unicode-Skalarwerten entspricht. In unserem Code können wir sie wie normale Zeichenfolgen behandeln. Wenn beide Argumente relative URLs sind oder wenn sowohl die Basis-URL als auch die relative URL ungültig sind, wird eine TypeError-Ausnahme ausgelöst. Wir können das URL-Objekt direkt an den zweiten Parameter übergeben, da die toString-Methode des URL-Objekts das URL-Objekt in eine vollständige URL-Zeichenfolge konvertiert, bevor es im Konstruktor verarbeitet wird.

URL-Objekte können folgende Eigenschaften haben:

Hash, Host, Hostname, href, Herkunft, Benutzername/Passwort, Pfadname, Port, Protokoll, Suche und andere Attribute. Als Nächstes lernen wir sie gemeinsam kennen!

Hash-Eigenschaften

Das Hash-Attribut kann den Teil der URL nach dem #-Zeichen abrufen. Da die Zeichenfolge nicht prozentual dekodiert wird, werden Sonderzeichen wie die folgenden weiterhin kodiert. Sie werden mithilfe der folgenden Zuordnung codiert. Bei der Kodierung werden Zeichen auf der linken Seite in Zeichen auf der rechten Seite umgewandelt:

':' — %3A

'/' — %2F

'?' — %3F

'#' - %dreiundzwanzig

'[' — %5B

']' — %5D

'@' — %40

'!' - %einundzwanzig

'$' — %24

„'“ — %27

'(' — %28

')' — %29

'*' — %2A

'+' — %2B

',' — %2C

';' — %3B

'=' — %3D

'%' – %25

' ' — %20 oder +

Beispielsweise haben wir eine URL-Zeichenfolge wie diese: https://www.grapecity.com.cn/developer/spreadjs#price. Dann können wir den Hash-Attributwert direkt wie folgt herausnehmen:

const exampleUrl = neue URL('https://www.grapecity.com.cn/developer/spreadjs#price');
Konsole.log(Beispiel-URL.hash);

Im Laufergebnis erhalten wir „#price“ in der console.log-Anweisung. Die Eigenschaft ist ein USVString und wenn wir sie wie oben erhalten, wird sie in eine Zeichenfolge konvertiert. Da es sich nicht um eine schreibgeschützte Eigenschaft handelt, können wir ihr auch direkt einen Wert zuweisen, wie im folgenden Code gezeigt:

Beispiel-Url.hash = "#newHash";

Zum Beispiel:

const exampleUrl = neue URL('https://www.grapecity.com.cn/developer/spreadjs#price');
Beispiel-URL.hash = '#neuerPreis';
Konsole.log(Beispiel-URL.hash);

Wir können die aktualisierte URL https://www.grapecity.com.cn/developer/spreadjs#newHash über das href-Attribut abrufen

Gastgebereigenschaft

Die Host-Eigenschaft eines URL-Objekts ist ein USVString, der den Hostnamen enthält. Wenn der Port nach dem : angegeben wird, erhalten wir auch die Portnummer des Hosts. Wenn wir beispielsweise Folgendes haben:

const exampleUrl = neue URL('http://huozige.grapecity.com.cn:8080/');
console.log(beispielUrl.host);

Wir können huozige.grapecity.com.cn:8080 bekommen. Wie andere USVString-Eigenschaften wird es beim Abrufen in eine Zeichenfolge konvertiert. Ebenso handelt es sich nicht um eine schreibgeschützte Eigenschaft, sodass wir ihr wie einer Hash-Eigenschaft Werte zuweisen können:

const exampleUrl = neue URL('http:// huozige.grapecity.com.cn:8080/功能演示');
Beispiel-Url.host = "es.grapecity.com.cn:80";
console.log(beispiel-URL);

Auf diese Weise können wir auch eine brandneue URL erhalten.

Hostname-Attribut

Über die Eigenschaft hostname können Sie neben dem Port auch den Hostnamen aus der URL ermitteln:

const exampleUrl = neue URL('http:// huozige.grapecity.com.cn:8080/功能演示');
console.log(beispielUrl.hostname)

Sie können die Hostnameneigenschaft auch wie jede andere Eigenschaft ändern, zum Beispiel:

exampleUrl.hostname = "newExample.com";

Href-Attribut

Das href-Attribut des URL-Objekts enthält die gesamte Adresszeichenfolge, die an das URL-Objekt übergeben wird, zum Beispiel:

const exampleUrl = neue URL('https://www.grapecity.com.cn/developer/spreadjs#price');
console.log(beispielUrl.href);

Ausgedruckt wird der Inhalt, den wir an den URL-Konstruktor übergeben haben. Wie andere Attribute ist das href-Attribut nicht schreibgeschützt.

Ursprungseigenschaften

Im Gegensatz zu anderen Eigenschaften ist „Origin“ eine schreibgeschützte Eigenschaft, die Ihnen den Unicode-serialisierten USVString mit dem URL-Ursprung zurückgibt. Die Struktur von Origin wird durch den Typ der übergebenen URL bestimmt. Bei http- oder https-Links besteht Origin aus dem Protokoll (http/https) + (://) + Domänenname + (:Port). Im Allgemeinen wird der Standardport ignoriert. Bei BLOB-Links gibt Origin den Teil nach BLOB: zurück. Zum Beispiel:

const url1 = neue URL("https://www.grapecity.com.cn/:443")
const url2 = neue URL("blob:https://www.grapecity.com.cn/:443")
Konsole.log(url1.origin);
Konsole.log(url2.origin)

Eigenschaften von Benutzername und Passwort

Die Eigenschaften „UserName“ und „Password“ sind ebenfalls beschreibbare Eigenschaften, die die Teile von Benutzername und Passwort vor dem Domänennamen extrahieren können, zum Beispiel:

const url = neue URL('https://Benutzername:[email protected]');
console.log(url.benutzername);
Konsole.log(URL.Passwort);

url.username = "Benutzername1";
url.password = "Passwort1";
console.log(url.benutzername);
Konsole.log(URL.Passwort);

Pathname-Attribut

Mit dieser Eigenschaft wird der Teil nach dem ersten Schrägstrich (/) der eingehenden URL mit Ausnahme der Parameter abgerufen, zum Beispiel:

const url = neue URL („https://www.grapecity.com.cn/developer/spreadjs#price“)
console.log(url.pfadname);

Hafeneigenschaften

Die Port-Eigenschaft bezieht sich auf den Portwert, der zum Abrufen der eingehenden URL-Adresse verwendet werden kann. Diese Eigenschaft ist auch beschreibbar.

const url = neue URL('http://huozige.grapecity.com.cn:8080/功能演示');

Konsole.log(URL.Port);

Protokolleigenschaften

Sie können den Protokollnamen des eingehenden URL-Adressparameters abrufen, der sich im Allgemeinen auf Protokolle wie http:, https:, ftp:, file: usw. bezieht.

const url = neue URL('https://www.grapecity.com.cn/');

konsole.log(url.protokoll);

Suchattribute

Kann ich die eingehenden URL-Adressparameter abrufen? Allerdings kann diese Eigenschaft nur die gesamte Abfragezeichenfolge abrufen. Wenn Sie den Wert jedes Parameters wissen müssen, können Sie die Eigenschaft searchParams verwenden.

const url = neue URL('https://www.grapecity.com.cn:443?key1=value1&key2=value2');

konsole.log(url.suche);

searchParams-Eigenschaft

Die Eigenschaft search liefert uns nur die gesamte Parameterzeichenfolge. Wenn wir die Zeichenfolge in Schlüssel-Wert-Paare zerlegen müssen, ist die Eigenschaft searchParams praktisch. Diese Eigenschaft ruft ein URLSearchParams-Objekt ab, das die Schlüssel-Wert-Paare der Abfragezeichenfolge auflisten kann. Um beispielsweise die Parameterliste abzurufen, können wir es folgendermaßen verwenden.

const url = neue URL('https://www.grapecity.com.cn/?key1=value1&key2=value2');
console.log(url.searchParams.get('key1'));
console.log(url.searchParams.get('key2'));

Sie erhalten Wert1 aus der ersten console.log-Anweisung und Wert2 aus der zweiten console.log-Anweisung. Das URLSearchParams-Objekt verfügt über eine Get-Methode, die den Wert eines gegebenen Abfragezeichenfolgenschlüssels anhand des Schlüsselnamens abruft.

Statische Methoden

Es gibt zwei statische Methoden im URL-Konstruktor, nämlich die Methoden createObjectURL() und revokeObjectURL().

Die statische Methode URL.createObjectURL() erstellt einen DOMString, der eine URL enthält, die das als Parameter angegebene Objekt darstellt. Der Lebenszyklus dieser URL ist an das Dokument in dem Fenster gebunden, in dem es erstellt wurde. Dieses neue URL-Objekt stellt das angegebene Dateiobjekt oder Blob-Objekt dar.

Die Methode URL.revokeObjectURL() gibt eine von URL.createObjectURL() erstellte Objekt-URL frei. Sie müssen diese Methode aufrufen, wenn Sie diese Objekt-URL verwendet haben und dem Browser mitteilen möchten, dass diese URL nicht mehr auf die entsprechende Datei verweist.

Zusammenfassen

Zum Schluss bringe ich Ihnen eine Tabelle, ich hoffe, sie kann Ihnen helfen, besser zu verstehen

Mit dem URL-Objekt ist das Bearbeiten und Extrahieren von Teilen einer URL keine mühsame Aufgabe mehr, da wir den gesamten Code hierfür nicht selbst schreiben müssen. Die meisten Browser haben ein URL-Objekt in ihre Standardbibliotheken integriert. Jetzt können wir die URL als Zeichenfolge an den URL-Konstruktor übergeben und eine Instanz der URL erstellen. Wir können dann die praktischen Werteigenschaften und Methoden verwenden, um den gewünschten Teil der URL zu bearbeiten und abzurufen.