获取URL参数的几种方法详解

本文深入讲解了在HTML中获取URL参数的最佳实践，强调优先使用浏览器原生的`URLSearchParams`接口——它自动处理编码解码、空值、重复键等复杂边界情况，兼容主流现代浏览器（Chrome 49+、Firefox 44+等），既安全又健壮；同时清晰区分了获取当前页面参数（`new URLSearchParams(window.location.search)`）与解析任意URL字符串（需先用`new URL()`构造绝对URL）的正确用法，并针对性地解答了常见陷阱，如IE11兼容性问题、Node.js环境替代方案以及`Illegal constructor`错误的根源与规避策略，彻底帮你告别手动正则解析带来的编码隐患。

直接用 URLSearchParams，别手动解析字符串，浏览器原生支持且健壮

如何用 URLSearchParams 读取当前 URL 的参数

现代浏览器（Chrome 49+、Firefox 44+、Safari 10.1+、Edge 17+）都支持，无需额外库。它自动处理编码解码、空值、重复键等边界情况。

• const params = new URLSearchParams(window.location.search) —— 注意传的是 window.location.search（带 ?），不是完整 URL
• params.get('id') 获取单个值（重复键只返回第一个）
• params.getAll('tag') 获取所有同名参数（如 ?tag=a&tag=b）
• params.has('page') 判断是否存在该参数

遇到 TypeError: Illegal constructor 怎么办

这个错误通常出现在你误把 URLSearchParams 当作普通对象构造，比如在非浏览器环境（Node.js）或旧版 IE 中调用。它不是 polyfill 友好的类，不能靠简单 require 补丁解决。

• 检查运行环境：用 typeof URLSearchParams !== 'undefined' 做兼容判断
• IE11 及更早版本必须用降级方案，例如 location.search.slice(1).split('&').reduce(...) 手动解析
• Node.js 环境请改用 url.parse()（v10 以下）或 new URL()（v10+，但需传入完整 URL 字符串）

从任意 URL 字符串提取参数，不只是当前页

如果要解析非当前页的 URL（比如后端返回的链接、日志里的 URL），不能依赖 window.location，得先构造 URL 实例再取 searchParams。

• const url = new URL('https://example.com/path?a=1&b=2%20space');
• url.searchParams.get('b') → "2 space"（已自动解码）
• 注意：传入的字符串必须是**有效绝对 URL**，相对路径会报错；若只有查询字符串（如 "?x=1&y=2"），可拼上占位协议：new URL('?x=1', 'http://a')

最容易被忽略的是编码处理——手写正则或 split 很难正确还原中文、空格、+、% 等，而 URLSearchParams 内部完全遵循 URL 标准。只要环境允许，就别绕开它。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~