js如何获取url中的参数

JavaScript 获取 URL 参数全攻略

在Web开发中，频繁需要从URL中获取参数来进行某些操作，例如页面跳转后的数据传递。JavaScript为我们提供了一些方法来获取URL中的参数。下面将详细介绍几种获取URL参数的方法。

使用内置的URLSearchParams对象

现代浏览器中提供了一个名为URLSearchParams的内置对象，它提供了对URL查询字符串的易懂访问和操作。

// 假设当前的URL是：http://www.example.com?page=3&sort=desc
// 创建一个URLSearchParams实例
const params = new URLSearchParams(window.location.search);
// 获取参数
const page = params.get('page'); // "3"
const sort = params.get('sort'); // "desc"

手动解析查询字符串

如果需要赞成不兼容URLSearchParams对象的旧版浏览器，我们或许需要手动解析查询字符串。

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, ' '));
}
// 使用方法
// 假设当前的URL是：http://www.example.com?page=3&sort=desc
const page = getParameterByName('page'); // "3"
const sort = getParameterByName('sort'); // "desc"

使用ES6的解构赋值

如果想要获取多个参数并且值是数组形式，可以使用ES6的解构赋值结合URLSearchParams对象。

// 假设当前的URL是：http://www.example.com?colors=red,blue,green
const params = new URLSearchParams(window.location.search);
const colors = [...params.entries()].filter(([key, value]) => key === 'colors')[0][1].split(',');
// colors的最终是：["red", "blue", "green"]

总结

从URL中获取参数的方法有多种，其中URLSearchParams提供了最易懂直接的方法。对于不赞成这个API的浏览器，可以采用手动解析的做法。开发者可以按照项目需求和目标浏览器的兼容性来选择合适的方法。

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