URLSearchParams - 技术栈

1、定义

URLSearchParams是 Web API 中的一种对象，用于处理 URL 查询字符串的操作。

它提供了一种简单的方式来访问和操作 URL 查询参数。

2、作用

通过 URLSearchParams 对象，你可以轻松地从 URL 查询字符串中获取特定参数的值，也可以添加、修改或删除查询参数。

使得开发人员能够轻松地访问、操作和生成URL查询参数，无需手动解析和处理字符串。

这个对象通常用于处理 URL 中的查询参数

javascript 复制代码

// 创建一个包含查询参数的 URLSearchParams 对象
const params = new URLSearchParams('?name=strawberry&age=18')

// 获取特定参数的值
console.log(params.get('name')); // 输出：strawberry
console.log(params.get('age'));  // 输出：18

// 判断是否存在指定名称的参数
console.log(params.has('age')) // true
console.log(params.has('gender')) // false

// 添加新的查询参数
params.append('city', 'Beijing');
console.log(params.toString()); // 输出：name=binjie&age=30&city=Beijing

// 设置指定参数的值，如果参数不存在则添加新参数
params.set('age', 20)
params.set('birth', '2008-08')
console.log(params.toString()) // name=strawberry&age=20&city=Beijing&birth=2008-08

// 删除某个查询参数
params.delete('age');
console.log(params.toString()); // 输出：name=strawberry&city=Beijing&birth=2008-08

javascript 复制代码

// 根据参数名称获取对应的值数组
const params2 = new URLSearchParams('?name=strawberry&age=18&name=dance')
console.log(params2.getAll('name')) // ["strawberry", "dance"]

javascript 复制代码

    const params3 = new URLSearchParams('?name=strawberry&age=18')

    // 返回一个迭代器，用于遍历所有参数的名称
    for(const key of params3.keys()) {
        console.log(key)// name age
    }

    // 返回一个迭代器，用于遍历所有参数的值
    for(const value of params3.values()) {
        console.log(value) // strawberry 18
    }

    // 返回一个迭代器，用于遍历所有参数的键值对
    for(const [key, value] of params3.entries()) {
        console.log(`${key}: ${value}`) // name: strawberry  age: 18 
    }

    // 将URLSearchParams对象转换为字符串表示形式。
    console.log(params3.toString()) // name=strawberry&age=18

3、注意事项

① 浏览器兼容性问题

它是一个相对较新的Web API，在旧版本的浏览器中可能不被支持。

因为要确保目标浏览器的兼容性。如果需要在旧版浏览器中使用，可以考虑使用替代方案。

如果存在兼容性问题，可以引入 url-search-params-polyfill 解决。

地址：GitHub - jerrybendy/url-search-params-polyfill: a simple polyfill for javascript URLSearchParams

② URL参数格式

URLSearchParams期望的URL参数格式是key=value，多个参数之间使用&分隔。

因此要确保URL参数的格式是正确的，否则可能导致解析错误或获取参数值失败。

③ 避免重复编码

4、总结

通过使用 URLSearchParams 对象，你可以方便地解析和操作 URL 查询参数，而不需要手动解析 URL 字符串。

这使得在 JavaScript 中处理 URL 查询参数变得更加方便和高效。