首頁  >  文章  >  web前端  >  JavaScript中URL的相關內容介紹(附程式碼)

JavaScript中URL的相關內容介紹(附程式碼)

不言
不言轉載
2019-03-29 09:31:112153瀏覽

這篇文章帶給大家的內容是關於JavaScript中URL的相關內容介紹(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

伴隨著微信訊息的提示音 小四 發來一段程式碼說 不知道為什麼請求不到頁面資料:

axios.get('users', {
    params: { ids: [1, 2, 3] }
})

小二一看大機率是 query 中數組傳遞方式引起的,由於後端實作解析數組 ids:[5, 6, 100] 可能有以下幾種方式:

bracket: ids[]=1&ids[]=2&ids[]=3
index: ids [0]=1&ids[1]=2&ids[3]=3
comma: ids=1,2,3
none: ids=1&ids=2&ids=3

小四分別測試後便把問題解決了,這也讓小二想起 小熊貓哥哥 在開發的時候,也遇到過這個問題網上一搜發現別人用qs 庫中的 stringify 直接代碼一試沒報錯能運行,不管它的原理是什麼,現在想想挺可怕的。

雖然天天和 URL 打交道但並不是所有人都懂它。

對於為什麼程式碼能運作也不是所有人都會去深究它。

現原形

利用 URL() 物件可以快速的把一個 url位址 打回原形:

腳本

const url = new URL('http://www.pushme.top/users?sort_by=asc#page=userlist')
console.log(url)
輸出
{
    hash: "#page=userlist"
    host: "www.pushme.top"
    hostname: "www.pushme.top"
    href: "http://www.pushme.top/users?sort_by=asc#page=userlist"
    origin: "http://www.pushme.top"
    password: ""
    pathname: "/users"
    port: ""
    protocol: "http:"
    search: "?sort_by=asc"
    searchParams: URLSearchParams {}
    username: ""
}

沒想到吧小小的一段 url地址 裡面居然有這麼多屬性,在這裡主要會講解的 hash 和 search。

推薦打開控制台把腳本運行一下,這樣閱讀的時候就不需要上下對照查看了。

host 和 hostname

眼睛尖的同學肯定發現了 host 和 hostname 居然一模一樣這是為什麼呢?

回想一下開發經常在見到的 localhost:8080,這裡出現了連接埠號 8080 而平時使用造訪一些網站的時候卻沒有帶上連接埠號碼。這是因為 url位址 會預設連接埠號碼為 80,所以你仔細看看會發現上面 port 的值為空。

而 host 和 hostname 的差別便是有 port 的時候 host 會包含連接埠號碼,而 hostname 則不會包含。

protocol 和origin

protocol 指的便是 協議 最常見的有 http 和 https,當然現在瀏覽器再不輸入協議時會自動幫你加上,不過在 URL() 不帶上協議可是會報錯的哦。 origin 則為 protocel 和 host 拼接組成。

search 和 searchParams

基礎

?search=a 中 query 以第一個?開始至行尾或#結束。用於向後端傳遞一些數據,數據使用 & 分隔,數值使用 = 分隔。透過一段程式碼來理解:

const query = 'id=1&sort=asc&hello=world';
// 对 & 分割取得数据对
const data = query.split('&').reduce((data,keyValue) => {
    const [ key, value ] = keyValue.split('=');
    return (data[key] = value, data);
}, {});

// 输出 {id: "1", sort: "asc", hello: "world"}
console.log(data);

這就是 query 最基礎的資料對的組合方式,當然開頭的四種 數組 的表達方式需要另外的處理,無外乎就是對 key 的收集和value 的判斷。不過這部分基本上後端的框架都幫我們處理好了,前端也可以使用 qs、query-string、qss 等函式庫來完成。

題外話:這幾個函式庫程式碼都挺少的,值得一讀說不定有新收穫。

加號與空格

每天使用的 百度 與 谷歌 中不知道大家有沒有主要到這幾個細節:

輸入 https://www.baidu. com/s?wd=小二pushmetop 搜尋框中出現的是小二pushmetop,網址列中url位址的   神奇的變成了 空格。
輸入 https://www.baidu.com/s?wd=小二 pushmetop 搜尋框中出現的是小二 pushmetop,網址列中url位址的 空格 的變成  。
輸入 https://www.baidu.com/s?wd=小二+pushmetop 搜尋框中出現的是小二 pushmetop,網址列中url位址的 + 的變成  。

特定原因可以查看 維基百科 關於 保留字元的百分號編碼 。

URL 編碼

在 掘金 等網站點選連結都會快速的閃現類似 http://www.pushmetop.com?redirect=xxxxx 的 url位址,會發現 redirect 對應的重定向地址會是一堆夾帶 % 的亂碼這是為什麼呢?

讓我們假設需要跳躍的連結是 www.test.com?hello=world&id=1,把整個連結拼接起來則是:

http://www.pushmetop.com?redirect=www.test.com?hello=world&id=1

根據一開始的定義解析值預期值 完全不同了:

解析值
{
    "redirect": "www.test.com?hello=world",
    "id": "1"
}
預期值
{
    "redirect": "www.test.com?hello=world&id=1"
}

為了解決這個問題便誕生了 URL編碼 來解決問題:

encodeURIComponent() 和 decodeURIComponent() 推薦使用。

encodeURI() 和 decodeURI() 比較前者不會對 "; / ? : @ & = $ , #" 這些字元編碼。

escape() 和 unescape() 不建議使用。

範例

let redirect = 'www.test.com?hello=world&id=1';
redirect = encodeURIComponent(redirect);

let url = `http://www.pushmetop.com?redirect=${redirect}`;
url = new URL(url)

// 输出: www.test.com?hello=world&id=1
console.log(url.searchParams.get('redirect'))

hash

#hash 中 fragment 以 # 为开始 行尾 为结束。在 回到顶部 中有提到过利用hash锚点来进行跳转,如果大家注意观察的话会发现 hash 的改变不会引起页面的刷新。

在 Angular.js、Vue Router 等库中,会利用在 html5 中提供了 history 的一系列操作,来帮助我们不刷新页面管理  url。但是在一些旧的浏览器上并不兼容时,会利用 hash 不会主动触发浏览器 reload 的特性来修改 location.hash 来管理路由。 当然 hash 的另外一个特点是可以被保存为书签,也是一大优点。

hash 的小妙用也可以像 query 那样利用 & 和 = 来存取数据,当然你也可以定制属于你的规则。

href 和 pathname

href 为整个 url地址。而 pathname 属性包含 URL 的整个路径部分。它跟在 host (包括 port)后面,排在 query 或 hash 组成部分的前面且被 ASCII 问号(?)或哈希字符(#)分隔。

username 和 password

username 和 password 在日常使用中很少用,它们可以合称为 auth。该字符串跟在 protocol 和双斜杠(如果有)的后面,排在 host 部分的前面且被一个 ASCII 的 at 符号(@)分隔:

http://username:password@www.pushme.top/test/blah?something=123

结尾

本来只是想讨论 hash 和 search ,结果全都过一遍,今天就辛苦大家了。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的的JavaScript教程视频栏目!

以上是JavaScript中URL的相關內容介紹(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除