JavaScript 如何获取 URL 上的参数

在JavaScript中获取URL上的参数主要涉及到 URLSearchParams对象、location.search属性和正则表达式。其中，URLSearchParams对象是最为直接和现代的方法，它提供了一种简便的方式来操作URL中的查询字符串。使用这个对象，我们可以轻松地获取、设置、删除URL的查询参数，而不必担心代码的复杂性。

一、使用URLSEARCHPARAMS对象

URLSearchParams是一个内置的浏览器API，它允许我们对URL的查询字符串进行解析和操作。这个对象提供了多种方法来处理查询参数，如.get()、.set()、.has()、.delete()等，使得对URL查询参数的操作变得非常方便。

获取URL参数的步骤包括创建一个URLSearchParams对象实例，然后使用其.get()方法传入参数名即可返回对应的参数值。若参数不存在，则返回null。

实现示例：

// 假设URL为: http://example.com/?name=John&age=30

let params = new URLSearchParams(window.location.search);
// 获取"name"参数的值
let name = params.get('name'); // 返回"John"
// 获取"age"参数的值
let age = params.get('age'); // 返回"30"

这种方法的优点是代码简洁易懂，而且URLSearchParams对象自带的方法也支持对查询参数的其他操作，如检查参数是否存在、添加或删除参数等。

二、利用LOCATION.SEARCH属性

location.search属性会返回URL的查询参数部分，即"?"符号之后的部分。使用这个属性，我们可以获取到整个查询字符串，进而通过编码逻辑解析出具体的参数值。

步骤是首先获取location.search，然后使用String方法如.substring()去掉开头的"?"，接下来使用.split('&')分割成键值对数组，最后遍历这个数组分别解析出每个参数的键和值。

实现示例：

// 获取查询字符串，去掉"?"

let queryString = window.location.search.substring(1);
// 分割成数组
let queries = queryString.split("&");
// 用于存放参数的对象
let params = {};
// 解析每个参数到params对象
queries.forEach((query) => {
  let [key, value] = query.split('=');
  params[key] = decodeURIComponent(value || '');
});
// 获取特定参数
let name = params["name"]; // "John"
let age = params["age"]; // "30"

这种方法比使用URLSearchParams对象更为复杂，但它不依赖于现代浏览器的API，因而在更广泛的环境中具有兼容性。

三、通过正则表达式匹配

使用正则表达式是另一种在URL中解析参数的方法。这种方法相对更为通用，可以在不支持URLSearchParams接口的环境下使用。

实现步骤是构建一个正则表达式来匹配URL中的参数，然后使用RegExp对象的.exec()方法来获取匹配结果。

实现示例：

function getParamByName(name, url = window.location.href) {

    name = name.replace(/[\[\]]/g, '\\$&');
    let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
let name = getParamByName('name'); // "John"
let age = getParamByName('age'); // "30"

这种方法虽然灵活且兼容性强，但阅读起来相对较困难，特别是对于不熟悉正则表达式的开发者。

四、结论

在JavaScript中获取URL上的参数，URLSearchParams对象提供了最为直接和现代的方法，建议在支持该API的环境下优先使用它。而location.search属性和正则表达式提供了更为通用的解决方案，适用于需要兼容旧浏览器的场景。

归根到底，选择哪种方法取决于项目的具体需求以及目标浏览器的兼容性。然而，无论哪种方式，了解如何在JavaScript中处理URL参数都是一项重要的技能，它为我们与网页URL之间的交互提供了更多的可能性。

相关问答FAQs：

1. JavaScript中获取URL上参数的方法有哪些？

有几种方法可以在JavaScript中获取URL上的参数：

• 使用window.location.search属性来获取URL查询字符串部分，然后使用字符串操作方法进行解析和提取参数。
• 使用URLSearchParamsAPI来获取URL上的查询参数。这是一种现代浏览器支持的新API，并可以方便地对参数进行操作和提取。
• 使用正则表达式来匹配URL上的参数。使用正则表达式可以更灵活地进行匹配和解析，但相对复杂一些。

2. 如何使用window.location.search获取URL上的参数？

window.location.search属性返回URL上的查询字符串（即以问号开始的部分）。可以将它作为一个字符串来处理，然后使用字符串操作方法进行解析和提取参数。
例如，假设URL是http://example.com/?id=123&name=John，可以使用以下方法获取参数：

let search = window.location.search;
let params = new URLSearchParams(search);
let id = params.get("id");
let name = params.get("name");

3. 如何使用URLSearchParamsAPI获取URL上的参数？

URLSearchParams是现代浏览器提供的用于处理URL查询参数的API。可以使用它的实例方法来获取和操作URL上的参数。
例如，假设URL是http://example.com/?id=123&name=John，可以使用以下方法获取参数：

let searchParams = new URLSearchParams(window.location.search);
let id = searchParams.get("id");
let name = searchParams.get("name");