JavaScript中的URL操作与URLSearchParams对象

一、URL操作基础
URL（统一资源定位符）是Web开发中处理资源地址的核心概念。JavaScript提供了URL构造函数来解析和操作URL。

// 创建URL对象
const url = new URL('https://example.com:8080/path?name=john&age=25#section');

// 分解URL各部分
console.log(url.protocol); // "https:"
console.log(url.hostname); // "example.com" 
console.log(url.port);     // "8080"
console.log(url.pathname); // "/path"
console.log(url.search);   // "?name=john&age=25"
console.log(url.hash);     // "#section"

二、URLSearchParams对象详解
URLSearchParams专门用于处理URL查询字符串（?后面的部分），提供更便捷的操作方法。

1. 创建URLSearchParams实例

// 方式1：从字符串创建
const params1 = new URLSearchParams('name=john&age=25');

// 方式2：从键值对数组创建
const params2 = new URLSearchParams([
  ['name', 'john'],
  ['age', '25']
]);

// 方式3：从对象创建（需要转换）
const params3 = new URLSearchParams({name: 'john', age: '25'});

2. 基本操作方法

const params = new URLSearchParams('name=john&age=25&skill=js');

// 查询操作
console.log(params.get('name'));    // "john"
console.log(params.has('age'));     // true
console.log(params.getAll('skill')); // ["js"]

// 添加/修改操作
params.set('country', 'US');        // 添加新参数
params.set('name', 'alice');        // 修改已有参数
params.append('skill', 'python');   // 追加重复参数值

// 删除操作
params.delete('age');               // 删除指定参数

三、实际应用场景

1. 动态构建URL

function buildURL(baseURL, queryParams) {
  const url = new URL(baseURL);
  const params = new URLSearchParams(queryParams);
  
  url.search = params.toString();
  return url.href;
}

const result = buildURL('https://api.example.com/data', {
  page: 1,
  limit: 10,
  search: 'javascript'
});
// 结果: "https://api.example.com/data?page=1&limit=10&search=javascript"

2. 解析当前页面URL参数

// 获取当前页面的查询参数
const currentParams = new URLSearchParams(window.location.search);

// 安全获取参数值（带默认值）
function getQueryParam(key, defaultValue = '') {
  const params = new URLSearchParams(window.location.search);
  return params.get(key) || defaultValue;
}

const page = getQueryParam('page', '1');
const search = getQueryParam('search', '');

四、高级特性与注意事项

1. 参数编码处理
   URLSearchParams会自动处理特殊字符的编码和解码：

const params = new URLSearchParams();
params.set('query', 'hello world&special=chars');

console.log(params.toString()); 
// "query=hello+world%26special%3Dchars"（自动编码）

const decoded = new URLSearchParams('query=hello+world%26special%3Dchars');
console.log(decoded.get('query')); 
// "hello world&special=chars"（自动解码）

2. 迭代操作

const params = new URLSearchParams('name=john&age=25&skill=js');

// 使用for...of迭代
for (const [key, value] of params) {
  console.log(`${key}: ${value}`);
}

// 转换为普通对象
const paramsObj = Object.fromEntries(params);
console.log(paramsObj); // {name: "john", age: "25", skill: "js"}

3. 与URL对象结合使用

// 修改现有URL的参数
const url = new URL('https://example.com/page?old=value');
url.searchParams.set('newParam', 'newValue');
url.searchParams.delete('old');

console.log(url.href); 
// "https://example.com/page?newParam=newValue"

五、兼容性与polyfill

• 现代浏览器都支持URL和URLSearchParams
• 如需支持旧浏览器，可使用whatwg-url等polyfill
• Node.js从v7开始原生支持

这种方法比传统字符串操作更安全可靠，避免了手动处理编码问题的错误。