使用ES6 简单方便的从 URL 中获取指定的参数
温馨提示:
本文最后更新于 2022年12月12日,已超过 289 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我。
ES6 提供了 URLSearchParams 对象,可以接收一个 URL
的查询字符串。
如果将 window.location.search
传入后,再通过实体的 get()
方法。
就可以简单方便地获取当前页面路径中对应参数的值。
// 假设当前页面链接为:
// https://92cxy.cn/?name=wxd&age=22&book=ceshi&book=wangxiaodong
const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get("name"));
// wxd
console.log(searchParams.get("age"));
// 22
console.log(searchParams.getAll('book'));
// ['ceshi', 'wangxiaodong']
window.location.search
获取到的值是从 ?
开始的字符串。而URLSearchParams
会自动移除字符串起始位置的 ?
。
URLSearchParams
除了可以方便地获取 URL
参数外,也能方便地修改参数。
// 假设当前页面链接为:
// https://92cxy.cn/?name=wxd&age=22&book=ceshi&book=wangxiaodong&lang=zh_CN
const searchParams = new URLSearchParams(window.location.search);
// 添加参数
searchParams.append("foo", "bar");
// 删除参数
searchParams.delete("lang");
// 输出
searchParams.toString();
// "name=wxd&age=22&book=ceshi&book=wangxiaodong&lang=zh_CN"
另外toString()
输出的内容也不会包含 ?
。
正文到此结束
- 本文标签: JavaScript Html 前端
- 本文链接: http://www.92cxy.cn/article/73
- 版权声明: 本文由王小东原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
相关文章
该篇文章的评论功能已被站长关闭