
URL.toString() 会自动对 searchParams 中的键值进行百分比编码,其编码规则与 encodeURIComponent() 一致,确保生成的 URL 合法、安全且可正确解析。
`url.tostring()` 会自动对 `searchparams` 中的键值进行百分比编码,其编码规则与 `encodeuricomponent()` 一致,确保生成的 url 合法、安全且可正确解析。
在 JavaScript 中,URL 构造函数创建的对象不仅提供结构化操作 URL 的能力,还内置了符合 WHATWG URL 标准的自动编码机制。当你调用 url.searchParams.append(key, value) 时,值(value)会被自动编码,而键(key)同样被编码(但编码逻辑与值一致)。例如:
const url = new URL("http://example.com");
url.searchParams.append("name", "Mustermann");
url.searchParams.append("question", "how does the URL.toString() function work?");
console.log(url.toString());
// 输出:http://example.com/?name=Mustermann&question=how%20does%20the%20URL.toString%28%29%20function%20work%3F
可以看到,空格被转为 %20,括号 ( 和 ) 被转为 %28 和 %29,问号 ? 被转为 %3F——这正是 encodeURIComponent() 的行为特征(注意:它不编码 A–Z a–z 0–9 - _ . ! ~ * ' ( ) 以外的所有字符,且不编码 /, ?, #, &, = 等 URL 分隔符,因为这些字符在 searchParams 值中本就不应承担语法作用)。
⚠️ 注意事项:
-
URL对象不会使用encodeURI()—— 因为encodeURI()会保留/,?,#等分隔符,可能导致查询参数被错误截断或解析失败; - 手动拼接字符串后调用
encodeURI()或encodeURIComponent()是冗余且易错的,应避免; - 若需解码,可使用
decodeURIComponent()处理searchParams.get()返回的值(URL解析时已自动解码); - 编码发生在
append()/set()等写入操作时,而非toString()调用时刻;toString()仅序列化已编码的内部状态。
✅ 总结:URL API 的设计目标之一就是消除手动编码的负担。只要通过 searchParams 接口添加参数,即可放心调用 toString() 获取完全合规、可直接用于导航(如 window.open()、fetch() 或 <a href></a>)的安全 URL。










