js获取当前url地址参数中文乱码问题

　　不知道从什么时候起，百度出来的回答大部分都是博客园的文章了，就拿本章的问题查找的答案来说，内容大部分没区别，而且所答非所问，明明帖子的问题是url地址栏的中文乱码问题，但是回答的都什么云里雾里的，复制粘贴也不粘点质量高的。

　　项目中的页面跳转后获取url参数的问题，因为是抽取出来的放到独立页面上的模块，貌似没办法用 angular 本身自带的 $stateParams 来获取跳转携带参数，只能通过当前页面的url获取，window.location.href 。

　　项目中支持通话列表表格内容单项双击跳转打开新页面，后来抽出独立页面也支持了url地址栏直接输入接口跟参数直接跳转，参数也有中文情况，传输中文时遇到了点小问题：前台底层获取的url的中文是乱码。

　　开始以为是后台请求接口时，中文参数转码有问题，前台是有封装一个获取并整理url参数到一个对象的方法的，输出后的对象中对应中文的属性值完全是乱码，怎么办呢？解吧，decodeURI，没解开。后来看封装好的获取参数整理成一个对象的方法时，发现了问题，居然将获取的值进行了两次转码，好坑呀~

　　这里记录一下前台解析url整理成对象的方法。

 

//首先获取到当前页面的地址栏信息
var url = window.location.href;
console.log(url);

var obj = {};
var reg = /\?/;
if(url.match(reg)) {
    //判断传入参数，以问号截取，问号后是参数
    var chars = url.split('?')[1];

    //再截&号
    var arr = chars.split('&');

    //获得截取后的数组为键值对字符串
    for (var i = 0; i < arr.length; i++) {

        //保守一点确定看是否为 name=value形式
        var num = arr[i].indexOf("=");

        if (num > 0) {
            //拼接字符串
            var name = arr[i].substring(0, num);
            var value = arr[i].substr(num + 1);

            //拼接对象，并转码
            obj[decodeURIComponent(name)] = decodeURIComponent(value);
        }
    }
}
console.log(obj);

 

最后存储对象属性时，可以不对 name 进行转码，因为一般 name 都为 key 值，通过使用 key 来获得其对应的 value ，所以 value 的值才是广泛的多样的，会有中文值的可能，但是估计不会有后台将 key 值也存成中文，谁见过键值对中 key 是用中文来使用的？

 

 

2021-03-29

包装成方法及优化，避免相关 obj 被污染，可以使用闭包

function handleParamsFnc(){
    var args = {};
    var readyToGet = false;
            
    return function (attr) {
        if (!readyToGet) {
            var qs = location.search.length ? location.search.substring(1) : '';
            var items = qs.length ? qs.split('&') : [];
            items.map((data) => {
                var values = data.split('=');
                var key = decodeURIComponent(values[0]);
                args[key] = decodeURIComponent(values[1]);
            });
            readyToGet = true;
        }
        return args[attr];
    }
}
    
var getValueByAttr = handleParamsFnc();
console.log(getValueByAttr('name'));
console.log(getValueByAttr('age'));