location.search详解

发布时间:2023-05-18

一、location.search方法

location.search方法用于获取URL中的查询字符串部分,即URL中“?”后面的字符串,如果没有则返回空字符串“”。

// 获取当前页面的查询字符串
const queryString = location.search;
console.log(queryString);

该方法可以直接对查询字符串进行修改,也可以通过location.href进行跳转。

// 修改当前URL的查询字符串为"id=12345"
location.search = "id=12345";
// 跳转到/url路径并带上查询字符串"name=John&age=20"
location.href = "/url" + "?name=John&age=20";

二、location.search怎么读

要读取查询字符串中的参数值,需要先将查询字符串进行解析,解析出来的结果是一个参数名与参数值之间的映射关系。

// 将查询字符串解析为参数名和参数值对应关系的对象
function parseQueryString(queryString) {
  const params = {};
  queryString
    .substring(1)
    .split("&")
    .forEach((param) => {
      const [key, value] = param.split("=");
      params[decodeURIComponent(key)] = decodeURIComponent(value);
    });
  return params;
}
// 获取当前URL的查询字符串,并解析为参数名和参数值对应关系
const params = parseQueryString(location.search);
// 获取相应参数的值
console.log(params["id"]);
console.log(params["name"]);
console.log(params["age"]);

当参数值为数组时,可以通过在参数名后面添加“[]”来表示,例如“http://example.com/?id[]=1&id[]=2&id[]=3”。

// 将查询字符串解析为参数名和参数值对应关系的对象
function parseQueryString(queryString) {
  const params = {};
  queryString
    .substring(1)
    .split("&")
    .forEach((param) => {
      const [key, value] = param.split("=");
      const decodedKey = decodeURIComponent(key);
      if (/\[\]$/.test(decodedKey)) {
        const realKey = decodedKey.substring(0, decodedKey.length - 2);
        if (params[realKey]) {
          params[realKey].push(decodeURIComponent(value));
        } else {
          params[realKey] = [decodeURIComponent(value)];
        }
      } else {
        params[decodedKey] = decodeURIComponent(value);
      }
    });
  return params;
}
// 解析URL中的查询字符串
const params = parseQueryString(location.search);
// 获取id参数的所有值
console.log(params["id"]);

三、location.search是什么

location.search是窗口(window)对象的一个属性,表示窗口当前所在URL的查询字符串部分。如果URL中没有查询字符串,则该属性值为“”。

// 判断当前URL是否包含查询字符串
if (location.search) {
  console.log("当前URL包含查询字符串");
} else {
  console.log("当前URL不包含查询字符串");
}

该属性值可以直接修改,修改后会重新加载页面。

// 修改当前URL的查询字符串为"id=12345"
location.search = "id=12345";

四、location.search什么意思

location.search表示URL中的查询字符串部分,即URL中“?”后面的字符串。查询字符串通常用于向服务器请求特定的数据或页面。 例如,以下URL请求了服务器上名称为"user"的页面,并将查询字符串"id=1234"作为参数传递给服务器:

http://example.com/user?id=1234

服务器可以根据查询字符串中的参数值,返回不同的响应结果。前端可以通过location.search获取当前URL中的查询字符串,并根据参数值的不同来展现不同的内容。

五、总结

通过对location.search方法的详细分析,我们了解了如何获取和设置URL中的查询字符串,如何解析查询字符串中的参数名和参数值,以及查询字符串的应用场景等。这对于我们在开发中使用URL传递参数和获取参数具有一定的实用价值。