如何从location.search中获取特定参数？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要从 URL 中获取一些参数，以便进行相应的操作或展示。而浏览器的 window 对象提供了访问当前页面 URL 的方法，其中最常用的就是 location 属性。通过 location.search 可以获取 URL 中问号后的查询字符串，但是如何从查询字符串中获取特定参数呢？

方法一：手动解析查询字符串

查询字符串的格式为 key1=value1&key2=value2&...，因此我们可以通过自己编写代码解析该字符串来获取指定的参数值。下面是一个示例函数：

-- -------------------- ---- -------
-------- -------------------------- -
  --- ----- - ------------------------------------
  --- ---- - -----------------
  --- ---- ---- -------------- ---- -
    --- ---- - -------------------
    -- -------- --- --------- -
      ------ ----------------------------
    -
  -
  ------ ----------
-

该函数接受一个参数 variable，表示要获取的参数名。它首先使用 substring() 方法去掉 location.search 字符串中的问号，然后使用 split() 方法将字符串按照 & 分隔成数组变量 vars，再使用 split() 方法将每个数组元素按照 = 分隔成键值对数组 pair 。最后，通过遍历 vars 数组查找匹配的键值对，并使用 decodeURIComponent() 解码参数值。

下面是一个使用该函数的示例：

// 假设当前 URL 为 http://example.com/?name=John&age=30
var name = getQueryVariable("name"); // "John"
var age = getQueryVariable("age"); // "30"

但是，手动解析查询字符串虽然简单易懂，但是代码量较大，而且容易出错。因此，更好的方法是使用 JavaScript 内置的 URLSearchParams 对象。

方法二：使用URLSearchParams对象

URLSearchParams 对象是一个内置的 API，提供了一些方便的方法来操作查询字符串。它支持所有主流浏览器，并且可以通过 Polyfill 库在旧版浏览器中使用。下面是一个使用 URLSearchParams 的示例：

var searchParams = new URLSearchParams(window.location.search);
var name = searchParams.get("name");
var age = searchParams.get("age");

通过 new URLSearchParams() 创建一个 searchParams 对象，然后可以使用 get() 方法获取指定键对应的值。如果需要获取所有参数的名称，可以使用 keys() 方法返回一个迭代器对象，通过 values() 方法可以返回所有值的迭代器对象，通过 entries() 方法可以返回所有键值对的迭代器对象。下面是一个获取所有查询参数的示例：

var searchParams = new URLSearchParams(window.location.search);
for (const [key, value] of searchParams.entries()) {
  console.log(`${key}: ${value}`);
}

总结

本文介绍了两种方法来从 location.search 中获取特定参数的值，分别是手动解析查询字符串和使用 URLSearchParams 对象。前者虽然简单易懂，但是代码量较大且容易出错；后者则更为简洁方便，适合在现代浏览器中使用。

无论采用哪种方法，都需要注意参数编码问题。在 URL 中，某些字符需要进行编码以便传递，例如空格需要编码成 %20，而在 JavaScript 中，可以使用 encodeURIComponent() 和 decodeURIComponent() 方法来进行编码和解码操作。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25812