为何JavaScript的URL构造函数不对查询字符串中的括号编码？

在JavaScript中，URL构造函数和encodeURI/encodeURIComponent对查询字符串里的方括号、圆括号编码行为不一致，本质是两者遵循的标准不同：

规范依据 #

• URL构造函数遵循WHATWG URL标准，该标准明确了URL不同部分的"未保留字符"范围：查询字符串（query部分）允许直接使用(、)、{、}这类符号，无需编码。
• encodeURI/encodeURIComponent遵循RFC 3986标准，对更多字符做编码处理，包括上述括号类符号。

行为差异示例 #

1. 查询字符串中的括号处理 #

URL构造函数不会编码查询参数里的括号：

const href = (new URL('https://foobar.com?myQuery={"@asdf/asdf":"1234"}')).href;
// 结果：https://foobar.com/?myQuery={%22@asdf/asdf%22:%221234%22}

encodeURI会编码括号：

const href = encodeURI('https://foobar.com?myQuery={"@asdf/asdf":"1234"}');
// 结果：https://foobar.com?myQuery=%7B%22@asdf/asdf%22:%221234%22%7D

2. 路径中的括号处理 #

如果括号出现在URL路径部分，URL构造函数会对其编码（路径部分的未保留字符范围更严格）：

const href = (new URL('https://foobar.com/}}}?myQuery={"@asdf/asdf":"1234"}')).href;
// 结果：https://foobar.com/%7D%7D%7D?myQuery={%22@asdf/asdf%22:%221234%22}

解决方案 #

1. 优先使用URLSearchParams构造查询参数：
   直接通过URL.searchParams设置参数，URL对象会自动按照WHATWG标准处理编码，避免手动拼接字符串的错误：

   const url = new URL('https://foobar.com');
   url.searchParams.set('myQuery', '{"@asdf/asdf":"1234"}');
   console.log(url.href);
   // 输出：https://foobar.com/?myQuery=%7B%22%40asdf%2Fasdf%22%3A%221234%22%7D
   

2. 强制统一编码行为：
   如果需要让编码结果和encodeURI/encodeURIComponent完全一致，可在传入URL构造函数前，先用encodeURIComponent单独编码每个参数值：

   const url = new URL('https://foobar.com');
   const encodedValue = encodeURIComponent('{"@asdf/asdf":"1234"}');
   url.searchParams.set('myQuery', encodedValue);
   console.log(url.href);
   // 输出与encodeURI处理后的结果一致
   

内容的提问来源于stack exchange，提问作者Luke