原创

使用ES6 简单方便的从 URL 中获取指定的参数

温馨提示:
本文最后更新于 2022年12月12日,已超过 551 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

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() 输出的内容也不会包含 ?

正文到此结束
该篇文章的评论功能已被站长关闭
本文目录