如何在JavaScript中获取URL参数：深入解析

JavaScript中的URL参数：从简单到复杂

每位开发者至少都遇到过这样的任务：需要从浏览器地址栏中提取数据。你打开一个页面，看到类似 /products?id=42&category=books 的地址——然后意识到：在这串字符中隐藏着重要数据。如何提取它们？这个问题在Stack Overflow上获得了数千票，问题如下："How can I get query string values in JavaScript?"。今天，我们不仅会给出现成的答案——我们还将深入探讨这一过程的底层机制，全面解析JavaScript中URL解析的工作原理。

为什么这很重要？因为URL参数是现代网络的基础。页面间数据传输、商品筛选、分析统计、推广链接——所有这些都建立在问号后的简单字符串之上。如果你用JavaScript编程，掌握查询字符串的处理不是可选项，而是必备技能。

什么是查询字符串以及如何在浏览器中查看它

首先，我们来明确术语。查询字符串是URL中问号之后的部分。例如，在地址：

https://example.com/search?q=javascript&lang=ru&page=1

中，?之后的所有内容就是查询字符串。它由键=值对组成，用与号（&）分隔。每个键可以出现多次——这一点很重要，请记住。

要在JavaScript中获取这个字符串，只需访问以下属性：

const queryString = window.location.search;\nconsole.log(queryString); // "?q=javascript&lang=ru&page=1"

请注意：该属性返回的字符串包含问号。这是所有后续操作的起点。

方法一：URLSearchParams——现代且简单

如果你为现代浏览器编写代码（99%的情况都是如此），请使用内置API URLSearchParams。它于2016年推出，此后成为处理URL参数的事实标准。让我们看看它是如何工作的：

// 获取查询字符串\nconst queryString = window.location.search;\n\n// 创建URLSearchParams对象\nconst params = new URLSearchParams(queryString);\n\n// 根据键获取值\nconst q = params.get('q');       // "javascript"\nconst lang = params.get('lang'); // "ru"\nconst page = params.get('page'); // "1"\n\n// 检查参数是否存在\nconsole.log(params.has('lang')); // true\n\n// 如果键重复，获取所有值\nparams.append('q', 'python');\nconsole.log(params.getAll('q')); // ["javascript", "python"]\n\n// 遍历所有参数\nfor (const [key, value] of params) {\n    console.log(`${key}: ${value}`);\n}\n// 输出：\n// q: javascript\n// lang: ru\n// page: 1\n// q: python

在底层，URLSearchParams会自动解码编码后的字符（例如，将%20转换为空格），并正确处理重复键等复杂情况。这不仅方便——而且安全。

底层是如何工作的？

当你创建 new URLSearchParams(queryString) 时，JavaScript引擎会执行以下步骤：

\n
• 移除开头的问号（如果存在）。
\n
• 按 & 符号拆分字符串，得到键值对数组。
\n
• 按第一个 = 符号拆分每个键值对，得到键和值。
\n
• 解码URI组件——将 %20 替换为空格，%23 替换为 #，等等。
\n
• 将所有内容存储到结构中，其中每个键对应一个值数组（即使只有一个值）。
\n

这个过程是完全可逆的。你可以修改参数