JavaScript中轻松获取页面参数值的N种方法(含代码示例)

function getUrlParams() {
  const searchParams = new URLSearchParams(window.location.search);
  const search = searchParams.get('search'); // 获取'search'参数的值
  const mode = searchParams.get('mode'); // 获取'mode'参数的值
  return { search, mode };
}

console.log(getUrlParams()); // 输出：{ search: 'frontend', mode: 'expert' }

function getQueryParam(paramName) {
  const urlParams = new URLSearchParams(window.location.search);
  const paramString = window.location.search.substr(1); // 去掉开头的问号
  const paramPairs = paramString.split('&');

  for (let i = 0; i < paramPairs.length; i++) {
    const pair = paramPairs[i].split('=');
    if (decodeURIComponent(pair[0]) === paramName) {
      return decodeURIComponent(pair[1]);
    }
  }

  return null;
}

console.log(getQueryParam('search')); // 输出：'frontend'

// urlParams.js
export function getUrlParam(paramName) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(paramName);
}

// 在其他文件中使用
import { getUrlParam } from './urlParams';

console.log(getUrlParam('search')); // 输出：'frontend'

// 构建带参数的URL
function buildUrl(paramName, paramValue) {
  const encodedValue = encodeURIComponent(paramValue);
  return `https://example.com/?${paramName}=${encodedValue}`;
}

// 解析URL
const decodedValue = decodeURIComponent(getUrlParam('paramName'));