一切都始于一个错误
在 javascript 和 node.js 中使用 url 应该很简单，但是我们项目中最近的一个错误让我陷入了 url 和 urlsearchparams api 中微妙怪癖的兔子洞。这篇文章将探讨这些怪癖，它们如何在您的代码中引起问题，以及您可以采取哪些措施来避免它们。
问题：使用 axios 处理 url
我们在生成 url 并向其添加哈希签名时遇到了此问题。查询参数的百分比编码不一致，导致意外行为和错误的哈希签名。
很明显，url 和 urlsearchparams 对象之间的交互需要格外小心。
陷阱#1：url.search 与 urlsearchparams.tostring()
第一个惊喜是 url.search 和 urlsearchparams.tostring() 之间的区别。
立即学习“Java免费学习笔记（深入）”；
使用 .searchparams 修改 url 时要小心，因为根据 whatwg 规范，urlsearchparams 对象使用不同的规则来确定要对哪些字符进行百分比编码。例如，url 对象不会对 ascii 波形符 (~) 字符进行百分号编码，而 urlsearchparams 将始终对其进行编码。
// example 1
const url = new url("https://example.com?param=foo bar");
console.log(url.search); // prints param=foo%20bar
console.log(url.searchparams.tostring()); // prints ?param=foo+bar
// example 2
const myurl = new url('https://example.org/abc?foo=~bar');
console.log(myurl.search); // prints ?foo=~bar
// modify the url via searchparams...
myurl.searchparams.sort();
console.log(myurl.search); // prints ?foo=%7ebar
登录后复制
在我们的项目中，我们需要显式地重新分配 url.search = url.searchparams.tostring() 以确保查询字符串的编码一致。
陷阱#2：加号困境
另一个问题是 urlsearchparams 如何处理 字符。默认情况下，urlsearchparams 将 解释为空格，这在编码二进制数据或 base64 字符串时可能会导致数据损坏。
const params = new urlsearchparams("bin=e+axqb+a");
console.log(params.get("bin")); // "e axqb a"
登录后复制
一种解决方案是在将值附加到 urlsearchparams 之前使用encodeuricomponent：
params.append("bin", encodeuricomponent("e+axqb+a"));
登录后复制
更多详细信息请参阅 mdn 文档。
陷阱 #3：urlsearchparams.get 与 urlsearchparams.tostring()
比较 urlsearchparams.get 和 urlsearchparams.tostring 的输出时会出现另一个微妙之处。例如：
const params = new urlsearchparams("?key=value&key=other");
console.log(params.get("key")); // "value" (first occurrence)
console.log(params.tostring()); // "key=value&key=other" (all occurrences serialized)
登录后复制
在多值场景中，get 仅返回第一个值，而 tostring 则序列化所有值。
我们代码库中的修复
在我们的项目中，我们通过显式重新分配搜索属性解决了该问题：
url.search = url.searchparams.tostring(); url.searchparams.set( "hash", cryptography.createsha256hmacbase64urlsafe(url.href, secret_key ?? "") );
登录后复制
这确保了在添加哈希值之前所有查询参数都已正确编码。
node.js 查询字符串模块
whatwg urlsearchparams 接口和 querystring 模块具有类似的用途，但 querystring 模块的用途更通用，因为它允许自定义分隔符（& 和 =）。另一方面，urlsearchparams api 纯粹是为 url 查询字符串而设计的。
querystring 比 urlsearchparams 性能更高，但不是标准化 api。当性能不重要或需要与浏览器代码兼容时，请使用 urlsearchparams。
与 querystring 模块不同，使用 urlsearchparams 时，不允许数组值形式的重复键。数组使用 array.tostring() 进行字符串化，它只是用逗号连接所有数组元素。
const params = new urlsearchparams({
user: 'abc',
query: ['first', 'second'],
});
console.log(params.getall('query'));
// prints [ 'first,second' ]
console.log(params.tostring());
// prints 'user=abc&query=first%2csecond'
登录后复制
使用querystring模块，查询字符串'foo=bar&abc=xyz&abc=123'被解析为：
{
"foo": "bar",
"abc": ["xyz", "123"]
}
登录后复制
要点
小心 urlsearchparams 处理特殊字符（例如 ~）和空格。必要时使用encodeuricomponent。
了解 url.search、urlsearchparams.get 和 urlsearchparams.tostring 之间的区别，以避免意外行为。
在 node.js 中，如果要将重复的查询参数键解析为数组，请使用查询字符串模块。
以上就是JavaScript 中 URL 和 URLSearchParams 的陷阱的详细内容，更多请关注其它相关文章！
