在前端开发中，我们经常需要从 URL 中获取一些参数，以便进行相应的操作或展示。而浏览器的 window 对象提供了访问当前页面 URL 的方法，其中最常用的就是 location 属性。通过 location.search 可以获取 URL 中问号后的查询字符串，但是如何从查询字符串中获取特定参数呢？
方法一：手动解析查询字符串
查询字符串的格式为 key1=value1&key2=value2&...，因此我们可以通过自己编写代码解析该字符串来获取指定的参数值。下面是一个示例函数：
-------- -------------------------- -
--- ----- - ------------------------------------
--- ---- - -----------------
--- ---- ---- -------------- ---- -
--- ---- - -------------------
-- -------- --- --------- -
------ ----------------------------
-
-
------ ----------
-该函数接受一个参数 variable，表示要获取的参数名。它首先使用 substring() 方法去掉 location.search 字符串中的问号，然后使用 split() 方法将字符串按照 & 分隔成数组变量 vars，再使用 split() 方法将每个数组元素按照 = 分隔成键值对数组 pair 。最后，通过遍历 vars 数组查找匹配的键值对，并使用 decodeURIComponent() 解码参数值。
下面是一个使用该函数的示例：
-- ---- --- - ------------------------------------ --- ---- - ------------------------- -- ------ --- --- - ------------------------ -- ----
但是，手动解析查询字符串虽然简单易懂，但是代码量较大，而且容易出错。因此，更好的方法是使用 JavaScript 内置的 URLSearchParams 对象。
方法二：使用URLSearchParams对象
URLSearchParams 对象是一个内置的 API，提供了一些方便的方法来操作查询字符串。它支持所有主流浏览器，并且可以通过 Polyfill 库在旧版浏览器中使用。下面是一个使用 URLSearchParams 的示例：
--- ------------ - --- ---------------------------------------- --- ---- - ------------------------- --- --- - ------------------------
通过 new URLSearchParams() 创建一个 searchParams 对象，然后可以使用 get() 方法获取指定键对应的值。如果需要获取所有参数的名称，可以使用 keys() 方法返回一个迭代器对象，通过 values() 方法可以返回所有值的迭代器对象，通过 entries() 方法可以返回所有键值对的迭代器对象。下面是一个获取所有查询参数的示例：
--- ------------ - --- ---------------------------------------- --- ------ ----- ------ -- ----------------------- - -------------------- ----------- -
总结
本文介绍了两种方法来从 location.search 中获取特定参数的值，分别是手动解析查询字符串和使用 URLSearchParams 对象。前者虽然简单易懂，但是代码量较大且容易出错；后者则更为简洁方便，适合在现代浏览器中使用。
无论采用哪种方法，都需要注意参数编码问题。在 URL 中，某些字符需要进行编码以便传递，例如空格需要编码成 %20，而在 JavaScript 中，可以使用 encodeURIComponent() 和 decodeURIComponent() 方法来进行编码和解码操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25812