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

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

URL字符串

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

https://www.baidu.com/s?wd=中國(guó)

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

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

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

URL字符串編碼

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

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

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

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

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

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

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

URL

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

URL對(duì)象也可以在 Web Worker 和 Nodejs 中使用。

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

URL：

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

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

如果是絕對(duì)URL，則base將被自動(dòng)忽略

base：

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

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

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

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

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

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

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

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

URL.createObjectURL()

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

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

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

const url = URL.createObjectURL(file)

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

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

URL.revokeObjectURL(url)

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

URLSearchParams

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

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

如下所示：

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

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

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

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

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

URLSearchParams實(shí)例方法

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

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

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

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

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

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

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

從上圖可見(jiàn)，設(shè)置的 URLSearchParams 對(duì)象參數(shù)，作為POST請(qǐng)求的 Form Data 數(shù)據(jù)。

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

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

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

document.URL 和 document.documentURI

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

注意它和URL對(duì)象不一樣，只返回一個(gè)字符串。

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

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

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

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

document.domain 和 document.referrer

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

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

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

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

location

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

window.location
document.location
// 返回Location對(duì)象

Location對(duì)象

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

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

給location賦值

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

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

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

最新評(píng)論