URLSearchParams 接口定义处理 URL 参数串

基本使用方法如下

复制代码
/*
* URLSearchParams属性
* @语法:new URLSearchParams(parameter);
*/
(function(){
    var str = "http://www.domain.com/?user=Alan&id=123&id=456";
    var searchParams = new URLSearchParams(str);
    // let...of 语法(迭代对象)
    for(let p of searchParams){
        // console.log(p);
    }
/*
* URLSearchParams.append()
* @添加新的key/value到URL中
*/
    searchParams.append("city", encodeURIComponent("深圳"));

/*
* URLSearchParams.has()
* @查询是否存在,返回一个boolean值
*/
    searchParams.has("id");     // true
/*
* URLSearchParams.get()
* @返回相关联的第一个值
*/
    searchParams.get("id");     // 123

/*
* URLSearchParams.getAll()
* @返回所有相同key的值
*/
    searchParams.getAll("id");  // ["123", "456"]

/*
* URLSearchParams.set()
* @设置key的value值,如果有多个,删除其他的
*/
    searchParams.set("id", "789");

/*
* searchParams.delete()
* @删除所有参数列表key与value值,重复的key都被删除
*/
    searchParams.delete("id");

/*
* searchParams.entries()
* @返回所有键值对key/value
*/
    for(let pair of searchParams.entries()){
        console.log(pair[0]+ ', '+ pair[1]); 
    }

/*
* searchParams.keys()
* @返回所有键key
*/
    for(let key of searchParams.keys()){
        console.log(key); 
    }

/*
* searchParams.values()
* @返回所有值
*/
    for(let value of searchParams.values()) {
        console.log(value);
    }

/*
* searchParams.toString()
* @返回修改过的URL
*/
    searchParams.toString();
    console.log(searchParams.toString());
}());
复制代码

JS 编写函数从下面的 URL 串中解析出所有的参数

http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&d&enabled

期望的返回结果格式如下:

{
  user: 'anonymous',
  id: [123, 456],     // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型
  city: '北京',        // 中文
  enabled: true,      // 未指定值的 key 约定值为 true
}

谋定而后动,动手前一定要搞清楚问题。怎样才算是把问题搞清楚了?要清楚输入的特征,是否会出现各种奇怪的输入

防御性编程,检测是否为字符串

复制代码
function parse(str){
        if(typeof str !== "string"){
            return;
        }
        var paramObj = {};
        var decode = decodeURIComponent(str);   // 先解码
        var parsePart = decode.split("?#")[decode.split("?#").length-1];    // 截断不需要部分
        var paramArr = parsePart.split("&");    
        for(var i = 0; i < paramArr.length; i++){
            var tmp = paramArr[i].split("=");
            var key = tmp[0];               
            var value = tmp[1] || true;     

            // console.log("关键字是:" + key, "值是:" + value);
            if(typeof paramObj[key] === "undefined"){
                paramObj[key] = value;
            }else{
                var newValue = paramObj[key] + "," + value;     // 有多个重复的先连接字符串,然后才分割开
                paramObj[key] = newValue.split(",");
            }
        }
        // console.log(paramObj);
    }
复制代码

 

posted @   AlanTao  阅读(9779)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决
点击右上角即可分享
微信分享提示