window.location.search用法介绍

一、什么是window.location.search

在前端开发中，window.location对象是一个非常重要的对象，它有一个search属性，表示URL的查询部分（问号后面的部分）。比如，URL为https://blog.csdn.net/qzmlyshao?key1=value1&key2=value2，则window.location.search的值为"?key1=value1&key2=value2"。

这个属性值是一个字符串类型，其中可能包括一个或多个参数值对，它们的格式是：参数名=参数值，每个参数值对之间以&隔开。可以通过window.location.search来获取到这些参数值对，并在程序中进行解析和使用。

二、window.location.search的常见用途

window.location.search可以方便地获取URL中的参数值，常见的用途有：

1. 获取单个参数值

    function getParam(name) {
        const params = new URLSearchParams(window.location.search);
        return params.get(name);
    }

上面代码定义了一个getParam()函数，用于获取指定参数的值。它使用了URLSearchParams对象，它是ES6新增的对象，用于解析和操作URL查询参数。在该函数中，我们将window.location.search传入URLSearchParams对象的构造函数，然后使用该对象的get()方法获取参数值。

2. 获取多个参数值

    function getParams(names) {
        const params = new URLSearchParams(window.location.search);
        const result = {};
        names.forEach(name => {
            result[name] = params.get(name);
        });
        return result;
    }

这个函数定义了一个getParams()函数，用于获取多个参数值。它接受一个数组作为参数名，返回一个对象，其中包含了对应的参数名和值。这个函数的实现与上面的函数类似，只不过多了一个forEach()循环，用于遍历参数名数组，并将结果存入一个对象中。

3. 组装URL参数

    const params = new URLSearchParams();
    params.append('param1', 'value1')
    params.append('param2', 'value2')
    const url = 'https://www.example.com?' + params.toString();
    console.log(url); // https://www.example.com?param1=value1?m2=value2

这段代码演示了如何使用URLSearchParams对象组装URL参数，它首先创建了一个URLSearchParams对象，然后使用append()方法依次添加参数名和值。最后，将这个对象转换为字符串并与URL地址拼接，即可得到完整的URL地址。

三、window.location.search的扩展用法

除了上面介绍的常见用途之外，window.location.search还可以用于以下方面：

1. 修改URL中的参数

    const params = new URLSearchParams(window.location.search);
    params.set('key', 'new-value');
    window.location.search = params.toString();

这段代码演示了如何使用URLSearchParams对象修改URL中的参数。它首先将window.location.search传入URLSearchParams构造函数，然后使用set()方法修改参数值。最后，将修改后的URL参数字符串重新赋值给window.location.search，即可实现修改URL参数的功能。

2. 判断URL参数是否存在

    const params = new URLSearchParams(window.location.search);
    if (params.has('key')) {
        console.log('key exists!');
    } else {
        console.log('key does not exist!');
    }

这段代码演示了如何使用URLSearchParams对象判断URL中是否包含某个参数。它使用has()方法判断参数是否存在，如果存在，返回true，否则返回false。

3. 删除URL中的参数

    const params = new URLSearchParams(window.location.search);
    params.delete('key');
    window.location.search = params.toString();

这段代码演示了如何使用URLSearchParams对象删除URL中的参数。它使用delete()方法删除指定参数，然后将修改后的URL参数字符串重新赋值给window.location.search，即可实现删除URL参数的功能。

四、小结

window.location.search是一个非常重要的属性，它可以方便地获取URL中的参数值，并进行解析和使用。通过URLSearchParams对象，我们可以轻松地实现URL参数的增删改查等操作。对于前端开发来说，熟练掌握window.location.search的用法，可以带来很大的便利性。