在项目开发过程中,某些时候,我们需要获取地址栏的参数,其实就相当于get发送请求时,所带的参数。
这种参数基本上就是一个包含"? = &"这三中符号的字符串,要把这种字符串转换为对象,我们需要做的其实也就很简单了。
1、首先剔除获取到的字符串中的第一个“?”,他仅仅是参数标识符,多数情况下,我们也不会再参数的key或者value上带上参数;
2、使用字符串方法split,将多个参数断开;
3、对多个参数循环遍历,获取各自的key和value。
我们以百度搜索的一个搜索结果页面为例:
https://www.baidu.com/s?wd=%E6%98%A5%E8%BF%90&rsv_spt=1&rsv_iqid=0xb18a2f8f000581d8&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=10&rsv_sug1=15&rsv_sug7=100&rsv_sug2=0&inputT=3554&rsv_sug4=5757
就是这么个字符串,按照上面给出的方案,进行转换。为了方便后续的复用,我们封装成一个函数。
function transformParams() {
return location.search.substring(1).split('&').map(item => {
var items = item.split("=")
return {
[items[0]]: +items[1] == items[1] ? +items[1] : decodeURIComponent(items[1])
}
})
}
稍作解释一下,location.search 返回的是URL的查询字符串,这个字符串以问号开头,这里返回的就是"?wd=春运&rsv_spt=1&rsv_iqid=0xb18a2f8f000581d8&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=10&rsv_sug1=15&rsv_sug7=100&rsv_sug2=0&inputT=3554&rsv_sug4=5757"
location.search.substring(1)是利用的字符串方法substring,这里是截取第一个字符"?"之后的字符串,如有不明的话,可以参阅String.prototype.substring(),并顺带了解字符串方法slice和substr,在这里这三个方法无论使用哪个,结果都是一样的。
紧接着,利用split分割字符串,成为一个数组,形成["wd=%E6%98%A5%E8%BF%90", "rsv_spt=1", "rsv_iqid=0xb18a2f8f000581d8", "issp=1", "f=8", "rsv_bp=0", "rsv_idx=2", "ie=utf-8", "tn=baiduhome_pg", "rsv_enter=1", "rsv_sug3=10", "rsv_sug1=15", "rsv_sug7=100", "rsv_sug2=0", "inputT=3554", "rsv_sug4=5757"]这么个数组,再循环改数组,以“=”号分割字符串,前面的就是对象中的key,后面的就是value。为了避免一些转码的value值,利用decodeURIComponent解码一下。
我这里加的一个三目运算符,进行判断的是,如果value值,可以转换成数字,那就将其转换成数字类型,是否转换,除了返回对象的值的类型不一样之外,其他并无任何影响。
换一种方案的话,就是在遍历数组的时候,数组当中每一个值,利用字符串的indexOf查找“=”的位置,前面的是key,后面的是value。
function transformParams() {
var params = location.search.substring(1);
return params.split('&').map(item => {
var index = item.indexOf('=')
if (index == -1) {
return {
[item]: null
}
}
var key = item.slice(0, index);
val = item.slice(index + 1)
return {
[key]: val
}
})
}
这里添加的判断条件index==1,目的是防止,仅仅传递了key值,而没有传递value。
还需要关注的一点是,我在return的时候,都是利用[item]作为key值的,而没有直接写{item: value},因为这里的item是个变量,所以必须使用[item],请谨记。