js如何从url中获取参数

JavaScript 怎样从 URL 中获取参数

在Web开发中，频繁需要从URL中获取参数来处理一些特定的业务逻辑。在JavaScript中，我们可以通过多种方案来解析URL并获取其中的参数。下面将介绍几种常见的方法。

使用内置的 URLSearchParams 对象

现代浏览器中提供了一个内置的 URLSearchParams 接口，它能以一种非常易懂的方案获取和设置URL的查询字符串参数。

// 假设当前URL是 http://www.example.com?name=JohnDoe&age=30
// 创建一个URL对象
const url = new URL(window.location.href);
// 使用URLSearchParams获取参数
const name = url.searchParams.get('name'); // 返回 "JohnDoe"
const age = url.searchParams.get('age'); // 返回 "30"
console.log(`Name: ${name}, Age: ${age}`);

手动解析查询字符串

如果需要拥护的浏览器不包括URLSearchParams，我们还可以手动解析查询字符串。

// 假设当前URL是 http://www.example.com?name=JohnDoe&age=30
function getParameterByName(name) {
    name = name.replace(/[\[\]]/g, '\\$&');
    const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(window.location.href);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
const name = getParameterByName('name'); // 返回 "JohnDoe"
const age = getParameterByName('age'); // 返回 "30"
console.log(`Name: ${name}, Age: ${age}`);

使用 location 对象

还可以使用 window.location 对象来获取查询字符串，然后自己解析它。

// 假设当前URL是 http://www.example.com?name=JohnDoe&age=30
function parseQuery() {
    const query = window.location.search.substring(1);
    const parms = query.split('&');
    const parmsDict = {};
    for (const parm of parms) {
        const [key, value] = parm.split('=');
        parmsDict[key] = decodeURIComponent(value.replace(/\+/g, ' '));
    }
    return parmsDict;
}
const parameters = parseQuery();
const name = parameters.name; // 返回 "JohnDoe"
const age = parameters.age; // 返回 "30"
console.log(`Name: ${name}, Age: ${age}`);

总结

获取URL中的参数是前端开发中的常见任务，有多种方法可以实现。选择哪种方法取决于你的项目需求和需要拥护的浏览器类型。在现代Web开发中，使用 URLSearchParams 是最简洁和推荐的方案。

本文由IT视界版权所有,禁止未经同意的情况下转发