如何使用JavaScript中URL對(duì)象

這篇文章主要講解了“如何使用JavaScript中URL對(duì)象”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何使用JavaScript中URL對(duì)象”吧！

目錄

• 前言

• 解析參數(shù)
  

• 修改 URL 參數(shù)

前言

URL 對(duì)象可能頁(yè)端用的比較少一點(diǎn)，一般來(lái)說(shuō)，頁(yè)端對(duì) URL 的操作，大部分都是解析 URL 參數(shù)，解析 URL 參數(shù)有比較多的庫(kù)可以選，比如 qs，或者用瀏覽器原生的 URLSearchParams

// 假設(shè)當(dāng)前的 url 為 'https://www.test.com?a=1&b=2'
const b = new URLSearchParams(location.search);
const aParam = b.get('a'); // 1
const bParam = b.get('b'); // 2
const entries = [...b];
// [['a', '1'], ['b', '2']]
// 如果希望可以像 qs.parse 一樣獲取一個(gè)對(duì)象，可以這樣做
const params = Object.fromEntries(entries);
// {a: 'c', b: '2'}

解析參數(shù)

通過(guò) URLSearchParams 解析參數(shù)，和 URL 這個(gè)對(duì)象看起來(lái)關(guān)聯(lián)不是很大，但是可以看下 URL 對(duì)象實(shí)例化之后返回的對(duì)象

const a = new URL('https://www.test.com?a=1&b=2');
// hash: ""
// host: "www.test.com"
// hostname: "www.test.com"
// href: "https://www.test.com/?a=1b=2"
// origin: "https://www.test.com"
// password: ""
// pathname: "/"
// port: ""
// protocol: "https:"
// search: "?a=1&b=2"
// searchParams: URLSearchParams {}
// username: ""
// [[Prototype]]: URL

從返回的對(duì)象可以看到，URL 實(shí)例化之后，返回的屬性 searchParams 實(shí)際上就是一個(gè)實(shí)例化的 URLSearchParams 對(duì)象。所以獲取參數(shù)的操作，其實(shí)也有一個(gè)方法是通過(guò) URL 對(duì)象去獲取，例如上面的操作可以改一下

const a = new URL('https://www.test.com?a=1&b=2');
const entries = [...a.searchParmas];
const params = Object.fromEntries(entries);

// 在瀏覽器控制臺(tái)，一行
[...new URL(location.href).searchParams];

修改 URL 參數(shù)

淡出的解析參數(shù)，沒必要?jiǎng)佑?URL，用 URLSearchParams 這個(gè)對(duì)象完全是足夠的，那么這個(gè) URL 對(duì)象還可以做什么呢，其實(shí)可以想想 URLSearchParams 其實(shí)提供了 set append 這些寫操作，同時(shí)，URL 對(duì)象返回的屬性也是可以修改的，能不能通過(guò)修改 URL 里面的參數(shù)，實(shí)現(xiàn)修改一個(gè) URL 或者說(shuō)生成一個(gè) URL ，畢竟很多時(shí)候，對(duì) URL 的修改停留在字符串操作上，操作起來(lái)也很危險(xiǎn)，很容易報(bào)錯(cuò)

const a = new URL('https://www.test.com?a=1&b=2');
a.searchParams.set('a', '18');
a.searchParams.set('b', '14');
a.searchParams.set('c', 'test');
let newURL = a.toString(); // https://www.test.com/?a=18&b=14&c=test
a.hash = 'hasha';
newURL = a.toString(); // 'https://www.test.com/?a=18&b=14&c=test#hasha'
a.host = 'www.init.com';
newURL = a.toString(); // https://www.init.com/?a=18&b=14&c=test#hasha

感謝各位的閱讀，以上就是“如何使用JavaScript中URL對(duì)象”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何使用JavaScript中URL對(duì)象這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！