如何使用JavaScript获取参数？

在JavaScript中，获取URL的查询字符串（即URL中”?”后面的参数）是一项常见的需求。通常，这些参数用于网页间传递数据。JavaScript提供了多种方式来获取这些参数。

使用内置对象 `URLSearchParams`

现代浏览器中，我们可以使用`URLSearchParams`对象来解析查询字符串。

// 假设当前URL是 "http://example.com/?name=JohnDoe&age=30"

// 获取当前URL的查询参数
const params = (new URL(document.location)).searchParams;

// 获取参数值
const name = params.get('name'); // "JohnDoe"
const age = params.get('age'); // "30"

// 遍历所有参数
for (const [key, value] of params) {
console.log(`${key}: ${value}`);
}

手动解析

如果你需要支持不兼容`URLSearchParams`的旧版浏览器，你可以手动解析查询字符串。

function getQueryVariable(variable) {
// 分割查询字符串
var query = window.location.search.substring(1);
var vars = query.split("&");


// 循环遍历每一对键值
for (var i=0;i
var pair = vars[i].split("=");

// 如果找到匹配的变量，则返回该值
if(pair[0] == variable){return pair[1];}
}
// 如果没有找到变量，或者没有值，则返回null
return null;
}

// 使用方法
var name = getQueryVariable("name"); // "JohnDoe"

使用 `decodeURIComponent`

由于查询参数可能会进行URL编码，所以你可能需要使用`decodeURIComponent`来解码参数值。

function getDecodedQueryVariable(variable) {
var value = getQueryVariable(variable);
return value ? decodeURIComponent(value.replace(/\+/g, ' ')) : null;
}

// 使用方法
var name = getDecodedQueryVariable("name"); // "John Doe" if there was a space