在设置URL参数时编码特殊字符

Question

我需要设置一些URL参数，其中还需要包含一个特殊字符$

目前我正在使用.set()来创建和设置这些参数的值：

const myUrl = new URL("http://www.example.com/?");

let params = new URLSearchParams();
params.set('$param1', '60');
params.set('$param2', '100');

我知道我需要使用encodeURI()来确保在URL中得到$而不是%24 - 但是在哪个阶段我应该这样做呢？

如果我在将参数转换为字符串并将其添加到URL时进行这样的操作，它们已经被转换了。

myUrl.search = encodeURI(params.toString());
// 输出：http://www.example.com/?%24param1=60&%24param2=100
// 期望：http://www.example.com/?$param1=60&$param2=100

Answer 1

由于您需要它且您的服务器支持它，只需在最后修复它

const myUrl = new URL("http://www.example.com/?");

let params = myUrl.searchParams;
params.set('$param1', '60');
params.set('$param2', '100');

console.log(myUrl.toString().replace(/%24/g,"$"))

Answer 2

在您的情况下，$字符被编码为%24，因为它是URL中的保留字符。 URLSearchParams对象的set方法会自动对这些字符进行编码，以确保生成的字符串是一个有效的URL。

然而，如果您想按原样包含$字符，您可以通过手动构建查询字符串来绕过自动编码：

const myUrl = new URL("http://www.example.com/?");

let params = ['$param1=60', '$param2=100'].join('&');

myUrl.search = params;

console.log(myUrl.toString());
// 输出：http://www.example.com/?$param1=60&$param2=100

这将给您所需的输出，但请注意，根据URL规范，这可能不是一个有效的URL，因为$是一个保留字符。这可能会导致某些服务器或API出现问题。

如果您控制您正在与之交互的服务器或API，并且您确信它可以处理查询字符串中带有$字符的URL，则此方法应该有效。否则，通常最安全的做法是使用URLSearchParams提供的自动编码。

请确认此解决方案是否对您有效，或者是否需要进一步协助。