關于JavaScript中URL對象的一些妙用

更新時間：2021年10月08日 14:34:21 作者：鳳晴鈴玉

avaScript URL() 構造函數返回一個新創(chuàng)建的 URL 對象,表示由一組參數定義的 URL,利用該構造函數可以獲取 RL的查詢、參數等,下面這篇文章主要給大家介紹了關于JavaScript URL對象的一些妙用,需要的朋友可以參考下

前言

URL 對象可能頁端用的比較少一點，一般來說，頁端對 URL 的操作，大部分都是解析 URL 參數，解析 URL 參數有比較多的庫可以選，比如 qs，或者用瀏覽器原生的 URLSearchParams

// 假設當前的 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 一樣獲取一個對象，可以這樣做
const params = Object.fromEntries(entries);
// {a: 'c', b: '2'}

解析參數

通過 URLSearchParams 解析參數，和 URL 這個對象看起來關聯不是很大，但是可以看下 URL 對象實例化之后返回的對象

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

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

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

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

修改 URL 參數

淡出的解析參數，沒必要動用 URL，用 URLSearchParams 這個對象完全是足夠的，那么這個 URL 對象還可以做什么呢，其實可以想想 URLSearchParams 其實提供了 set append 這些寫操作，同時，URL 對象返回的屬性也是可以修改的，能不能通過修改 URL 里面的參數，實現修改一個 URL 或者說生成一個 URL ，畢竟很多時候，對 URL 的修改停留在字符串操作上，操作起來也很危險，很容易報錯

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