不要再造輪子了：聊一聊 JavaScript 的 URL 對象是什麼？

本文由葡萄城技術團隊翻譯並首發

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。

---

若是咱們本身編寫從URL中分析和提取元素的代碼，那麼有可能會比較痛苦和麻煩。程序員做爲這個社會中最「懶」的羣體之一，無休止的重複造輪子必然是使人難以容忍的，因此大多數瀏覽器的標準庫中都已經內置了URL對象。

那麼如今，有了它，咱們就能夠將URL字符串做爲參數傳遞給URL的構造函數，並建立它的實例解析URL內容了嗎？答案是：「是的！」。

要使用URL構造函數建立URL對象，咱們在如下代碼中使用new來建立：

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

在上面的代碼中，咱們建立了一個絕對地址的URL對象的實例。但同時，咱們還能夠傳入一個相對地址做爲第一個參數，並把相對地址的基礎URL做爲第二個參數來建立一個URL對象。可能比較拗口，咱們舉個栗子：

new URL('/developer', 'https://www.grapecity.com.cn');

看上面的代碼，第二個基礎URL參數必須是一個有效的絕對地址，而不能夠是一個相對的地址片斷，它必需要以http://或https://開頭，咱們還能夠在下面的代碼中以相似於鏈式定義的方式來使用：

const gcUrl = 'https://www.grapecity.com.cn/';

const gcDevUrl = new URL("/developer", gcUrl);

const gcUrl2 = new URL(gcUrl);

const gcSlnUrl = new URL('/solutions', gcUrl2);

const Url = new URL('aboutus', gcSlnUrl);

若是每一個參數使用toString()的話，咱們的執行結果應該以下：

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

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

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

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

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

第二個參數是可選參數，只有當第一個參數是相對地址時才應傳入。咱們傳入的字符串或URL對象被轉換爲USVString對象，該對象對應於一組Unicode標量值可能的序列集合。在咱們的代碼中，咱們能夠將它們視爲常規字符串。若是兩個參數都是相對地址，或者基礎URL和相對地址一塊兒無效，則會拋出TypeError異常。咱們能夠直接將URL對象傳遞給第二個參數，由於URL對象的toString方法將在構造函數中操做以前將URL對象轉換爲完整的URL字符串。

URL對象能夠具備如下屬性：

Hash,host,hostname,href,origin,username/password,pathname,port,protocol,search等屬性，接下來，讓咱們一塊兒來了解一下它們吧！

Hash屬性

hash屬性能得到URL中位於#號後的部分。因爲字符串沒有通過百分比解碼，所以仍然對以下所示的特殊符號進行編碼。它們使用下面的映射進行編碼。在編碼過程當中，左側的字符將轉換爲右側的字符：

• ‘:’ — %3A
• ‘/’ — %2F
• ‘?’ — %3F
• ‘#’ — %23
• ‘[‘ — %5B
• ‘]’ — %5D
• ‘@’ — %40
• ‘!’ — %21
• ‘$’ — %24
• 「‘「 — %27
• ‘(‘ — %28
• ‘)’ — %29
• ‘*’ — %2A
• ‘+’ — %2B
• ‘,’ — %2C
• ‘;’ — %3B
• ‘=’ — %3D
• ‘%’ — %25
• ‘ ‘ — %20 或者 +

例如，咱們有這樣的URL字符串，https://www.grapecity.com.cn/developer/spreadjs#price，而後咱們能夠直接取出Hash屬性值，以下所示：

const exampleUrl = new URL('https://www.grapecity.com.cn/...');
console.log(exampleUrl.hash);

在運行結果中，咱們在console.log語句中獲得‘#price’。該屬性是一個USVString，當咱們像上面那樣獲取它時，它會被轉換爲字符串。由於它不是隻讀屬性，因此咱們也能夠像下面的代碼中那樣直接爲它賦值：

exampleUrl.hash = '#newHash';

例如：

const exampleUrl = new URL（'https://www.grapecity.com.cn/...'）;
exampleUrl.hash ='#newPrice';
console.log（exampleUrl.hash）;

咱們經過href屬性就能得到更新後的URL https://www.grapecity.com.cn/...

Host 屬性

URL對象的host屬性是包含主機名的USVString。若是端口包含在: 以後，則咱們還將得到主機的端口號。例如，若是咱們有：

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

咱們就能得到huozige.grapecity.com.cn:8080。與其餘USVString屬性同樣，當咱們檢索它時，它會轉換爲字符串。一樣的，它也不是隻讀屬性，因此咱們也能夠像hash屬性同樣爲它賦值：

const exampleUrl = new URL('http:// huozige.grapecity.com.cn:8080/功能演示');
exampleUrl.host = 'es.grapecity.com.cn:80';
console.log(exampleUrl);

這樣咱們同樣可以得到全新的URL。

Hostname 屬性

使用hostname屬性，能夠從URL獲得端口外的主機名：

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

你一樣也能夠像修改其餘屬性同樣修改hostname屬性，例如：

exampleUrl.hostname = ‘newExample.com’;

Href 屬性

URL對象的href屬性包含了傳入URL對象的整個地址字符串，例如：

const exampleUrl = new URL('https://www.grapecity.com.cn/...');
console.log(exampleUrl.href);

打出來的就是咱們傳給URL構造函數的內容，和其餘屬性同樣，href屬性也不是隻讀的。

Origin 屬性

區別於其餘屬性，Origin是一個只讀屬性，它將爲你返回具備URL來源的Unicode序列化USVString。Origin的結構是由傳入的URL類型決定的，對於http或https 的連接，獲得的Origin將會爲 協議（http/https）+ (://) + 域名 + (:端口)，通常狀況下，默認端口將會被忽略。對於BLOB 連接，Origin返回的則是BLOB：後面的部分。例如：

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

你將會獲得

https://www.grapecity.com.cn

UserName & Password屬性

UserName和Password屬性也是可寫屬性，它能提取域名前的用戶名和密碼部分的內容，例如：

const url = new URL('https://username:password@www.grapecity.com.cn');
console.log(url.username);
console.log(url.password);
url.username = 「username1」;
url.password = 「password1」;
console.log(url.username);
console.log(url.password);

Pathname屬性

這個屬性是指得到傳入url的第一個斜槓(/) 後面除參數外的部分，例如：

const url = new URL ("https://www.grapecity.com.cn/developer/spreadjs#price")
console.log(url.pathname);

Port屬性

Port屬性是指能夠得到傳入Url地址的端口值，這個屬性也是可寫的。

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

Protocol屬性

能夠得到傳入Url地址參數的協議名，通常是指相似http:，https:，ftp:，file:等這樣的協議。

const url = new URL('https://www.grapecity.com.cn/');
console.log(url.protocol);

Search屬性

能夠得到傳入Url地址參數？後的部分，但該屬性只能得到整個查詢字符串，如若須要瞭解各個參數的值，可使用searchParams屬性。

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

searchParams屬性

search屬性只爲咱們獲取了整個參數字符串，若是有把字符串解析爲鍵值對，這時候searchParams屬性就派上了用場，該屬性將得到一個URLSearchParams對象，該對象具備列出查詢字符串鍵值對列表的能力，例如，要獲取參數列表，咱們能夠這樣使用。

const url = new URL（' https://www.grapecity.com.cn/...'）;
console.log（url.searchParams.get（'key1'））;
console.log（url.searchParams.get（'key2'））;

從第一個console.log語句中得到value1，從第二個console.log語句中得到value2。URLSearchParams對象有一個get方法，經過鍵名獲取給定查詢字符串鍵的值。

靜態方法

URL構造函數裏有2個靜態方法，它有createObjectURL()方法和revokeObjectURL()方法。

URL.createObjectURL()靜態方法會建立一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命週期和建立它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

URL.revokeObjectURL()方法會釋放一個經過URL.createObjectURL()建立的對象URL. 當你要已經用過了這個對象URL,而後要讓瀏覽器知道這個URL已經再也不須要指向對應的文件的時候,就須要調用這個方法。

總結

最後爲你們帶來一張表，但願能更好的幫助你們通覽

 

有了URL對象，操縱和從URL中提取部分再也不是一件痛苦的事情，由於咱們沒必要本身編寫全部代碼來完成這項工做。大多數瀏覽器的標準庫中都內置了URL對象。如今咱們能夠將URL做爲字符串傳遞給URL構造函數並建立URL的實例。而後，咱們可使用方便的值屬性和方法來操做並得到咱們想要的URL部分。

最後，有什麼問題，歡迎直接留言。