徹底搞懂瀏覽器地址欄url是什么？

時間：2023-01-30 20:00:01 | 來源：建站知識

時間：2023-01-30 20:00:01 來源：建站知識

當我們使用瀏覽器進行網(wǎng)絡沖浪的時候，我們訪問的內(nèi)容是從哪里出現(xiàn)的呢？沒錯，就是瀏覽器地址欄出現(xiàn)的那一串東東標識的位置，習慣上我們將其稱為URL。

用途

它的全稱是：統(tǒng)一資源定位符（Uniform Resource Locator），顧名思義就是標識某個資源的位置。就像每家每戶都有一個門牌地址一樣，每個網(wǎng)頁也都有一個Internet地址。當你在瀏覽器的地址框中輸入一個URL時，就確定了要瀏覽的地址。

URL的常見格式：

protocol://host[:port]/path/[?query]#fragment

屬性的詳細說明：

組成	說明
protocol	訪問服務器獲取資源時使用的協(xié)議
user	訪問資源時使用的用戶名
password	用戶的密碼，和用戶名使用:分割
host	資源服務器域名或IP地址
port	資源服務器監(jiān)聽的端口，不同的協(xié)議有不同的默認端口（HTTP使用80作為默認端口，HTTPS使用443作為端口）
path	資源路徑
query	查詢參數(shù)。以 ? +鍵值對的形式表示，多個鍵值對通過 & 符號分隔
fragment	片段 # 后面的內(nèi)容，常見于鏈接，錨點

當然了，還有一些不常見的格式，比如：

protocol://user:password@host:port/path;params?query#fragment

可以發(fā)現(xiàn)這里多了user:password和;params，二者表示訪問資源時使用的用戶名密碼和某些情況下使用逗號分割的參數(shù)，不太常見，有興趣自己了解下。

字符

URL是使用 ASCII 進行編碼的，所以有些內(nèi)容是不支持的，例如中文， URL會使用編碼的手段將其轉義為可解釋內(nèi)容。

在URL中，合法字符分成兩類。

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

除了以上字符，其他字符出現(xiàn)在 URL 之中都必須轉義，規(guī)則是根據(jù)操作系統(tǒng)的默認編碼，將每個字節(jié)轉為百分號（%）加上兩個大寫的十六進制字母。

比如，UTF-8 的操作系統(tǒng)上，http://www.example.com/q=春節(jié)這個 URL 之中，漢字“春節(jié)”不是 URL 的合法字符，所以被瀏覽器自動轉成http://www.example.com/q=%E6%98%A5%E8%8A%82。其中，“春”轉成了%E6%98%A5，“節(jié)”轉成了%E8%8A%82。這是因為“春”和“節(jié)”的 UTF-8 編碼分別是E6 98 A5和E8 8A 82，將每個字節(jié)前面加上百分號，就構成了 URL 編碼。

JavaScript 提供四個 URL 的編碼/解碼方法。

• encodeURI()
• encodeURIComponent()
• decodeURI()
• decodeURIComponent()

encodeURI()

encodeURI()方法用于轉碼整個 URL。它的參數(shù)是一個字符串，代表整個 URL。它會將元字符和語義字符之外的字符，都進行轉義。

encodeURI('http://www.example.com/q=春節(jié)')// "http://www.example.com/q=%E6%98%A5%E8%8A%82"encodeURIComponent()

encodeURIComponent()方法用于轉碼 URL 的組成部分，會轉碼除了語義字符之外的所有字符，即元字符也會被轉碼。所以，它不能用于轉碼整個 URL。它接受一個參數(shù)，就是 URL 的片段。

encodeURIComponent('春節(jié)') // "%E6%98%A5%E8%8A%82" encodeURIComponent('http://www.example.com/q=春節(jié)') // "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"

decodeURI()

decodeURI()方法用于整個 URL 的解碼。它是encodeURI()方法的逆運算。它接受一個參數(shù)，就是轉碼后的 URL。

decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82') // "http://www.example.com/q=春節(jié)"

decodeURIComponent()

decodeURIComponent()用于URL 片段的解碼。它是encodeURIComponent()方法的逆運算。它接受一個參數(shù)，就是轉碼后的 URL 片段。

decodeURIComponent('%E6%98%A5%E8%8A%82') // "春節(jié)"

URL函數(shù)

瀏覽器原生提供URL()接口，它是一個構造函數(shù)，用來構造、解析和編碼 URL。一般情況下，通過 window.URL 可以拿到這個構造函數(shù)。

URL()作為構造函數(shù)，可以生成 URL 實例。它接受一個表示 URL 的字符串作為參數(shù)。如果參數(shù)不是合法的 URL，會報錯。

var url = new URL('http://www.example.com/index.html'); url.href // "http://www.example.com/index.html"也可以將URL的實例作為參數(shù)傳入：

var urlclone = new URL(url); urlclone // "http://www.example.com/index.html"如果 URL 字符串是一個相對路徑，那么需要表示絕對路徑的第二個參數(shù)，作為計算基準。

var url1 = new URL('index.html', 'http://example.com'); url1.href // "http://example.com/index.html" var url2 = new URL('page2.html', 'http://example.com/page1.html'); url2.href // "http://example.com/page2.html" var url3 = new URL('..', 'http://example.com/a/b.html') url3.href // "http://example.com/" var url4 = new URL('..', 'http://example.com/a/b/c/d.html') url3.href // 'http://example.com/a/b/'上面代碼中，返回的 URL 實例的路徑都是在第二個參數(shù)的基礎上，切換到第一個參數(shù)得到的。最后兩個例子里面，第一個參數(shù)是..，表示上層路徑。

屬性

URL 實例的屬性與Location對象的屬性基本一致，返回當前 URL 的信息。

• URL.href：返回整個 URL
• URL.protocol：返回協(xié)議，以冒號:結尾
• URL.hostname：返回域名
• URL.host：返回域名與端口，包含:號，默認的80和443端口會省略
• URL.port：返回端口
• URL.origin：返回協(xié)議、域名和端口
• URL.pathname：返回路徑，以斜杠/開頭
• URL.search：返回查詢字符串，以問號?開頭
• URL.searchParams：返回一個URLSearchParams實例，該屬性是Location對象沒有的?
• URL.hash：返回片段識別符，以井號#開頭
• URL.password：返回域名前面的密碼
• URL.username：返回域名前面的用戶名

同 location 一樣，只有 origin 屬性是只讀的。

通過該方法解析任意一個網(wǎng)址信息：

/** * 解析URL信息的函數(shù) * @param {string} url * @returns {protocol, username, password, hostname, port, pathname, search, hash} */ function toUrlObj(url) { return new URL(url); } let urlParse = toUrlObj("http://www.bufanui.com/project/h5?name=libai&age=24#aaa"); console.log(urlParse.pathname); // 獲取路徑 console.log(urlParse.search); // 獲取查詢參數(shù)

方法

（1）URL.createObjectURL()

URL.createObjectURL()方法用來為上傳/下載的文件、流媒體文件生成一個 URL 字符串。這個字符串代表了File對象或Blob對象的 URL。

<input type="file" class="ipt" accept="image/*" multiple> <div class="box"> </div>


let box = document.querySelector('.box'), ipt = document.querySelector(".ipt"); ipt.onchange = function () { for (var i = 0; i < this.files.length; i++) { let imgEl = document.createElement('img'); imgEl.src = URL.createObjectURL(this.files[i]); box.append(imgEl); } }


上面代碼中，URL.createObjectURL()方法用來為上傳的文件生成一個 URL 字符串，作為<img>元素的圖片來源。

該方法生成的 URL 就像下面的樣子。

blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1注意，每次使用URL.createObjectURL()方法，都會在內(nèi)存里面生成一個 URL 實例。如果不再需要該方法生成的 URL 字符串，為了節(jié)省內(nèi)存，可以使用URL.revokeObjectURL()方法釋放這個實例。

（2）URL.revokeObjectURL()

URL.revokeObjectURL()方法用來釋放URL.createObjectURL()方法生成的 URL 實例。它的參數(shù)就是URL.createObjectURL()方法返回的 URL 字符串。

下面為上一段的示例加上URL.revokeObjectURL()。

let box = document.querySelector('.box'), ipt = document.querySelector(".ipt"); ipt.onchange = function () { for (var i = 0; i < this.files.length; i++) { let imgEl = document.createElement('img'); imgEl.src = URL.createObjectURL(this.files[i]); box.append(imgEl); imgEl.onload = function() { URL.revokeObjectURL(this.src); } } }上面代碼中，一旦圖片加載成功以后，為本地文件生成的 URL 字符串就沒用了，于是可以在img.onload調函數(shù)里面，通過URL.revokeObjectURL()方法卸載這個 URL 實例。

URLSearchParams 對象

URLSearchParams對象是瀏覽器的原生對象，用來構造、解析和處理 URL 的查詢字符串（即 URL 問號后面的部分）。

它本身也是一個構造函數(shù)，可以生成實例。參數(shù)可以為查詢字符串，起首的問號?有沒有都行，也可以是對應查詢字符串的數(shù)組或對象。

// 方法一：傳入字符串var params = new URLSearchParams('?foo=1&bar=2');// 等同于var params = new URLSearchParams(document.location.search);// 方法二：傳入數(shù)組var params = new URLSearchParams([['foo', 1], ['bar', 2]]);// 方法三：傳入對象var params = new URLSearchParams({'foo' : 1 , 'bar' : 2});URLSearchParams會對查詢字符串自動編碼。

var params = new URLSearchParams({'foo': '你好'});params.toString() // "foo=%E4%BD%A0%E5%A5%BD"上面代碼中，foo的值是漢字，URLSearchParams對其自動進行 URL 編碼。

瀏覽器向服務器發(fā)送表單數(shù)據(jù)時，可以直接使用URLSearchParams實例作為表單數(shù)據(jù)。

const params = new URLSearchParams({foo: 1, bar: 2});fetch('https://example.com/api', { method: 'POST', body: params}).then(...)上面代碼中，fetch命令向服務器發(fā)送命令時，可以直接使用URLSearchParams實例。

URLSearchParams 可以與 URL() 接口結合使用。

var url = new URL(window.location);var foo = url.searchParams.get('foo') || 'somedefault';上面代碼中，URL 實例的searchParams屬性就是一個URLSearchParams實例，所以可以使用URLSearchParams接口的get方法。

URLSearchParams實例有遍歷器接口，可以用for...of循環(huán)遍歷（詳見《ES6 標準入門》的《Iterator》一章）。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});for (var p of params) { console.log(p[0] + ': ' + p[1]);}// foo: 1// bar: 2URLSearchParams沒有實例屬性，只有實例方法。

var url = new URL('https://example.com?foo=1&bar=2');

• toString 方法返回實例的字符串形式:

url.searchParams.toString();// foo=1&bar=2需要字符串的場合，會自動調用toString方法。

var str = "?" + url.searchParams; str // ?foo=1&bar=2

• append 方法用來追加一個查詢參數(shù)。它接受兩個參數(shù)，第一個為鍵名，第二個為鍵值，沒有返回值。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});params.append('baz', 3);params.toString() // "foo=1&bar=2&baz=3"append()方法不會識別是否鍵名已經(jīng)存在。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});params.append('foo', 3);params.toString() // "foo=1&bar=2&foo=3"

• 上面代碼中，查詢字符串里面foo已經(jīng)存在了，但是append依然會追加一個同名鍵。
  
• delete() 方法用來刪除指定的查詢參數(shù)。它接受鍵名作為參數(shù)。
  

var params = new URLSearchParams({'foo': 1 , 'bar': 2});params.delete('bar');params.toString() // "foo=1"

• has()方法返回一個布爾值，表示查詢字符串是否包含指定的鍵名。
  

var params = new URLSearchParams({'foo': 1 , 'bar': 2});params.has('bar') // trueparams.has('baz') // false

• set()方法用來設置查詢字符串的鍵值。
  它接受兩個參數(shù)，第一個是鍵名，第二個是鍵值。如果是已經(jīng)存在的鍵，鍵值會被改寫，否則會被追加。
  

var params = new URLSearchParams('?foo=1');params.set('foo', 2);params.toString() // "foo=2"params.set('bar', 3);params.toString() // "foo=2&bar=3" 如果有多個的同名鍵，set會移除現(xiàn)存所有的鍵。


var params = new URLSearchParams('?foo=1&foo=2');params.set('foo', 3);params.toString() // "foo=3"

• get()方法用來讀取查詢字符串里面的指定鍵。它接受鍵名作為參數(shù)。如果指定的鍵名不存在，返回值是null。
  

var params = new URLSearchParams('?foo=1');params.get('foo') // "1"params.get('bar') // null 如果有多個的同名鍵，get返回位置最前面的那個鍵值。


var params = new URLSearchParams('?foo=3&foo=2&foo=1');params.get('foo') // "3"

• getAll()方法返回一個數(shù)組，成員是指定鍵的所有鍵值。它接受鍵名作為參數(shù)。
  

var params = new URLSearchParams('?foo=1&foo=2');params.getAll('foo') // ["1", "2"]

• sort()方法對查詢字符串里面的鍵進行排序，規(guī)則是按照 Unicode 碼點從小到大排列。
  該方法沒有返回值，或者說返回值是undefined。
  

var params = new URLSearchParams('c=4&a=2&b=3&a=1');params.sort();params.toString() // "a=2&a=1&b=3&c=4"上面代碼中，如果有兩個同名的鍵a，它們之間不會排序，而是保留原始的順序。
keys()、values()、entries() 三個方法都返回一個遍歷器對象，供for...of循環(huán)遍歷。它們的區(qū)別在于，keys方法返回的是鍵名的遍歷器，values方法返回的是鍵值的遍歷器，entries返回的是鍵值對的遍歷器。

var params = new URLSearchParams('a=1&b=2');for(var p of params.keys()) { console.log(p);}// a// bfor(var p of params.values()) { console.log(p);}// 1// 2for(var p of params.entries()) { console.log(p);}// ["a", "1"]// ["b", "2"]總結: 這里總結了幾乎所有的方法，但其實很多方法都是不需要我們完全背下來的。 你只需要搞明白url是什么，以及結構是什么。如果用到哪個參數(shù)是不是只需要查詢文檔就行了呢？一篇文章讓你徹底弄懂URL。