在JavaScript中获取URL超链接的参数值,通常可以通过解析URL中的查询字符串(query string)来实现。以下是一些基础概念、方法及其应用场景:
https://example.com/page?param1=value1¶m2=value2
。?
后面的部分,由一系列key=value
对组成,各对之间用&
分隔。URLSearchParams
URLSearchParams
接口提供了方便的方法来处理查询字符串。
// 假设当前URL为 https://example.com/page?name=John&age=30
const params = new URLSearchParams(window.location.search);
// 获取单个参数值
const name = params.get('name'); // "John"
const age = params.get('age'); // "30"
// 遍历所有参数
params.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
如果不使用URLSearchParams
,也可以手动解析查询字符串。
// 假设当前URL为 https://example.com/page?name=John&age=30
function getQueryParamByName(name) {
const queryStr = window.location.search.substring(1); // 去掉'?'
const paramsArray = queryStr.split('&');
for (let param of paramsArray) {
const [key, value] = param.split('=');
if (key === name) {
return decodeURIComponent(value); // 解码参数值
}
}
return null;
}
const name = getQueryParamByName('name'); // "John"
const age = getQueryParamByName('age'); // "30"
URLSearchParams.get()
会返回null
,手动解析方法中需要处理这种情况。decodeURIComponent
进行解码。URLSearchParams.getAll()
可以获取所有值。const params = new URLSearchParams(window.location.search);
const allNames = params.getAll('name'); // 如果有多个name参数,返回数组
通过以上方法,可以有效地在JavaScript中获取URL超链接的参数值,并根据具体需求进行处理。
领取专属 10元无门槛券
手把手带您无忧上云