JavaScript 获取 URL 参数

Harshit Jindal 2023年10月12日
  1. 使用 URL 对象的 searchParamsGET 参数中获取值
  2. 使用 location.searchGET 参数中获取值
JavaScript 获取 URL 参数

本教程介绍如何从 GET 参数中获取值。

使用 URL 对象的 searchParamsGET 参数中获取值

URL 对象表示由参数定义的 URL。我们可以使用它的 searchParams 属性返回一个 URLSearchParams 对象,该对象允许我们访问在 GET 中解码的参数。然后我们可以使用附加到 URLSearchParams 对象的 get 函数来获取 URL 中任何参数的值。

var input_string =
    'http://www.google.com/app.html?apple=1&banana=3&cherry=m2';  // window.location.href
var url = new URL(input_string);
var cherry = url.searchParams.get('cherry');
console.log(cherry);

在上面的代码中,我们首先获取 URLSearchParams 对象,然后使用其 get 函数获取解码后的参数值。

使用 location.searchGET 参数中获取值

locationsearch 属性基本上是一个搜索字符串,也称为 query string。为了获取参数的值,我们拆分字符串,然后将参数及其值存储在字典中。然后我们可以轻松地使用字典来获取所有的键值对。

var GET_parameters = {};

if (location.search) {
  var splitts = location.search.substring(1).split('&');
  for (var i = 0; i < splitts.length; i++) {
    var key_value_pair = splitts[i].split('=');
    if (!key_value_pair[0]) continue;
    GET_parameters[key_value_pair[0]] = key_value_pair[1] || true;
  }
}

var abc = GET_parameters.abc;

所有主要浏览器都支持讨论的所有方法。

作者: Harshit Jindal
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn