JS获取URL参数的实用方法

本文深入讲解了JavaScript中解析URL查询参数的两种核心方法：推荐使用现代浏览器原生的URLSearchParams API，它语法简洁、功能全面（支持get、getAll、has等方法），能高效安全地处理编码字符和重复参数；同时提供了兼容旧环境的手动解析方案，通过正则匹配与decodeURIComponent解码实现可靠回退。无论是处理静态URL还是动态获取当前页面参数（如window.location.search），都能轻松应对，帮助开发者写出更清晰、健壮且兼容性良好的前端代码。

解析URL中的查询参数是前端开发中常见的需求，比如从https://example.com?name=john&age=25中提取name和age的值。JavaScript提供了多种方式来高效、准确地实现这一功能。

使用URLSearchParams（推荐方法）

URLSearchParams 是现代浏览器提供的原生API，专门用于处理查询字符串，语法简洁且功能强大。

基本用法如下：

支持的方法包括：

• get(key)：获取指定参数的第一个值
• getAll(key)：获取指定参数的所有值（适用于重复参数）
• has(key)：判断是否存在该参数
• append(key, value)：添加新参数
• toString()：返回处理后的查询字符串

手动解析（兼容旧环境）

在不支持URLSearchParams的环境中，可以通过字符串操作和正则表达式手动解析。

注意要使用decodeURIComponent处理编码字符，避免中文或特殊符号出错。

结合当前页面URL使用

如果需要解析当前页面的查询参数，可以直接使用window.location.search。

这样无需传入完整URL，适合在页面加载时读取参数进行初始化操作。

基本上就这些。对于现代项目优先使用URLSearchParams，代码更清晰且不易出错；老项目可采用手动解析方式确保兼容性。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS获取URL参数的实用方法》文章吧，也可关注golang学习网公众号了解相关技术文章。