正文

掌握JS接收URL参数的5种方法，轻松应对各种查询需求

/0 浏览量
0909

在Web开发中，经常需要从URL中提取参数来获取用户输入的信息。JavaScript提供了多种方法来接收URL参数，以下将详细介绍五种常用的方法，帮助你轻松应对各种查询需求。

方法一：使用window.location.search

window.location.search属性可以获取到当前URL中查询字符串的部分，即?后面的部分。以下是一个简单的例子：

var params = {};
var queryString = window.location.search.substring(1);
var vars = queryString.split("&");

for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (typeof params[pair[0]] === "undefined") {
        params[pair[0]] = decodeURIComponent(pair[1]);
    } else if (typeof params[pair[0]] === "string") {
        var arr = [params[pair[0]], decodeURIComponent(pair[1])];
        params[pair[0]] = arr;
    } else {
        params[pair[0]].push(decodeURIComponent(pair[1]));
    }
}

方法二：使用URLSearchParams对象

URLSearchParams对象是HTML5新增的API，它提供了一个简单的方式来处理URL的查询字符串。以下是一个例子：

var params = new URLSearchParams(window.location.search);
var paramValue = params.get('paramName');

方法三：使用RegExp

正则表达式可以用来匹配查询字符串中的参数和值。以下是一个例子：

var params = {};
var match = window.location.search.match(/(\w+)=([^&]+)/g);
if (match) {
    match.forEach(function (item) {
        var temp = item.split('=');
        params[temp[0]] = decodeURIComponent(temp[1]);
    });
}

方法四：使用function或Object.fromEntries

通过定义一个函数或使用Object.fromEntries方法，可以将查询字符串转换为对象。以下是一个使用function的例子：

function getQueryParams(queryString) {
    var params = {};
    var vars = queryString.substring(1).split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        params[pair[0]] = decodeURIComponent(pair[1]);
    }
    return params;
}

方法五：使用第三方库

如果你不介意引入第三方库，可以考虑使用像query-string这样的库来简化查询字符串的处理。以下是一个例子：

const queryString = require('query-string');
const params = queryString.parse(window.location.search);

以上五种方法可以帮助你轻松地接收和处理URL参数。根据你的实际需求，选择合适的方法进行操作。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --