美文网首页面试那些事
解析location查询字符串

解析location查询字符串

作者: _静夜听雨_ | 来源:发表于2022-02-15 17:38 被阅读0次

    location 的多数信息都可以通过上面的属性获取。但是 URL 中的查询字符串并不容易使用。虽然 location.search 返回了从问号开始直到 URL 末尾的所有内容,但没有办法逐个访问每个查询参数。 下面的函数解析了查询字符串,并返回一个以每个查询参数为属性的对象:

    let getQueryStringArgs = function() {
        // 取得没有开头问号的查询字符串
        let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        // 保存数据的对象 args = {};
        // 把每个参数添加到 args 对象
        for (let item of qs.split("&").map(kv => kv.split("="))) {
            let name = decodeURIComponent(item[0]),
                value = decodeURIComponent(item[1]);
            if (name.length) {
                args[name] = value;
            } 
        }
        return args;
    }
    

    这个函数首先删除了查询字符串开头的问号,当然前提是location.search必须有内容。解析后 的参数将被保存到 args 对象,这个对象以字面量形式创建。接着,先把查询字符串按照&分割成数组, 每个元素的形式为 name=value。for 循环迭代这个数组,将每一个元素按照=分割成数组,这个数组 第一项是参数名,第二项是参数值。参数名和参数值在使用 decodeURIComponent()解码后(这是因为 查询字符串通常是被编码后的格式)分别保存在 name 和 value 变量中。最后,name 作为属性而 value 作为该属性的值被添加到 args 对象。这个函数可以像下面这样使用:

    let args = getQueryStringArgs();
    // 假设查询字符串为?q=javascript&num=10
    alert(args["q"]);    // "javascript"
    alert(args["num"]);  // "10"
    

    相关文章

      网友评论

        本文标题:解析location查询字符串

        本文链接:https://www.haomeiwen.com/subject/qeedlrtx.html