对地址栏数据处理_地址栏地址处理-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73341533/article/details/129853163

本文介绍了两个JavaScript函数，一个将对象转换为使用&拼接的字符串，另一个将这样的字符串还原为对象。同时，提供了一个获取URL查询参数的函数，以及在Next.js的React项目中如何获取路由查询参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 对象转用&拼接的字符串
function ObjectToString(object) {
  // 预设返回的拼接结果
  let string = '';
  Object.keys(object)
    .forEach((item) => {
      if (string == '') {
        string = `${item}=${object[item]}`;
      } else {
        string = `${string}&${item}=${object[item]}`;
      }
    });
  return string;
}
console.log(ObjectToString({ a: 1, b: 2 }));

// &拼接的字符串转用对象
// 获取地址栏的拼接的参数
let searchData = window.location.search.slice(1)
function StringToObject(string) {
  // 预设返回的对象
  let object = {};
  let stringArray = string.split('&');
  for (let i = 0; i < stringArray.length; i++) {
    let item = stringArray[i].split('=');
    let key = item[0];
    let value = item[1];
    object[key] = value;
  }
  return object;
}
console.log(StringToObject(searchData));

// 地址栏的对应拼接参数
function GetQueryString(name) {
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  let r = window.location.search.substr(1).match(reg)
  if (r != null) return unescape(r[2])
  return null
}
console.log(GetQueryString('a'));

注：上边的获取地址栏对应参数的方法遇到地址栏出现拼接容易出现拼接上一些不正常的字段，可以从 window.location 对象获取合适的字段；获取的字段出现问题，可让第一个搜索对无意义（原因是正则匹配时，对开始的位置匹配不准）

对于.next创建的react项目获取地址栏信息：

import { useRouter } from 'next/router';
const router = useRouter()；
{data}=router.query as { data: string }