URL，稱為統一資源定位器，指互聯網上能找到資源定位的字串，在一般語境中，又稱網路地址或鏈接，當我們需要訪問某個網頁就需要輸入對應的網址字串，而這個網址就是URL，
前端對于網址鏈接，提供了URL物件，可以用于創建或決議網址字串資訊；而Nodejs中也有相應模塊來處理網址，同樣支持URL類物件，與瀏覽器環境下兼容，
在介紹URL物件之前，我們先簡單說下URL網址字串，
URL字串
URL字串一般由不同的部分組成，下面是在瀏覽器輸入框輸入的一個簡單網址，在百度搜索 中國：
https://www.baidu.com/s?wd=中國
從網址里可以看到，以下幾個部分的內容：
- protocol：表明使用什么網路協議，這里是
https協議 - host：表明在請求的web服務器，這里是
www.baidu.com百度域名 - port：表示埠號，這里沒有顯示，默認
80埠號，可以省略 - pathname：表示網路資源路徑，這里是
s路徑 - search：提供的網路引數query字串，這里是
?wd=中國
這些內容是大家最常見的，除此外還有hash錨點，一般用于指定頁面位置，
當然，大家還能見到各種復雜的網址，包括絕對網址和相對網址等等，但本質上都離不開基本的結構，
URL字串編碼
上面的百度搜索 中國 的網址，在瀏覽器輸入框中，可以正常顯示，但是如果把字串復制出來就有點不一樣了，如下所示：
https://www.baidu.com/s?wd=%E4%B8%AD%E5%9B%BD
這是因為漢字字符 中國，被轉義編碼了，
網址字串(url)中，能使用的字符有一定的規定，一般分為元字符和語意字符：
- 元字符：分號(
;)，逗號(,)，斜杠(/)，問號(?)，冒號(:)，at符(@)，and符(&)，等號(=)，加號(+)，美元符號($)，井號(#); - 語意字符：a-z，A-Z，0-9，連詞號(-)，下劃線(_)，點(.)，感嘆號(!)，波浪線(~)，星號(*)，單引號(')，圓括號(())，
如果使用除了以上字符以外的其他字符，則需要對其他字符進行編碼轉義，編碼的規則一般是根據系統的默認編碼，會將每個字符的每個位元組都轉為一個百分號加上兩個大寫十六進制字符，關于轉義編碼的知識可參考博文 前端開發中需要搞懂的字符編碼知識 和 轉義字符在前端開發中的詳細介紹
因此，如果網址字串中存在其他特殊字符時，將被編碼轉義，后面我們在使用 URL 物件處理字串時，將會看到編碼字符，
以上對都是對URL網址字串的介紹，下面將正式介紹JavaScript提供的API，URL物件，
URL
JavaScript中提供URL介面物件，用于決議、規范和編碼網址字串，它能較方便的決議或者修改網址，為我們處理網址字串帶來幫助，URL物件也可以在 Web Worker 和 Nodejs 中使用，
URL提供了建構式，用于回傳一個新創建的URL物件：new URL(url [, base])，
- URL：
表示一個URL網址字串
如果是相對URL，則base作為基準URL
如果是絕對URL，則base將被自動忽略 - base：
一個用于基準的URL網址字串，默認為空，
上面的網址，我們可以創建一個URL物件：
const myUrl = new URL('https://www.baidu.com/s?wd=中國')
在控制臺列印URL實體 myUrl，可以看到該物件的屬性和我們上面提到的URL網址字串結構是一致的，將能夠很方便的用于決議各種網址字串，因為URL物件本身就是會決議網址：
URL實體屬性和方法
下面簡單介紹這些URL物件的實體屬性和方法，
hash：包含'#'的片段識別符號
host：包含域名(主機名|IP地址等)、埠(如有)的字串
hostname：域名(主機名|IP地址等)字串，不包含埠
href：完整的網址字串
origin：只讀，包含協議、域名、埠的字串
password：域名前指定的密碼，現在一般很少見
pathname：以/符號開頭的檔案路徑(大致是域名host以后、引數search之前的部分)
port：埠號字串
protocol：網路協議字串
search：引數字串，包含?符號
searchParams：只讀，URLSearchParams物件，用于訪問引數字串
username：域名前指定的用戶名，現在一般很少見
toString()：完整的網址字串，與URL.href相同
toJSON()：完整的網址字串，與URL.href以及toString()基本相同
實體方法多用于修改和決議網址，方便我們處理；而URL物件還提供了靜態方法，用于創建 Object URL，
URL.createObjectURL()
Object URL 又稱為 Blob URL，是瀏覽器內部生成的一個 URL 到 Blob 的映射，能產生一個URL網址，在當前頁面中加載，
而 URL.createObjectURL()，根據給定物件(一般是 File 或 Blob 物件)，創建一個網址URL，這個URL系結在當前視窗(document)中，關閉當前視窗則失效，
語法：objectURL = URL.createObjectURL(object);
引數可取值：File、Blob 物件，?
const url = URL.createObjectURL(file)
對于檔案，會生成一個url，類似這樣的：blob:http://localhost:8080/29c75da5-9b55-4b9f-2383-1a643c9b5a1c，可以在當前視窗頁面中加載和展示，
當我們呼叫 URL.createObjectURL()時，每次都會新創建一個 Object URL 物件，雖然瀏覽器在當前視窗頁面關閉時會自動釋放該物件，但我們也可以主動釋放，需要呼叫URL物件的另外一個靜態方法：URL.revokeObjectURL()，
URL.revokeObjectURL(url)
以上陳述句即可釋放當前物件，關于這塊內容的知識，可參考之前的博文 前端位元組二進制知識介紹，
URLSearchParams
URLSearchParams 物件專門用于處理url網址資訊中的查詢字串，在網址字串中通常都是 ? 問號之后的內容(不包含問號)，
在URL物件中也有一個屬性 searchParams 回傳該物件，會對查詢字串做決議處理，以等號分割生成對應的 key-value 鍵值對的資料形式，
如下所示：
const myUrl = new URL('https://www.baidu.com/s?wd=中國')
// myUrl.searchParams 回傳的是包含 `wd=中國` 內容的物件
myUrl.searchParams.get('wd') // 輸出：'中國'
URLSearchParams 物件 也可以使用建構式，自定義一個實體：
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 物件提供了多個實體方法，用于讀取或修改查詢字串資料，還提供了三個方法用來對資料進行遍歷，
append()：增加一個新的鍵值引數
delete(key)：洗掉對應的鍵值
get(key)：回傳第一個值
getAll(key)：回傳所有值組成的陣列
has(key)：是否存在某個鍵值
set(key, value)：設定指定的鍵值對引數
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
以上代碼，就是部分方法的使用示例，通過它們我們可以讀取查詢引數、對當前網址的查詢引數進行修改等，除此之外，還可以做為POST異步資料發送給服務器，
作為POST請求的資料引數
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異步請求，發送POST請求，把 URLSearchParams 實體物件作為send函式的引數，可以發送到服務器，
從上圖可見，設定的 URLSearchParams 物件引數，作為POST請求的 Form Data 資料，
Nodejs中也提供有URL和URLSearchParams類物件，并且定義和屬性方法基本都相同，使用方式也都一樣，可以直接使用，減少我們重復學習的成本，
web中的url相關屬性
在瀏覽器環境下，web視窗中定義有多個屬性與url網址相關，如 document 物件就擁有多個屬性，都與URL網址相關，下面可以具體看一下，
document.URL 和 document.documentURI
document.URL
屬性直接回傳當前網頁檔案的url網址字串，
注意它和URL物件不一樣，只回傳一個字串，document.documentURI
屬性也是直接回傳當前檔案的url網址字串，
它倆在網頁(HTML)檔案中，是相等的，都回傳當前網址的字串：
document.documentURI === document.URL
// true
不同之處，在于 documentURI 屬性適用于所有檔案，而 URL 屬性只能在HTML檔案中使用，
document.domain 和 document.referrer
-
document.domain
屬性回傳當前網頁檔案的域名，
如在頁面https://www.baidu.com/s?wd=中國中，document.domain的值則為www.baidu.com， -
document.referrer
屬性回傳跳轉到當前頁面的上一個頁面的網址字串，它針對的是網頁中的跳轉鏈接，如果沒有鏈接跳轉，而直接在瀏覽器輸入框輸入網址則該值為空字串，
location
location 既是window物件也是document物件的屬性，可以直接呼叫，回傳一個 Location 物件，描述當前檔案的URL資訊，它包含的內容更多，
window.location
document.location
// 回傳Location物件
Location物件
Location 物件的屬性，與上面介紹的URL物件是一樣的，可見上文章節 URL實體屬性和方法，
Location物件擁有獨特的方法，可以對當前頁面網址進行各種操作：
- location.assign(url)：跳轉到另一個網址
- location.reload(boolean)：重新加載當前網址，引數為true時就從服務器加載，引數為false則從快取中加載
- location.replace(url)：用引數給定的網址替換當前頁面，并且不會記錄到歷史會話中，瀏覽器后退按鈕功能就無用
- location.toString()：回傳當前網頁，與
location.href相同
給location賦值
也可給location屬性直接賦值，如果給它一個網址，就會跳轉到該網址，與給 location.href 賦值效果一樣：
location = 'https://baidu.com'
location.href = 'https://baidu.com'
// 也可以使用相對URL
location = 'other.html'
// 指定錨點，瀏覽器會自動滾動到頁面錨點處
location = '#footer'
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553707.html
標籤：其他
上一篇：JS中的arguments
下一篇：返回列表