|
前言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'); // 1const bParam = b.get('b'); // 2const 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=testa.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对象妙用内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
React Native项目中使用Lottie动画的方法
Vue常用指令v-if与v-show的区别浅析 |
