js 获取url?后面的参数|极客笔记

js 获取url?后面的参数

在前端开发中，经常会遇到需要获取URL中问号后面的参数的情况。这些参数可以用来传递数据给页面或者后端接口，对于开发人员来说是非常重要的。

本文将详细介绍如何使用JavaScript来获取URL中问号后面的参数，并对一些常见的问题进行解答。

方法一：使用正则表达式

在JavaScript中，我们可以使用正则表达式来获取URL中问号后面的参数。下面是一个简单的函数示例：

function getUrlParams() {
    var search = window.location.search;
    var params = {};

    if (search) {
        var paramStr = search.substring(1); // 去掉问号
        var paramArr = paramStr.split('&');

        paramArr.forEach(function(item) {
            var keyValue = item.split('=');
            params[keyValue[0]] = decodeURIComponent(keyValue[1]);
        });
    }

    return params;
}

这个函数会返回一个包含参数键值对的对象，可以直接使用对象的属性来访问参数的值。

示例代码：

console.log(getUrlParams());

运行结果：

如果当前URL是http://www.example.com/?name=John&age=30，那么上面的代码将输出：

{
    "name": "John",
    "age": "30"
}

方法二：使用URLSearchParams

另外，我们还可以使用URLSearchParams对象来获取URL中的参数。这是一种比较新的方法，可以更方便地获取和操作URL中的参数。

function getUrlParams() {
    var urlParams = new URLSearchParams(window.location.search);
    var params = {};

    for (var key of urlParams.keys()) {
        params[key] = urlParams.get(key);
    }

    return params;
}

示例代码：

console.log(getUrlParams());

运行结果：

使用URLSearchParams获取参数的方式与正则表达式方法类似，得到的结果也是相同的。

常见问题解答

1. 如何判断URL中是否包含某个参数？

我们可以在上面的函数中加入一个判断语句来实现：

function hasParam(paramName) {
    var urlParams = new URLSearchParams(window.location.search);

    return urlParams.has(paramName);
}

示例代码：

console.log(hasParam('name')); // true
console.log(hasParam('gender')); // false

2. 如何获取单个参数的值？

如果我们只需要获取单个参数的值，可以直接使用URLSearchParams的get方法：

function getParamValue(paramName) {
    var urlParams = new URLSearchParams(window.location.search);

    return urlParams.get(paramName);
}

示例代码：

console.log(getParamValue('name')); // John
console.log(getParamValue('age')); // 30

3. 如何获取多个相同参数的值？

如果URL中有多个相同参数，我们可以使用getAll方法来获取所有的值：

function getAllParamValues(paramName) {
    var urlParams = new URLSearchParams(window.location.search);

    return urlParams.getAll(paramName);
}

示例代码：

假设当前URL是http://www.example.com/?name=John&name=Jane&age=30，那么：

console.log(getAllParamValues('name')); // ['John', 'Jane']

总结

在本文中，我们介绍了两种方法来获取URL中问号后面的参数：使用正则表达式和使用URLSearchParams对象。这两种方法都能够很方便地获取参数，可以根据具体情况选择合适的方法来使用。

js 获取url?后面的参数