JavaScript获取URL中的参数，并转化为对象

一、使用JavaScript提供的 URLSearchParams 构造函数。

  function urlParamsToObject(url) {
    const params = new URLSearchParams(url.search);
    console.log(params); //URLSearchParams { 'name' => 'binjie09', 'age' => '25', 'gender' => 'male' }
    const paramObj = {};
    for (let [key, value] of params) {
      paramObj[key] = decodeURIComponent(value);
    }
    return paramObj;
  }
  
  // 使用示例
  const url = new URL('https://example.com/?name=binjie09&age=25&gender=male');
  const paramsObj = urlParamsToObject(url);
  console.log(paramsObj);

代码解析：

1.new URL() 是 JavaScript 中的内置构造函数，用于解析和操作 URL。

2.创建的url对象内容格式如下：

URL {
  href: 'https://example.com/path?param1=value1&param2=value2#fragment',
  origin: 'https://example.com',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'example.com',
  hostname: 'example.com',
  port: '',
  pathname: '/path',
  search: '?param1=value1&param2=value2',
  searchParams: URLSearchParams { 'param1' => 'value1', 'param2' => 'value2' },
  hash: '#fragment'
}

3.创建实例 new URLSearchParams(url.search)；开头的 '?' 字符会被忽略。

4. decodeURIComponent() 是 JavaScript 中的内置函数，用于解码使用 encodeURIComponent() 编码的 URI 组件。

二、使用 splite() 将URL字符串分割

function urlParamsToObject(url) {
    //获取字符串 ? 后面的部分
    const queryString = url.split('?')[1];
    const paramsArr = queryString.split('&');
    const paramObj = {};
  
    paramsArr.forEach(param => {
      const [key, value] = param.split('=');
      paramObj[key] = decodeURIComponent(value);
    });
  
    return paramObj;
  }
  
  // 使用示例
  const url = 'https://example.com/?name=binjie09&age=25&gender=male';
  const paramsObj = urlParamsToObject(url);
  console.log(paramsObj);

代码解析：

1.先使用splite('?')[1]将字符串按'?'分割并获取 '？' 后面的部分。

2.在使用 splite('&') 将每个参数分开，获得 'key=value'格式的元素的数组。

3.遍历数组，将每个元素按 '=' 分割并结构分别获得key，value 。(const [key, value] = param.split('='))。

4.将value解码后存入对象 paramObj[key] = decodeURIComponent(value)。

三、获取浏览器的URL

在浏览器中，可以通过访问 window.location 对象来获取当前网页的 URL。

其中，window.location.href 属性返回当前页面的完整 URL 字符串，包括协议、主机名、端口号（如果有）、路径、查询参数和锚点。例如：

const url = window.location.href;
console.log(url); //可能输出如： https://www.example.com/path?query=param#fragment

除了 window.location.href 外，还有其他一些属性可以访问当前 URL 的不同部分。例如：

window.location.protocol：返回当前页面所使用的协议，例如 http、https、file 等。
window.location.host：返回当前页面的主机名和端口号。
window.location.hostname：返回当前页面的主机名，不包括端口号。
window.location.port：返回当前页面所用的端口号，如果当前页面使用的是默认端口，则返回空字符串。
window.location.pathname：返回当前页面的路径部分，不包括查询参数和锚点。
window.location.search：返回当前页面的查询参数部分，包括 ? 符号。
window.location.hash：返回当前页面的锚点部分，包括 # 符号。