window.location.search 属性用于获取或设置当前页面 URL 中的查询字符串部分（即 ? 后面的内容）。它返回一个以 ? 开头的查询字符串，包括所有的查询参数。这个属性对于解析 URL 中的参数非常有用，尤其是在 Web 开发中进行 URL 路由或参数传递时。

基本语法

let queryString = window.location.search;

返回值：

  • 字符串：返回当前 URL 中的查询字符串部分（包括 ?），如果没有查询字符串，返回空字符串 ""。

示例：

假设当前页面的 URL 为：

https://www.example.com/page?name=JohnDoe&age=25

console.log(window.location.search);
// 输出: "?name=JohnDoe&age=25"

如果没有查询字符串，例如：

https://www.example.com/page

console.log(window.location.search);
// 输出: ""

设置查询字符串：

window.location.search 也可以用来修改 URL 中的查询字符串部分。例如：

window.location.search = "?id=123&status=active";

这样会将浏览器的 URL 修改为：

https://www.example.com/page?id=123&status=active

请注意，这种修改会导致页面重新加载。

用途：

  • 获取 URL 参数：常用于解析 URL 中的查询参数。
  • 动态构建 URL：用于构建动态查询字符串，如筛选条件、分页信息等。
  • 页面重定向：修改 search 属性来进行页面重定向，并传递新的查询参数。

解析 URL 查询字符串：

为了从 window.location.search 中获取参数值，你通常会手动解析查询字符串。例如，获取 name 和 age 参数的值：

// 获取查询字符串
let queryString = window.location.search;

// 去掉开头的问号
queryString = queryString.substring(1);

// 将查询字符串转换成键值对对象
let params = new URLSearchParams(queryString);

// 获取特定参数
let name = params.get('name');  // JohnDoe
let age = params.get('age');    // 25

console.log(name, age);

URLSearchParams 是一种非常方便的方式来解析查询字符串，并可以直接通过 get() 方法访问查询参数。

总结：

  • 获取查询字符串：window.location.search 返回 URL 中的查询部分。
  • 修改查询字符串：通过直接赋值来改变 URL 的查询部分。
  • 常用于参数解析和重定向。

你有在实际项目中使用 URL 查询参数的需求吗？