摘要：const searchTerm = 'Web & APIs / 2025';const url = `https://api.example.com/search?q=${encodeURIComponent(searchTerm)}`;// "https:
对 Web 开发者来说，encodeURIComponent 这个函数再熟悉不过了。
当我们需要将用户输入或动态数据拼接到 URL 的查询参数中时，通常这样写代码：
const searchTerm = 'Web & APIs / 2025';const url = `https://api.example.com/search?q=${encodeURIComponent(searchTerm)}`;// "https://api.example.com/search?q=Web & APIs / 2025"多年来，这种手动拼接字符串并逐个编码参数的方式，虽然能完成任务，但背后隐藏着不少烦恼和潜在的风险。
在迎接新标准之前，让我们先回顾一下 encodeURIComponent 为什么让我们头疼。
encodeURIComponent 的设计使它会编码几乎所有非字母数字的字符，包括 /, ?, :, &, = 等在 URL 中具有特殊含义的保留字符。如果不小心用它处理了一个完整的 URL，结果将是灾难性的。
const fullUrl = 'https://example.com/search?q=foo&page=1';// 错误用法!const encodedUrl = encodeURIComponent(fullUrl);// "https://example.com/search?q=foo&page=1"// 这个 URL 已经完全无法访问了此外，构建一个包含多个参数的 URL 往往意味着大量的字符串拼接，需要手动处理 ? 和 &，代码冗长且容易出错。
这也导致代码充斥着 +、?、& 和 encodeURIComponent 调用，逻辑混乱，难以阅读和后期维护。当需要动态添加或删除某个参数时，操作字符串会变得更加复杂。
现代浏览器和 Node.js 环境中早已内置了一套强大的 URL 处理 API，它们以面向对象的方式解决了上述所有问题，核心是两个对象：URLSearchParams 和 URL。
1. URLSearchParams：优雅的查询参数管家
URLSearchParams 专门用于处理 URL 的查询字符串（即 ? 后面的部分）。它提供了一系列简单直观的方法来操作参数。
忘掉手动拼接吧，现在你可以这样做：
const params = new URLSearchParams;// 添加参数params.append('q', 'URL API');params.append('page', 2);params.append('user', 'Alice');params.append('user', 'Bob'); // 支持同名多值参数// 获取参数console.log(params.get('q')); // "URL API"console.log(params.getAll('user')); // ["Alice", "Bob"]// 修改参数params.set('page', 1); // 如果存在则覆盖，不存在则添加// 删除参数params.delete('page');// 最关键的一步：生成查询字符串console.log(`https://api.example.com/search?${params.toString}`);URLSearchParams 在内部会自动为你处理所有值的编码，既正确又安全。我们操作的是一个对象，而不是一堆零散的字符串，代码更加健壮和可维护，支持get, set, append, delete, has 等方法。
同时也支持从对象创建：
const myParams = new URLSearchParams({ q: 'URL API', page: 1});2. URL对象：完整的 URL 控制中心
URL 对象则将整个 URL 结构化，允许我们轻松地读取和修改它的任何部分，如协议、主机名、路径以及最重要的——查询参数。
我们可以直接在一个已有的 URL 上进行修改：
const url = new URL('https://example.com/products?page=1&limit=10');// 修改现有参数url.searchParams.set('page', 2);// 添加新参数url.searchParams.append('sort', 'price_desc');// 添加一个包含特殊字符的参数url.searchParams.set('query', 't-shirt & shorts');console.log(url.href);// "https://example.com/products?page=2&limit=10&sort=price_desc&query=t-shirt+&+shorts"看看这代码，多么简洁、清晰！
encodeURIComponent 作为一个低层级的工具，在 Web 发展史上功不可没，但随着 Web 应用的复杂化，我们需要更高级、更安全的抽象。URL 和 URLSearchParams API 正是为此而生。
URL API 已经成为 Web 标准的一部分，得到了所有现代浏览器的支持（Chrome, Firefox, Safari, Edge）。
它们将我们从繁琐、易错的字符串操作中解放出来，让我们能以一种更结构化、更符合逻辑的方式来处理 URL。这不仅提升了代码的可读性和可维护性，也从根本上杜绝了因编码不当而引发的各种 Bug。
来源：不秃头程序员
