js 获取 url 参数

在 JavaScript 中获取 URL 参数有多种方法，以下介绍两种常用的方式：

一、使用 URLSearchParams 对象（推荐）

1. 基础概念
   • URLSearchParams 是一个内置的浏览器对象，用于处理 URL 中的查询字符串（即 ? 后面的部分）。它提供了方便的方法来解析和操作这些参数。

• 优势
  • 简单易用，语法简洁。它自动处理编码和解码的问题，不需要手动对特殊字符进行处理。
  • 支持多种操作，如获取单个参数、获取所有参数为对象、遍历参数等。
• 示例代码
  • 假设 URL 为 https://example.com/page?name=John&age=30。
  • 获取单个参数：
  • 获取单个参数：
  • 获取所有参数为对象：
  • 获取所有参数为对象：
• 应用场景
  • 在单页面应用（SPA）中，根据 URL 参数来显示不同的内容或者进行页面状态的初始化。
  • 在处理表单提交后的回调页面时，获取服务器返回的相关参数。

二、使用传统方法（split 和正则表达式等）

1. 基础概念
   • 这种方法是通过对 URL 字符串进行操作来获取查询参数。通常是将 URL 按照 ? 分割得到查询字符串部分，然后再进一步处理。

• 优势
  • 在一些老旧浏览器中也能使用（虽然现在这种情况较少）。
• 示例代码
  • 假设 URL 为 https://example.com/page?name=John&age=30。
  • 获取单个参数：
  • 获取单个参数：
• 应用场景
  • 当需要对一些特殊的 URL 结构进行定制化解析时可能会用到这种传统方法，但总体来说比较繁琐。

如果遇到获取不到参数的情况：

• 检查 URL 是否正确包含查询字符串并且参数名拼写正确。
• 如果使用 URLSearchParams，确保是在支持的环境下运行（现代浏览器基本都支持）。如果是传统方法，检查分割和解析逻辑是否有误。