JavaScript URL对象妙用 关于JavaScript中URL对象的一些妙用
凤晴铃玉 人气:0想了解关于JavaScript中URL对象的一些妙用的相关内容吗,凤晴铃玉在本文为您仔细讲解JavaScript URL对象妙用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:javascript,url对象,js解析url参数为对象,js解析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
总结
URL 对象在操作 URL 里面还是比较方便的,简单封装一下可以少引很多包了,变通一下,可以反过来修改 URL 。这个对象在浏览器里面可以使用,但是可能面临着兼容性问题,如果是桌面端,放心用(IE 是啥),如果是移动端,可能需要配置polyfill。这个对象在 deno 中也能使用
加载全部内容