如何将localStorage解析得到的URL对象转换为标准URL字符串

首先先反序列化localStorage中存储的字符串：

const urlObj = JSON.parse(stringifiedURLObject)

转换逻辑核心分为两步：首先替换路径中的动态占位符，同时移除已经用到的占位符参数；再把剩余的查询参数拼接为标准查询串，最终组合成完整路径。
完整实现代码如下：

function formatNormalPath(urlObj) {
  let { pathname, query } = { ...urlObj }
  // 复制query避免修改原对象
  const remainingQuery = { ...query }

  // 替换路径中的动态占位符 [参数名]
  pathname = pathname.replace(/\[([^\]]+)\]/g, (match, key) => {
    const value = remainingQuery[key]
    // 移除已经在路径中使用的参数，避免重复出现在查询串
    delete remainingQuery[key]
    return value || match
  })

  // 拼接剩余查询参数
  const searchParams = new URLSearchParams(remainingQuery).toString()
  const searchStr = searchParams ? `?${searchParams}` : ''

  // 统一处理路径开头的斜杠，避免重复或缺失
  return `/${pathname.replace(/^\/+/, '')}${searchStr}`
}

用法示例 #

// 测试用例
const testObj = {
  pathname: 'user/[id]',
  query:  {
    mode: 'active',
    id: 'someID'
  }
}
const normalPathURL = formatNormalPath(testObj)
// 输出结果：/user/someID?mode=active

// 传入跳转配置
const redirectConfig = {
  pathname: '/register',
  query: {
    redirect: normalPathURL,
  },
}

补充说明 #

• 支持多占位符的路径格式，比如/user/[id]/[action]会自动匹配query里的对应字段完成替换
• 原生URLSearchParams会自动对特殊字符做转义，避免路径异常，无需额外处理编码问题
• 如果占位符没有对应query值，会保留原[参数名]格式，可根据业务需求调整默认回退逻辑

内容的提问来源于stack exchange，提问作者Ahwan