使用JavaScript获取URL参数的方法总结

// 获取当前页面的 URL
const urlParams = new URLSearchParams(window.location.search);

// 获取具体的参数值
const user = urlParams.get('user');  // 获取 'user' 参数
const age = urlParams.get('age');    // 获取 'age' 参数
const city = urlParams.get('city');  // 获取 'city' 参数

console.log(`User: ${user}`);  // 输出: User: JohnDoe
console.log(`Age: ${age}`);    // 输出: Age: 30
console.log(`City: ${city}`);  // 输出: City: NewYork

function getQueryParam(name) {
  const urlParams = window.location.search.substring(1);  // 获取查询字符串（去掉问号）
  const params = new URLSearchParams(urlParams);
  return params.get(name);
}

// 测试
const user = getQueryParam('user');
const age = getQueryParam('age');
const city = getQueryParam('city');

console.log(`User: ${user}`);  // 输出: User: JohnDoe
console.log(`Age: ${age}`);    // 输出: Age: 30
console.log(`City: ${city}`);  // 输出: City: NewYork

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

// 测试
const user = getQueryParam('user');
const age = getQueryParam('age');
const city = getQueryParam('city');

console.log(`User: ${user}`);  // 输出: User: JohnDoe
console.log(`Age: ${age}`);    // 输出: Age: 30
console.log(`City: ${city}`);  // 输出: City: NewYork

function getQueryParamFromFullUrl(url, param) {
  const urlObj = new URL(url);
  return urlObj.searchParams.get(param);
}

// 示例
const fullUrl = "https://www.example.com?user=JohnDoe&age=30&city=NewYork";
const user = getQueryParamFromFullUrl(fullUrl, "user");
const age = getQueryParamFromFullUrl(fullUrl, "age");
const city = getQueryParamFromFullUrl(fullUrl, "city");

console.log(`User: ${user}`);  // 输出: User: JohnDoe
console.log(`Age: ${age}`);    // 输出: Age: 30
console.log(`City: ${city}`);  // 输出: City: NewYork

// 假设我们有一个分页功能，URL 如：/products?page=2&limit=20

function getPaginationParams() {
  const urlParams = new URLSearchParams(window.location.search);
  const page = urlParams.get('page') || 1;  // 默认值为 1
  const limit = urlParams.get('limit') || 10;  // 默认值为 10
  return { page, limit };
}

const { page, limit } = getPaginationParams();
console.log(`当前页: ${page}, 每页显示: ${limit}`);