怎么用js读取url参数

原创

admin 3周前 (08-23) 阅读数 63 #Javascript

文章标签 Javascript

Javascript 读取 URL 参数的实用指南

在现代的Web开发中，URL 参数传递是前后端数据交互的基础之一。在Javascript中，我们可以通过几种不同的对策来读取URL中的参数。下面将介绍几种常用的方法。

方法一：使用内置的URLSearchParams API

现代浏览器中提供了一个非常方便的API：URLSearchParams，可以很简洁的从URL中获取参数。


function getParamsUsingURLSearchParams() {
  const params = new URLSearchParams(window.location.search);
  const myParam = params.get('myParam'); // 获取名为'myParam'的参数值
  console.log(myParam); // 输出参数值
}
getParamsUsingURLSearchParams();

方法二：传统对策手动解析

如果需要兼容一些老旧的浏览器，可以使用字符串操作方法手动解析查询字符串。


function getParamsManually() {
  const query = window.location.search.substring(1); // 获取查询字符串，移除开头的'?'
  const params = query.split("&"); // 分割参数成数组
  const paramsObj = {};
  params.forEach(function(param) {
    const keyValuePair = param.split("=");
    paramsObj[keyValuePair[0]] = keyValuePair[1];
  });
  const myParam = paramsObj['myParam']; // 获取'myParam'的值
  console.log(myParam); // 输出参数值
}
getParamsManually();

方法三：使用第三方库

还有许多第三方库如jQuery等，提供了对URL参数解析的拥护。例如，使用jQuery的$.param()和$.deparam()函数。

以下是一个不使用jQuery，而是假设的第三方库的使用示例：


// 假设的第三方库函数，实际中需要采取库的文档使用
function getParamsUsingThirdPartyLib() {
  const myParam = ThirdPartyLib.getParam('myParam');
  console.log(myParam); // 输出参数值
}
getParamsUsingThirdPartyLib();

在实际开发过程中，推荐使用内置的URLSearchParams API，归因于它简洁、直接且无需引入任何外部库。