提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

浅析URLSearchParams介绍及应用：生成和解析参数字符串

应用 解析 介绍 字符串 参数 生成 浅析
2023-09-11 14:19:55 时间

一、介绍

　　URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。目前兼容性只有IE不支持，其他都已经支持。

　　具体内容见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

　　需要注意的是：要使用特定的方法去访问到值。我最开始怎么以为什么都没有，原来是需要使用 get(key) 才能访问到的。

　　URLSearchParams 构造函数不会解析完整 URL，但是如果字符串起始位置有 ? 的话会被去除。

var paramsString1 = "http://example.com/search?query=%40";
var searchParams1 = new URLSearchParams(paramsString1);

searchParams1.has("query"); // false   无法识别完整 url，把整个http://example.com/search?query当做了key
searchParams1.has("http://example.com/search?query"); // true

searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (decodeURIComponent('%40'))
var paramsString2 = "?query=value";  // 第一个字符是 ? 会去除
var searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true

var url = new URL("http://example.com/search?query=%40"); // new URL() 解析 url
var searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query") // true

二、应用：生成和解析参数字符串

1、问题现状：

　　无论在 Node.js 程序还是 HTML 前端程序里，我们都免不了要手工拼 URL 搜索字符串（URL Search String，或称 Query String）的情况。对于拼接参数，我们还需要考虑参数为 null 或 undefined，此外还需通过 encodeURIComponent() 函数来处理 UTF-8 编码问题。

　　而将 JSON 对象转为 URL 字符串还并不是最大的难题，如何从 location.search 解析出参数才是更大的问题，你需要自己写代码从 location.search 中解析出你需要的参数。

2、URLSearchParams

　　那么你可能会想有没有横跨不同浏览器和 Node.js 的现成解决方案或者开源项目呢？答案一定是有的，而且还是一个标准这就是 URLSearchParams

　　浏览器端文档：就是上面MDN咯

　　Node.js 文档：https://nodejs.org/api/url.html#url_class_urlsearchparams

3、引入

// 1. 浏览器代码
// 如果需要支持较低版本的 PC 浏览器，需要额外安装和引用 polyfill：
// $ npm install --save url-search-params
// import URLSearchParams from 'url-search-params';

const urlSearchParams = new URLSearchParams();

// 2. Node.js 代码
const { URLSearchParams } = require('url');
const urlSearchParams = new URLSearchParams();

4、生成搜索字符串

const params = new URLSearchParams();
params.set('k', '关键字');       // 设置参数
params.set('p', 1);             // 支持 Boolean、Number 等丰富类型
console.log(params.toString()); // k=%E5%85%B3%E9%94%AE%E5%AD%97&p=1

5、解析搜索字符串

const params = new URLSearchParams('k=%E5%85%B3%E9%94%AE%E5%AD%97&p=1');
console.log(params.get('k'));   // 返回字符串“关键字”，支持自动 UTF-8 解码
console.log(params.get('p'));   // 返回字符串“1”
console.log(params.get('xxx')); // 如果没有 xxx 这个键，则返回 null
console.log(params.has('xxx')); // 当然也可以通过 has() 方法查询是否存在指定的键
console.log(params.keys());     // 返回一个 ES6 Iterator，内含 ['k', 'p']
console.log(params.values());   // 返一个 ES6 Iterator，内含 ['关键字', '1']
console.log(params.entries());  // 与 Map.prototype.entries() 类似

6、URL 搜索参数列表

　　怎么样是不是无论生成还是解析都非常简单？而更妙的是它还完美支持 URL 搜索参数列表！

　　相信大家都有过不知该如何在 HTTP GET 参数中传递数组的经历，我看到过不少人使用的这种方式：http://example.com/search?brands=bmw,audi,mercedes，然后后端再去split()转为数组。

　　事实上这种方式是不够标准的，并且需要处理原本字符串中就包含“,”的情况，而在业界广为推荐的范式是这样的：http://example.com/search?brands=bmw&brands=audi&brands=mercedes

　　那么我们应该如何通过 URLSearchParams 来生成及解析这种标准参数形式呢？使用 append() 和 getAll() 方法就行：

let params = new URLSearchParams();
// 通过 append() 方法添加所有的选项值
params.append('brands', 'bmw');
params.append('brands', 'audi');
params.append('brands', 'mercedes');
const searchString = params.toString();

// 解析
params = new URLSearchParams(searchString);
console.log(params.getAll('brands')); // 返回一个数组 ['bmw', 'audi', 'mercedes']

 

相关文章