唯品秀前端博客

这个问题其实是个很常见的问题,而且在面试中也会经常被提起,其实想实现这个需求也比较简单,就是考察下对数据交互处理基本操作,文章后面还会介绍到对应的qs.js插件来帮我们在项目中快速实现解决问题

另外qs.js是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串,或者反过来将一个查询字符串解析成一个object,而且支持复杂的嵌套。它上手很容易

开始转化

1
2
3
4
5
6
7
8
9
10
11
12
function baseUrl() {
    var newObj = new Object();
    var url = location.search; //获取url中"?"符后的字符串
    if (url.indexOf("?") != -1) {
        var strs = url.split("&");
        for (var i = 0; i < strs.length; i++) {
            newObj[strs[i].split("=")[0]] = (strs[i].split("=")[1]) || '';
        }
    }
    return newObj;
}
console.log(baseUrl())

最终结果

注意地址栏带#

在vue默认hash路由情况下上面方式是不行的,因为location.search获取不到带#地址栏想要的字符串信息,修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
var baseUrl = function GetRequest() {
  var theRequest = new Object();
  if (location.href.indexOf("?") != -1) {
      var newUrl = location.hash.split("?");
      newUrl.splice(0,1);
      var strs = newUrl.join().split("&")
      for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
      }
  }
  return theRequest;
}
console.log('1',baseUrl())

qs.js插件

在很多现代框架中,人们习惯于通过一些库来解决常见问题,例如我们可以通过qs.js很轻松就能解析实现上面方法功能,在这里我们列举该插件最常见的两个方法qs.stringify()JSON.stringify()

安装使用

1
2
npm install qs -save
import qs from 'qs';

qs.parse基本用法

qs.parse 方法可以把一段格式化的字符串转换为对象格式,比如:

1
2
3
4
5
6
7
8
9
10
let url = 'https://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
let data = qs.parse(url.split('?')[1]);
// data的结果是
{
    a: 1,
    b: 2,
    c: '',
    d: xxx,
    e: ''
}

qs.stringify基本用法

qs.stringify 则和 qs.parse 相反,是把一个参数对象格式化为一个字符串。

1
2
3
4
5
let params = { c: 'b', a: 'd' };
qs.stringify(params)

// 结果是
'c=b&a=d'

ignoreQueryPrefix和addQueryPrefix

ignoreQueryPrefix这个参数可以自动帮我们过滤掉location.search前面的❓,然后再解析,addQueryPrefix设为true可以在序列化的时候给我们加上?

1
2
3
4
5
6
7
// 解析
Qs.parse('?x=1') // {?x: "1"}
Qs.parse('?x=1', {ignoreQueryPrefix: true}) //  {x: "1"}

// 序列化
Qs.stringify({x: "1"}) //  x=1
Qs.parse({x: "1"}, {addQueryPrefix: true}) //  ?x=1

附:常见获取地址栏信息几个方法

1
2
3
4
5
6
7
8
//设置或获取整个 URL 为字符串。
alert(window.location.href);

//设置或获取 href 属性中在井号“#”后面的分段。
alert(window.location.hash);

//设置或获取 href 属性中跟在问号后面的部分。
alert(window.location.search);
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(10) 打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"JS获取网站地址栏URL中的参数值并转换成json对象"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏