关于JavaScript中URL对象的一些妙用

 更新时间:2021年10月08日 14:34:21   作者:凤晴铃玉  
avaScript URL() 构造函数返回一个新创建的 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

总结

URL 对象在操作 URL 里面还是比较方便的,简单封装一下可以少引很多包了,变通一下,可以反过来修改 URL 。这个对象在浏览器里面可以使用,但是可能面临着兼容性问题,如果是桌面端,放心用(IE 是啥),如果是移动端,可能需要配置polyfill。这个对象在 deno 中也能使用

到此这篇关于JavaScript URL对象的一些妙用的文章就介绍到这了,更多相关JavaScript URL对象妙用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • tracking.js页面人脸识别插件使用方法

    tracking.js页面人脸识别插件使用方法

    这篇文章主要为大家详细介绍了tracking.js页面识别人脸插件使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 一个js导致的jquery失效问题的解决方法

    一个js导致的jquery失效问题的解决方法

    这篇文章主要介绍了一个js导致的jquery失效问题的解决方法,有需要的朋友可以参考一下
    2013-11-11
  • js实现点击后将文字或图片复制到剪贴板的方法

    js实现点击后将文字或图片复制到剪贴板的方法

    这篇文章主要介绍了js实现点击后将文字或图片复制到剪贴板的方法,功能非常实用,需要的朋友可以参考下
    2014-08-08
  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    大家经常看到网页里图片渐变显示,自己写一个。原理很简单就是修改元素的css透明度,具体实现代码如下,感兴趣的各位可以参考下哈,希望对大家有所帮助
    2013-06-06
  • js函数返回多个返回值的示例代码

    js函数返回多个返回值的示例代码

    js函数一般都是返回一个值,在本例教程中将为大家介绍下如何返回多个返回值,喜欢的朋友可以了解下
    2013-11-11
  • JS自动生成动态HTML验证码页面

    JS自动生成动态HTML验证码页面

    这篇文章主要介绍了JS自动生成动态HTML验证码页面,输入错误自动清空输入框的功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 你应该了解的JavaScript Array.map()五种用途小结

    你应该了解的JavaScript Array.map()五种用途小结

    大家都知道map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。下面这篇文章主要给大家介绍了关于JavaScript Array.map()的五种用途,需要的朋友可以参考下
    2018-11-11
  • 微信小程序 获取手机号 JavaScript解密示例代码详解

    微信小程序 获取手机号 JavaScript解密示例代码详解

    这篇文章主要介绍了微信小程序 获取手机号 JavaScript解密的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 微信JSSDK上传图片

    微信JSSDK上传图片

    做过微信开发的都知道,在部分android机型里微信不支持网页上传图片的,这是由于这些机型的文件上传存在内存泄漏,会导致微信闪退,所以微信内置浏览器将文件上传屏蔽,本篇文章给大家介绍使用微信jssdk如何上传图片,需要的朋友可以关注下
    2015-08-08
  • ES6中javascript实现函数绑定及类的事件绑定功能详解

    ES6中javascript实现函数绑定及类的事件绑定功能详解

    这篇文章主要介绍了ES6中javascript实现函数绑定及类的事件绑定功能,结合实例形式分析了ES6中函数绑定及类的事件绑定原理、实现方法、相关操作技巧与注意事项,需要的朋友可以参考下
    2017-11-11

最新评论