HTML如何获取URL参数_GET请求数据处理方法【解析】

推荐使用URLSearchParams接口解析URL查询参数，它兼容主流浏览器、语法简洁且支持增删改查；旧版浏览器可手动解析location.search字符串；还可封装函数支持默认值与类型转换，或通过URL构造器解析任意URL。

如果您在HTML页面中需要读取当前URL中的查询参数（即类似?name=John&age=25形式的数据），则需借助JavaScript解析location.search字符串。以下是多种获取并处理URL参数的方法：

一、使用URLSearchParams接口（现代标准方法）

URLSearchParams是浏览器原生提供的API，用于解析和操作URL查询字符串，兼容性良好（Chrome 49+、Firefox 44+、Edge 17+、Safari 10.1+），语法简洁且支持迭代与增删改查。

1、获取当前URL的查询部分：const searchParams = new URLSearchParams(window.location.search);

2、检查某参数是否存在：const hasName = searchParams.has('name');

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

3、获取单个参数值（返回第一个匹配值）：const name = searchParams.get('name');

4、获取所有同名参数值（返回字符串数组）：const values = searchParams.getAll('tag');

5、遍历所有键值对：for (const [key, value] of searchParams) { console.log(key + ': ' + value); }

二、手动解析location.search字符串（兼容旧版浏览器）

该方法不依赖新API，适用于IE9及更早版本，通过截取location.search子串后按&和=分割，再逐项解码还原原始字符（如%20→空格）。

1、提取问号后的查询字符串：const queryString = window.location.search.substring(1);

2、判断是否为空：if (!queryString) return {};

3、按&分割为参数对数组：const pairs = queryString.split('&');

4、初始化空对象存储参数：const params = {};

5、对每对键值执行解码与赋值：pairs.forEach(pair => { const [key, value] = pair.split('='); params[decodeURIComponent(key)] = decodeURIComponent(value || ''); });

三、封装为可复用函数（支持默认值与类型转换）

将解析逻辑封装成函数，可增强健壮性，例如自动处理undefined值、提供默认返回、尝试数字/布尔类型转换等，避免重复编写解析代码。

1、定义函数接收可选默认值对象：function getQueryParams(defaults = {}) { ... }

标签： javascript java html 正则表达式 编码 浏览器 edge safari 后端 ai win 键值对