面试那些事

解析location查询字符串

2022-02-15  本文已影响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"
上一篇下一篇

猜你喜欢

热点阅读