腳本之家服務器常用軟件

快捷導航

一文詳解JavaScript中的URL和URLSearchParams

更新時間：2023年05月31日 15:47:36 作者：jimojianghu

URL，稱為統(tǒng)一資源定位器，指互聯(lián)網(wǎng)上能找到資源定位的字符串，而URLSearchParams對象是專門用于處理url網(wǎng)址信息中的查詢字符串，本文就來帶大家深入了解一下二者的使用

前端對于網(wǎng)址鏈接，提供了URL對象，可以用于創(chuàng)建或解析網(wǎng)址字符串信息；而Nodejs中也有相應模塊來處理網(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)絡協(xié)議，這里是 https 協(xié)議
host：表明在請求的web服務器，這里是 www.baidu.com 百度域名
port：表示端口號，這里沒有顯示，默認 80 端口號，可以省略
pathname：表示網(wǎng)絡資源路徑，這里是 s 路徑
search：提供的網(wǎng)絡參數(shù)query字符串，這里是 ?wd=中國

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

URL字符串編碼

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

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

這是因為漢字字符 中國，被轉(zhuǎn)義編碼了。

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

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

如果使用除了以上字符以外的其他字符，則需要對其他字符進行編碼轉(zhuǎn)義，編碼的規(guī)則一般是根據(jù)系統(tǒng)的默認編碼，會將每個字符的每個字節(jié)都轉(zhuǎ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提供了構造函數(shù)，用于返回一個新創(chuàng)建的URL對象：new URL(url [, base])。

URL：

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

如果是相對URL，則base作為基準URL

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

base：

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

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

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

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

URL實例屬性和方法

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

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

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

URL.createObjectURL()

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

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

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

const url = URL.createObjectURL(file)

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

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

URL.revokeObjectURL(url)

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

URLSearchParams

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

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

如下所示：

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

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

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

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

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

URLSearchParams實例方法

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

append()：增加一個新的鍵值參數(shù)
delete(key)：刪除對應的鍵值
get(key)：返回第一個值
getAll(key)：返回所有值組成的數(shù)組
has(key)：是否存在某個鍵值
set(key, value)：設置指定的鍵值對參數(shù)
sort()：按鍵名進行排序
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ù)、對當前網(wǎng)址的查詢參數(shù)進行修改等，除此之外，還可以做為POST異步數(shù)據(jù)發(fā)送給服務器。

作為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 實例對象作為send函數(shù)的參數(shù)，可以發(fā)送到服務器。

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

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

web中的url相關屬性

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

document.URL 和 document.documentURI

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

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

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

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

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

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

document.domain 和 document.referrer

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

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

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

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

location

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

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

Location對象

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

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

給location賦值

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

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

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频