JavaScript生成带排序查询参数的完整URL

前言

在前端开发中，经常需要处理URL查询参数。比如，在分页、排序、过滤等场景下，我们需要在URL中添加查询参数来传递数据。为了使URL更简洁美观，我们可以对查询参数进行字典排序。

本文将介绍如何使用JavaScript实现根据baseUrl和字典排序后的查询参数列表queryParamsList生成完整URL。

示例代码

// 定义一个类来封装该功能
class URLBuilder {
  constructor(baseUrl, queryParamsList) {
    this.baseUrl = baseUrl;
    this.queryParamsList = queryParamsList;
  }

  // 将查询参数列表转换为查询字符串
  getQueryString() {
    // 对查询参数列表进行字典排序
    this.queryParamsList.sort((a, b) => a.key.localeCompare(b.key));

    // 将查询参数列表转换为查询字符串
    let queryString = '';
    for (const param of this.queryParamsList) {
      queryString += `&${param.key}=${param.value}`;
    }

    // 去除第一个"&"符号
    queryString = queryString.substring(1);

    return queryString;
  }

  // 生成完整URL
  getURL() {
    // 将查询字符串添加到baseUrl中
    let url = this.baseUrl;
    if (this.queryParamsList.length > 0) {
      url += `?${this.getQueryString()}`;
    }

    return url;
  }
}

// 使用示例
const baseUrl = 'https://example.com/api/v1/users';
const queryParamsList = [
  { key: 'name', value: 'John Doe' },
  { key: 'age', value: 25 },
  { key: 'city', value: 'New York' },
];

const urlBuilder = new URLBuilder(baseUrl, queryParamsList);
const url = urlBuilder.getURL();

console.log(url); // 输出：https://example.com/api/v1/users?age=25&city=New York&name=John Doe

运行结果

https://example.com/api/v1/users?age=25&city=New York&name=John Doe

总结

本文介绍了一种使用JavaScript实现根据baseUrl和字典排序后的查询参数列表queryParamsList生成完整URL的方法。该方法可以帮助我们生成简洁美观的URL，并方便地对URL查询参数进行字典排序。

希望本文对您有所帮助。如果您有任何问题，请随时提出。