JavaScript 怎样从 URL 里获取参数

在 JavaScript 开发中，从 URL 里获取参数是一项常见任务。无论是构建单页面应用，还是处理服务器端传递的数据，掌握这一技能都至关重要。

URL 参数通常以键值对的形式存在，位于 URL 的问号（?）后面，多个参数之间用与号（&）分隔。例如：https://example.com/page?param1=value1&param2=value2。

获取 URL 参数的一种常用方法是使用 window.location.search 属性。该属性返回 URL 中问号后面的部分，即参数部分。例如：

const urlParams = window.location.search;
console.log(urlParams); 

这段代码会在控制台输出 ?param1=value1&param2=value2。但这样的输出还不能直接使用，我们需要进一步解析。

一种简单的解析方式是将参数部分按与号（&）分割成数组，然后再对每个参数项按等号（=）分割，从而获取键值对。示例代码如下：

const urlParams = window.location.search;
const paramsArray = urlParams.slice(1).split('&'); 
const paramsObject = {};

paramsArray.forEach((param) => {
    const [key, value] = param.split('=');
    paramsObject[key] = value;
});

console.log(paramsObject); 

上述代码中，首先使用 slice(1) 去掉开头的问号，再用 split('&') 按与号分割成数组。接着遍历数组，通过 split('=') 分割每个参数项，将键值对存入一个对象中。最终在控制台输出一个包含所有参数键值对的对象。

另外，还可以使用 URLSearchParams API 来更方便地处理 URL 参数。URLSearchParams 是 JavaScript 内置的对象，专门用于解析和操作 URL 参数。示例如下：

const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get('param1'); 
console.log(paramValue); 

通过 URLSearchParams 的 get 方法，可以直接获取指定参数的值。如果需要获取所有参数键值对，可以使用 entries 方法遍历：

const urlParams = new URLSearchParams(window.location.search);
for (const [key, value] of urlParams.entries()) {
    console.log(`${key}: ${value}`);
}

在 JavaScript 中从 URL 里获取参数有多种方式，开发者可根据具体需求和项目情况选择合适的方法，以实现高效准确的数据获取与处理。