URL，稱為統(tǒng)一資源定位器，指互聯(lián)網(wǎng)上能找到資源定位的字符串。在一般語境中，又稱網(wǎng)絡(luò)地址或鏈接，當(dāng)我們需要訪問某個網(wǎng)頁就需要輸入對應(yīng)的網(wǎng)址字符串，而這個網(wǎng)址就是URL。

前端對于網(wǎng)址鏈接，提供了URL對象，可以用于創(chuàng)建或解析網(wǎng)址字符串信息；而Nodejs中也有相應(yīng)模塊來處理網(wǎng)址，同樣支持URL類對象，與瀏覽器環(huán)境下兼容。
在介紹URL對象之前，我們先簡單說下URL網(wǎng)址字符串。

URL字符串

URL字符串一般由不同的部分組成，下面是在瀏覽器輸入框輸入的一個簡單網(wǎng)址，在百度搜索 中國：

https://www.baidu.com/s?wd=中國

從網(wǎng)址里可以看到，以下幾個部分的內(nèi)容：

• protocol：表明使用什么網(wǎng)絡(luò)協(xié)議，這里是 https 協(xié)議
• host：表明在請求的web服務(wù)器，這里是 www.baidu.com 百度域名
• port：表示端口號，這里沒有顯示，默認(rèn) 80 端口號，可以省略
• pathname：表示網(wǎng)絡(luò)資源路徑，這里是 s 路徑
• search：提供的網(wǎng)絡(luò)參數(shù)query字符串，這里是 ?wd=中國

這些內(nèi)容是大家最常見的，除此外還有hash錨點(diǎn)，一般用于指定頁面位置。
當(dāng)然，大家還能見到各種復(fù)雜的網(wǎng)址，包括絕對網(wǎng)址和相對網(wǎng)址等等，但本質(zhì)上都離不開基本的結(jié)構(gòu)。

URL字符串編碼

上面的百度搜索 中國 的網(wǎng)址，在瀏覽器輸入框中，可以正常顯示，但是如果把字符串復(fù)制出來就有點(diǎn)不一樣了，如下所示：

https://www.baidu.com/s?wd=%E4%B8%AD%E5%9B%BD

這是因?yàn)闈h字字符 中國，被轉(zhuǎn)義編碼了。

網(wǎng)址字符串(url)中，能使用的字符有一定的規(guī)定，一般分為元字符和語義字符：

• 元字符：分號(;)，逗號(,)，斜杠(/)，問號(?)，冒號(:)，at符(@)，and符(&)，等號(=)，加號(+)，美元符號($)，井號(#);
• 語義字符：a-z，A-Z，0-9，連詞號(-)，下劃線(_)，點(diǎn)(.)，感嘆號(!)，波浪線(~)，星號(*)，單引號(')，圓括號(())。

如果使用除了以上字符以外的其他字符，則需要對其他字符進(jìn)行編碼轉(zhuǎn)義，編碼的規(guī)則一般是根據(jù)系統(tǒng)的默認(rèn)編碼，會將每個字符的每個字節(jié)都轉(zhuǎn)為一個百分號加上兩個大寫十六進(jìn)制字符。關(guān)于轉(zhuǎn)義編碼的知識可參考博文 字符編碼 和 轉(zhuǎn)義字符

因此，如果網(wǎng)址字符串中存在其他特殊字符時，將被編碼轉(zhuǎn)義，后面我們在使用 URL 對象處理字符串時，將會看到編碼字符。
以上對都是對URL網(wǎng)址字符串的介紹，下面將正式介紹JavaScript提供的API，URL對象。

URL

JavaScript中提供URL接口對象，用于解析、規(guī)范和編碼網(wǎng)址字符串，它能較方便的解析或者修改網(wǎng)址，為我們處理網(wǎng)址字符串帶來幫助。

URL對象也可以在 Web Worker 和 Nodejs 中使用。

URL提供了構(gòu)造函數(shù)，用于返回一個新創(chuàng)建的URL對象：new URL(url [, base])。

URL：

表示一個URL網(wǎng)址字符串

如果是相對URL，則base作為基準(zhǔn)URL

如果是絕對URL，則base將被自動忽略

base：

一個用于基準(zhǔn)的URL網(wǎng)址字符串，默認(rèn)為空。

上面的網(wǎng)址，我們可以創(chuàng)建一個URL對象：

const myUrl = new URL('https://www.baidu.com/s?wd=中國')

在控制臺打印URL實(shí)例 myUrl，可以看到該對象的屬性和我們上面提到的URL網(wǎng)址字符串結(jié)構(gòu)是一致的，將能夠很方便的用于解析各種網(wǎng)址字符串，因?yàn)閁RL對象本身就是會解析網(wǎng)址：

URL實(shí)例屬性和方法

下面簡單介紹這些URL對象的實(shí)例屬性和方法。

• hash：包含'#'的片段標(biāo)識符
• host：包含域名(主機(jī)名|IP地址等)、端口(如有)的字符串
• hostname：域名(主機(jī)名|IP地址等)字符串，不包含端口
• href：完整的網(wǎng)址字符串
• origin：只讀，包含協(xié)議、域名、端口的字符串
• password：域名前指定的密碼，現(xiàn)在一般很少見
• pathname：以 / 符號開頭的文件路徑(大致是域名host以后、參數(shù)search之前的部分)
• port：端口號字符串
• protocol：網(wǎng)絡(luò)協(xié)議字符串
• search：參數(shù)字符串，包含 ? 符號
• searchParams：只讀，URLSearchParams 對象，用于訪問參數(shù)字符串
• username：域名前指定的用戶名，現(xiàn)在一般很少見
• toString()：完整的網(wǎng)址字符串，與URL.href相同
• toJSON()：完整的網(wǎng)址字符串，與 URL.href 以及 toString() 基本相同

實(shí)例方法多用于修改和解析網(wǎng)址，方便我們處理；而URL對象還提供了靜態(tài)方法，用于創(chuàng)建 Object URL。

URL.createObjectURL()

Object URL 又稱為 Blob URL，是瀏覽器內(nèi)部生成的一個 URL 到 Blob 的映射，能產(chǎn)生一個URL網(wǎng)址，在當(dāng)前頁面中加載。

而 URL.createObjectURL()，根據(jù)給定對象(一般是 File 或 Blob 對象)，創(chuàng)建一個網(wǎng)址URL，這個URL綁定在當(dāng)前窗口(document)中，關(guān)閉當(dāng)前窗口則失效。

語法：objectURL = URL.createObjectURL(object);參數(shù)可取值：File、Blob 對象。

const url = URL.createObjectURL(file)

對于文件，會生成一個url，類似這樣的：blob:http://localhost:8080/29c75da5-9b55-4b9f-2383-1a643c9b5a1c，可以在當(dāng)前窗口頁面中加載和展示。

當(dāng)我們調(diào)用 URL.createObjectURL()時，每次都會新創(chuàng)建一個 Object URL 對象，雖然瀏覽器在當(dāng)前窗口頁面關(guān)閉時會自動釋放該對象，但我們也可以主動釋放，需要調(diào)用URL對象的另外一個靜態(tài)方法：URL.revokeObjectURL()。

URL.revokeObjectURL(url)

以上語句即可釋放當(dāng)前對象，關(guān)于這塊內(nèi)容的知識，可參考之前的博文 前端字節(jié)二進(jìn)制。

URLSearchParams

URLSearchParams 對象專門用于處理url網(wǎng)址信息中的查詢字符串，在網(wǎng)址字符串中通常都是 ? 問號之后的內(nèi)容(不包含問號)。

在URL對象中也有一個屬性 searchParams 返回該對象，會對查詢字符串做解析處理，以等號分割生成對應(yīng)的 key-value 鍵值對的數(shù)據(jù)形式。

如下所示：

const myUrl = new URL('https://www.baidu.com/s?wd=中國')
// myUrl.searchParams 返回的是包含 `wd=中國` 內(nèi)容的對象
myUrl.searchParams.get('wd') // 輸出：'中國'

URLSearchParams 對象 也可以使用構(gòu)造函數(shù)，自定義一個實(shí)例：

const urlSearchParams = new URLSearchParams('wd=中國&city=上海')
urlSearchParams.get('city') // 輸出：'上海'

URLSearchParams 對象實(shí)例是一個迭代器(Iterator)對象，可以使用JavaScript中的遍歷語法，輸出每一項(xiàng)的[key, value]：

for (const usp of urlSearchParams) {
  console.log(usp)
}
// ['wd', '中國']
//?['city', '上海']

URLSearchParams實(shí)例方法

URLSearchParams 對象提供了多個實(shí)例方法，用于讀取或修改查詢字符串?dāng)?shù)據(jù)，還提供了三個方法用來對數(shù)據(jù)進(jìn)行遍歷。

• append()：增加一個新的鍵值參數(shù)
• delete(key)：刪除對應(yīng)的鍵值
• get(key)：返回第一個值
• getAll(key)：返回所有值組成的數(shù)組
• has(key)：是否存在某個鍵值
• set(key, value)：設(shè)置指定的鍵值對參數(shù)
• sort()：按鍵名進(jìn)行排序
• toString()：返回查詢字符串
• keys()：返回包含所有鍵名的迭代器對象
• values()：返回包含所有值的迭代器對象
• entries()：返回包含所有鍵和值的迭代器對象

const urlSearchParams = new URLSearchParams('wd=中國&city=上海')
urlSearchParams.append('city', '北京')
urlSearchParams.getAll('city') // ['上海', '北京']
for (const key of urlSearchParams.keys()) {
  console.log(key)
}
// 輸出：wd city city

以上代碼，就是部分方法的使用示例，通過它們我們可以讀取查詢參數(shù)、對當(dāng)前網(wǎng)址的查詢參數(shù)進(jìn)行修改等，除此之外，還可以做為POST異步數(shù)據(jù)發(fā)送給服務(wù)器。

作為POST請求的數(shù)據(jù)參數(shù)

const url = 'https://www.test.com/api/update'
const params = new URLSearchParams()
params.append('wd', '中國')
const xhr = new XMLHttpRequest()
xhr.open('POST', url)
xhr.send(params)

通過AJAX異步請求，發(fā)送POST請求，把 URLSearchParams 實(shí)例對象作為send函數(shù)的參數(shù)，可以發(fā)送到服務(wù)器。

從上圖可見，設(shè)置的 URLSearchParams 對象參數(shù)，作為POST請求的 Form Data 數(shù)據(jù)。

Nodejs中也提供有URL和URLSearchParams類對象，并且定義和屬性方法基本都相同，使用方式也都一樣，可以直接使用，減少我們重復(fù)學(xué)習(xí)的成本。

web中的url相關(guān)屬性

在瀏覽器環(huán)境下，web窗口中定義有多個屬性與url網(wǎng)址相關(guān)，如 document 對象就擁有多個屬性，都與URL網(wǎng)址相關(guān)，下面可以具體看一下。

document.URL 和 document.documentURI

document.URL屬性直接返回當(dāng)前網(wǎng)頁文檔的url網(wǎng)址字符串。

注意它和URL對象不一樣，只返回一個字符串。

document.documentURI屬性也是直接返回當(dāng)前文檔的url網(wǎng)址字符串。

它倆在網(wǎng)頁(HTML)文檔中，是相等的，都返回當(dāng)前網(wǎng)址的字符串：

document.documentURI === document.URL
// true

不同之處，在于 documentURI 屬性適用于所有文檔，而 URL 屬性只能在HTML文檔中使用。

document.domain 和 document.referrer

document.domain屬性返回當(dāng)前網(wǎng)頁文檔的域名。

如在頁面 https://www.baidu.com/s?wd=中國 中，document.domain 的值則為 www.baidu.com。

document.referrer屬性返回跳轉(zhuǎn)到當(dāng)前頁面的上一個頁面的網(wǎng)址字符串，它針對的是網(wǎng)頁中的跳轉(zhuǎn)鏈接。

如果沒有鏈接跳轉(zhuǎn)，而直接在瀏覽器輸入框輸入網(wǎng)址則該值為空字符串。

location

location 既是window對象也是document對象的屬性，可以直接調(diào)用，返回一個 Location 對象，描述當(dāng)前文檔的URL信息，它包含的內(nèi)容更多。

window.location
document.location
// 返回Location對象

Location對象

Location 對象的屬性，與上面介紹的URL對象是一樣的，可見上文章節(jié) URL實(shí)例屬性和方法。
Location對象擁有獨(dú)特的方法，可以對當(dāng)前頁面網(wǎng)址進(jìn)行各種操作：

• location.assign(url)：跳轉(zhuǎn)到另一個網(wǎng)址
• location.reload(boolean)：重新加載當(dāng)前網(wǎng)址，參數(shù)為true時就從服務(wù)器加載，參數(shù)為false則從緩存中加載
• location.replace(url)：用參數(shù)給定的網(wǎng)址替換當(dāng)前頁面，并且不會記錄到歷史會話中，瀏覽器后退按鈕功能就無用
• location.toString()：返回當(dāng)前網(wǎng)頁，與 location.href 相同

給location賦值

也可給location屬性直接賦值，如果給它一個網(wǎng)址，就會跳轉(zhuǎn)到該網(wǎng)址，與給 location.href 賦值效果一樣：

location = 'https://baidu.com'
location.
// 也可以使用相對URL
location = 'other.html'
// 指定錨點(diǎn)，瀏覽器會自動滾動到頁面錨點(diǎn)處
location = '#footer'

以上就是一文詳解JavaScript中的URL和URLSearchParams的詳細(xì)內(nèi)容，更多關(guān)于JavaScript URLSearchParams的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論