JavaScript如何获取URL参数_JavaScriptURL参数解析与获取方法完整指南

使用URLSearchParams API可高效解析URL参数，如const params = new URLSearchParams(window.location.search); const name = params.get('name'); 该方法支持get、has、forEach等操作，推荐用于现代浏览器；对于旧浏览器，可通过正则手动解析query string；SPA中参数常位于hash，需从window.location.hash提取并解析；优先使用URLSearchParams以确保代码简洁与标准兼容。 在 前端 开发中，经常需要从当前页面的URL中提取查询参数（即URL中的 后面的部分），JavaScript本身没有内置直接获取URL参数的方法，但可以通过多种方式实现。下面介绍几种常用且实用的方法来解析和获取URL参数。 使用 URLSearchParams API（推荐） 现代 浏览器 提供了 URLSearchParams 接口，专门用于处理查询字符串，是目前最简洁、最标准的方式。 示例代码： const urlParams = new URLSearchParams(window.location.search);const name = urlParams.get('name'); // 获取 name 参数const age = urlParams.get('age'); // 获取 age 参数 如果当前URL为： ，那么 的值就是 ， 为 。 立即学习 “ Java免费学习笔记（深入） ”； 常用方法： get(key) ：获取指定参数的第一个值 getAll(key) ：获取指定参数的所有值（适用于重复参数） has(key) ：判断是否存在该参数 append(key, value) ：添加一个参数 forEach((value, key) => {}) ：遍历所有参数 手动解析 query string（兼容旧浏览器） 如果需要支持不支持 的旧版浏览器（如 IE），可以手动解析。 Comet AI 浏览器 下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。 下载 示例函数： function getQueryParam(url, key) {const match = RegExp('[?&]' + key + '=([^&]*)').exec(url);return match ? decodeURIComponent(match[1]) : null;}// 使用const params = getQueryParam(window.location.href, 'id'); 这个方法通过 正则表达式 匹配参数，然后使用 解码特殊字符。 封装一个通用的参数解析函数 为了更方便地获取所有参数，可以封装一个返回对象的函数： function parseQueryParams(query) {const params = {};if (!query) return params;query.replace(/[^?&]+=?([^&]*)&?/g, (match, value) => {if (value) {const [key, val] = decodeURIComponent(value).split('=');params[key] = val;}});return params;} 或者更准确的版本： function getParamsFromUrl(url) {const search = new URL(url).search;const params = {};new URLSearchParams(search).forEach((val, key) => {params[key] = val;});return params;} 处理 hash 中的参数（如单页应用） 在SPA中，参数可能出现在 hash 里，例如： 。此时需从 提取： const hash = window.location.hash;const queryString = hash.split('?')[1];if (queryString) {const params = new URLSearchParams(queryString);console.log(params.get('id'));} 基本上就这些。优先使用 URLSearchParams ，它简洁、安全、标准。对于兼容性要求高的项目，再考虑手动解析方式。掌握这些方法后，无论是在 表单提交 、页面跳转还是埋点统计中，都能轻松获取URL参数。