關于JavaScript中URL對象的一些妙用
前言
URL 對象可能頁端用的比較少一點，一般來說，頁端對 URL 的操作，大部分都是解析 URL 參數(shù)，解析 URL 參數(shù)有比較多的庫可以選，比如 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'}
解析參數(shù)
通過 URLSearchParams 解析參數(shù)，和 URL 這個對象看起來關聯(lián)不是很大，但是可以看下 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 對象。所以獲取參數(shù)的操作，其實也有一個方法是通過 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 參數(shù)
淡出的解析參數(shù)，沒必要動用 URL，用 URLSearchParams 這個對象完全是足夠的，那么這個 URL 對象還可以做什么呢，其實可以想想 URLSearchParams 其實提供了 set append 這些寫操作，同時，URL 對象返回的屬性也是可以修改的，能不能通過修改 URL 里面的參數(shù)，實現(xiàn)修改一個 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
總結
URL 對象在操作 URL 里面還是比較方便的，簡單封裝一下可以少引很多包了，變通一下，可以反過來修改 URL 。這個對象在瀏覽器里面可以使用，但是可能面臨著兼容性問題，如果是桌面端，放心用（IE 是啥），如果是移動端，可能需要配置polyfill。這個對象在 deno 中也能使用
到此這篇關于JavaScript URL對象的一些妙用的文章就介紹到這了,更多相關JavaScript URL對象妙用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
微信小程序實現(xiàn)swiper切換卡內嵌滾動條不顯示的方法示例
這篇文章主要介紹了微信小程序實現(xiàn)swiper切換卡內嵌滾動條不顯示的方法,涉及微信小程序swiper選項卡組件相關操作技巧,需要的朋友可以參考下2018-12-12
用js實現(xiàn)計算加載頁面所用的時間的代碼，需要的朋友可以參考下。2010-04-04
突然問起我以前的函數(shù)，我也會愣一下，心想，真爛！我總是喜歡把最好的東西分享給大家的，以前的大家忘掉吧。2010-03-03
JavaScript實現(xiàn)模態(tài)對話框實例
這篇文章主要介紹了JavaScript實現(xiàn)模態(tài)對話框實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了JS簡單表單驗證功能,結合完整實例形式分析了JavaScript表單驗證相關的字符串判斷、正則驗證、計算等相關操作技巧,需要的朋友可以參考下2020-01-01
input標簽的輸入值通過js進行獲取，部分標簽和類是封裝在框架內的，其效果和html標簽差不多，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了通過js實現(xiàn)的，當鼠標移到圖片上變大顯示而不是放大鏡效果,需要的朋友可以參考下2014-06-06
基于JavaScript實現(xiàn)圖片連播和聯(lián)級菜單實例代碼
這篇文章主要介紹了基于JavaScript實現(xiàn)圖片連播和聯(lián)級菜單實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-07-07
用javascript父窗口控制只彈出一個子窗口...2007-04-04
JS數(shù)組操作大全對象數(shù)組根據(jù)某個相同的字段分組
這篇文章主要介紹了JS數(shù)組操作大全對象數(shù)組根據(jù)某個相同的字段分組,需要注意的是，在開發(fā)過程這種數(shù)組的處理函數(shù)，應當被編寫到項目的公共工具函數(shù)庫中全局調用，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-11-11