在开发小程序的时候,发现我们获取到的path不包括其中的参数,但是微信小程序是将参数作为query对象过来,这对于我们做路径二次跳转的时候及不方便,我们在取到query时将其转换为URL参数和path拼装起来就是一个完整的路径。
JS 对象转URL参数
这里我们来看一个测试:
假如我们进入小程序时取到了如下参数
path: "pages/new/info", query: { news_id: "144", scorce: "seo" }
对于这样的地址,我们需要将其拼装起来,那么就需要将query对象转换成news_id=114&scorce=seo这样的格式。
第一种方式:正则表达式替换
第一种方式就是将其转换为字符串利用正则表达式将:转换为=,将 "转换为空,将,转换为&,再去掉两端的{} 就是一个完整的news_id=114&scorce=seo格式
看下过程
let query = {news_id: "144", scorce: "seo"} let query_str = JSON.stringify(query) console.log(query_str) // {"news_id":"144","scorce":"seo"} let query_str_a = query_str.replace(/:/g,"=") console.log(query_str_a) //{"news_id"="144","scorce"="seo"} let query_str_b = query_str_a.reolace(/"/g, ''), console.lgo(quert_str_b) //{news_id=144,scorce=seo} let query_str_c = query_str_b.reolace(/,/g, '&') console.log(quert_str_c) //{news_id=144&scorce=seo} //去掉{} let query_str_d = query_str_c.match(/\{([^)]*)\}/) console.log(query_str_d[1]) //news_id=144&scorce=seo
我们得到了news_id=144&scorce=seo这样的数据格式,然后和path拼接可以得到一个完整的URL pages/new/info?news_id=144&scorce=seo
但是这种方法代码太多,只是可以参考
遍历循环处理
convertObj(data) { var _result = []; for (var key in data) { var value = data[key]; if (value.constructor == Array) { value.forEach(function(_value) { _result.push(key + "=" + _value); }); } else { _result.push(key + '=' + value); } } return _result.join('&'); }, console.log(convertObj(query)) //news_id=144&scorce=seo
此方法利用了遍历对象进行拼凑,将数据转换为key=value 的格式,然后将局中的= 转换为&,次方法是比较简单命令的一种。
JS将URL参数转换为对象
第一种
和对象转换为URL参数的正则处理相反,可以参考
截取、遍历
将URL中?后面的字符获取到,将其使用split('&') 转换为一个数组格式的数据,然后对数据进行循环,处理其中的=,根据=将其转换为两个数据,下标为[0]作为对象的key,下标为[1]则是key对应的值。
总结为以下方法
function urlToObj(str){ var obj = {}; var arr1 = str.split("?"); var arr2 = arr1[1].split("&"); for(var i=0 ; i < arr2.length; i++){ var res = arr2[i].split("="); obj[res[0]] = res[1]; } return obj; } console.log(urlToObj('https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd=%E7%99%BE%E5%BA%A6')) //{ie: "utf-8", f: "3", rsv_bp: "1", tn: "baidu", wd: "%E7%99%BE%E5%BA%A6"}