浅谈javascript的url参数parse和build函数

浅谈JavaScript的URL参数parse和build函数

在编写JavaScript的时候，我们经常需要操作URL链接中的参数。下面我们来看一下如何使用JavaScript中的URL参数parse和build函数来处理URL链接中的参数。

URL参数parse函数

URL参数parse函数是用来将URL链接中查询字符串部分解析成一个JavaScript对象。具体使用方式如下：

function parse(query) {
    let result = {};
    query = query.trim().replace(/^(\?|#|&)/, '');
    if (!query) {
        return result;
    }
    query.split('&').forEach((param) => {
        let parts = param.replace(/\+/g, ' ').split('=');
        let key = decodeURIComponent(parts.shift());
        let value = parts.length > 0 ? decodeURIComponent(parts.join('=')) : null;
        if (!result.hasOwnProperty(key)) {
            result[key] = value;
        }
        else if (Array.isArray(result[key])) {
            result[key].push(value);
        }
        else {
            result[key] = [result[key], value];
        }
    });
    return result;
}

以上代码会将查询字符串转换为JavaScript对象。其中，参数query是URL链接中的查询字符串部分（不包括问号）。

URL参数build函数

URL参数build函数的作用是将一个JavaScript对象转换为查询字符串（即查询参数）形式。具体使用方式如下：

function build(obj) {
    return Object.keys(obj).map((key) => {
        let values = obj[key];
        if (Array.isArray(values)) {
            return values.map((value) => {
                return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
            }).join('&');
        }
        else {
            return `${encodeURIComponent(key)}=${encodeURIComponent(values)}`;
        }
    }).join('&');
}

以上代码会将输入的JavaScript对象转换成查询参数的形式。其中，参数obj是一个包含键值对的JavaScript对象。

示例

示例一：

在URL链接中添加查询参数“name=张三”：

let baseUrl = 'http://www.example.com/index.html';
let query = { name: '张三' };
let queryString = build(query);
let url = `${baseUrl}?${queryString}`;
console.log(url);

结果为：http://www.example.com/index.html?name=%E5%BC%A0%E4%B8%89

接下来我们解析这个URL链接：

let parsedQuery = parse(queryString);
console.log(parsedQuery);

结果为：{name: "张三"}

示例二：

在URL链接中添加多个相同键名的查询参数：

let baseUrl = 'http://www.example.com/index.html';
let query = { name: ['张三', '李四'] };
let queryString = build(query);
let url = `${baseUrl}?${queryString}`;
console.log(url);

结果为：http://www.example.com/index.html?name=%E5%BC%A0%E4%B8%89&name=%E6%9D%8E%E5%9B%9B

接下来我们解析这个URL链接：

let parsedQuery = parse(queryString);
console.log(parsedQuery);

结果为：{name: ["张三", "李四"]}

通过以上两个示例，我们可以总结出使用JavaScript中的URL参数parse和build函数的基本方法，以及它们的使用场景和效果。