JS解析URL查询参数的方法_javascript技巧

使用 URLSearchParams 是解析 URL 查询参数的推荐方法，如 const params = new URLSearchParams(new URL(‘https://example.com?name=john&age=25’).search); 可通过 params.get(‘name’) 获取值；该 API 支持 get、getAll、has 等方法，简洁高效；对于旧环境可手动解析，使用正则提取键值并对 decodeURIComponent 解码；若需获取当前页面参数，可用 window.location.search 初始化 URLSearchParams 对象；现代项目应优先使用 URLSearchParams 以保证代码清晰与兼容性。

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

使用 URLSearchParams（推荐方法）

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

基本用法如下：

const url = ‘https://example.com?name=john&age=25’; const params = new URLSearchParams(new URL(url).search); console.log(params.get(‘name’)); // 输出： john console.log(params.get(‘age’)); // 输出： 25

支持的方法包括：

立即学习“Java 免费学习笔记（深入）”；

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

手动解析（兼容旧环境）

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

巧文书

巧文书是一款 AI 写标书、AI 写方案的产品。通过自研的先进 AI 大模型，精准解析招标文件，智能生成投标内容。

8

查看详情

function getQueryParams(url) {const params = {}; const Regex = /[?&]([^#&=]+)=([^&]*)/g; let match; while ((match = regex.exec(url))) {params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]); } return params; } const result = getQueryParams(‘https://example.com?name=john&age=25’); console.log(result); // {name: ‘john’, age: ’25’}

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

结合当前页面 URL 使用

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

const params = new URLSearchParams(window.location.search); const id = params.get(‘id’);

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

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

以上就是 js 解析 URL 查询参数的方法_