你知道哪些获取URL参数的方法？

前言

获取URL参数方法有很多种，也是一道经典的面试基础题，那么今天我们就来一起盘一盘通过js有几种获取URL参数的方式。

使用 URLSearchParams 接口（推荐）

const params = new URLSearchParams(window.location.search);

// get获取参数值
const value = params.get('paramName');

// set设置url参数值
params.set('paramName', 'newValue');

// delete删除url参数
params.delete('paramName');

// params可以通过for...of进行遍历
for (const [key, value] of params) { console.log(`${key}: ${value}`); }

// 解析回字符串
const newQueryString = params.toString();

使用 URLSearchParams 接口

const url = new URL(window.location.href);

// get获取参数值
const value = url.searchParams.get('paramName');

// set设置url参数值
url.searchParams.set('paramName', 'newValue');

// delete删除url参数
url.searchParams.delete('paramName');

正则匹配

function getQueryParam(name) { 
    const regex = new RegExp('[?&]' + name + '=([^&#]*)', 'i'); 
    const result = regex.exec(window.location.search); 
    return result ? decodeURIComponent(result[1]) : null; 
} 
const value = getQueryParam('paramName'); 
console.log(value);

字符串拆分

function getQueryParam(name) { 
    const query = window.location.search.substring(1); 
    const params = query.split('&'); 
    for (let i = 0; i < params.length; i++) { 
        const pair = params[i].split('='); 
        if (pair[0] === name) { 
            return decodeURIComponent(pair[1]); 
        } 
     } 
    return null;
} 
const value = getQueryParam('paramName'); 
console.log(value);

第三方库

还有很多相关的第三方库可以支持该功能，这里就不再列举。

以上就是本次的分享，再见～