JavaScript怎样处理URL参数_JavaScript中URL API有哪些用法

狼影 2025-12-25 00:00:00 次阅读

JavaScript处理URL参数最现代可靠的方式是使用URL和URLSearchParams API；前者解析完整URL获取结构化信息，后者专门操作查询参数，支持增删改查及自动编码，还可结合window.location安全更新地址栏。

JavaScript 处理 URL 参数最现代、可靠的方式是使用内置的 URL 和 URLSearchParams API，它们取代了过去手动解析字符串的易错做法。

用 URL 构造函数解析完整 URL

当你有一个完整的 URL 字符串（比如来自 window.location.href 或用户输入），可以用 new URL() 提取协议、域名、路径、查询参数等结构化信息：

const url = new URL("https://example.com/search?q=js&sort=desc&page=2");
console.log(url.hostname); // "example.com"
console.log(url.pathname); // "/search"
console.log(url.search); // "?q=js&sort=desc&page=2"
console.log(url.searchParams); // URLSearchParams 实例

用 URLSearchParams 解析和操作查询参数

URLSearchParams 是专门处理 ?key=value&key2=value2 这类查询字符串的对象，支持增删改查，自动处理编码：

const params = new URLSearchParams(url.search);
params.get("q"); // "js"
params.getAll("page"); // ["2"]（支持重复键）
params.set("sort", "asc"); // 修改值
params.append("filter", "active"); // 追加新参数
params.delete("page"); // 删除参数
params.toString(); // "q=js&sort=asc&filter=active"

在浏览器中读写当前页面 URL 参数

结合 window.location 可以安全更新地址栏而不刷新页面：

const url = new URL(window.location);
url.searchParams.set("utm_source", "newsletter");
window.history.replaceState({}, "", url); // 替换当前历史记录
// 或用 pushState() 添加新历史项

兼容性与降级建议

URL 和 URLSearchParams 在现代浏览器（Chrome 61+、Firefox 60+、Safari 10.1+、Edge 79+）中已全面支持。如需兼容旧版 IE，可用 polyfill（如 webreflection/url-search-params），或封装一个简单 fallback 函数解析 location.search 字符串。