如何从url中提取参数值？1.使用urlsearchparams是现代推荐方法，适用于大多数浏览器，能轻松解析参数并处理编码；2.正则表达式适用于兼容老浏览器或高性能场景，但需手动解码；3.第三方库如qs适合处理复杂结构，支持嵌套对象和数组，但会增加依赖。例如，urlsearchparams可直接解析"tag=javascript&tag=nodejs"获取多个同名参数，正则表达式需通过特殊匹配提取，而qs则能解析出完整对象结构。
直接从URL中提取参数值，听起来简单，但实际应用中却藏着不少小技巧。最直接的方法是使用URLSearchParams，现代浏览器都支持，用起来非常方便。当然，如果兼容性要求高，正则表达式也能派上大用场。还有一些库，比如qs，可以更方便地处理复杂的参数结构。
解决方案
1. 使用 URLSearchParams (推荐)
这是最现代、最简洁的方法，适用于大多数现代浏览器。
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
const urlParams = new URLSearchParams(new URL(url).search);
return urlParams.get(name) || null;
}
// 示例
const url = "https://www.example.com/page?name=John&age=30&city=New%20York";
const name = getParameterByName('name', url); // John
const age = getParameterByName('age', url); // 30
const city = getParameterByName('city', url); // New York
console.log("Name:", name);
console.log("Age:", age);
console.log("City:", city);
// 获取多个相同参数名的值
const url2 = "https://www.example.com/page?tag=javascript&tag=nodejs&tag=react";
const urlParams2 = new URLSearchParams(new URL(url2).search);
const tags = urlParams2.getAll('tag'); // ['javascript', 'nodejs', 'react']
console.log("Tags:", tags);这个方法的好处是简单易懂，而且URLSearchParams对象提供了一系列方便的方法来操作URL参数。注意，new URL(url).search 确保了能正确解析包含复杂字符的URL。
2. 使用正则表达式
如果需要兼容老版本的浏览器，或者对性能有极致要求，可以使用正则表达式。
function getParameterByNameRegex(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// 示例
const url = "https://www.example.com/page?name=John&age=30";
const name = getParameterByNameRegex('name', url); // John
const age = getParameterByNameRegex('age', url); // 30
console.log("Name:", name);
console.log("Age:", age);正则表达式方法稍微复杂一些，但它不依赖于任何新的API，因此兼容性更好。需要注意的是，要使用decodeURIComponent来解码URL编码的参数值。
3. 使用第三方库 (例如 qs)
对于更复杂的URL参数，例如嵌套的对象或数组，使用第三方库可能更方便。qs 是一个流行的库，可以用来解析和序列化URL参数。
首先，安装 qs:
npm install qs
然后，在你的代码中使用它：
import qs from 'qs';
function getParameterByNameQs(name, url = window.location.href) {
const queryString = url.split('?')[1];
if (!queryString) return null;
const parsedQuery = qs.parse(queryString);
return parsedQuery[name] || null;
}
// 示例
const url = "https://www.example.com/page?name=John&age=30&address[city]=New%20York&address[country]=USA";
const name = getParameterByNameQs('name', url); // John
const age = getParameterByNameQs('age', url); // 30
const city = getParameterByNameQs('address[city]', url); // New York
console.log("Name:", name);
console.log("Age:", age);
console.log("City:", city);
// 解析整个query string
const url2 = "https://www.example.com/page?name=John&age=30&address[city]=New%20York&address[country]=USA";
const queryString2 = url2.split('?')[1];
const parsedQuery2 = qs.parse(queryString2);
console.log("Parsed Query:", parsedQuery2);
// 输出:
// {
// name: 'John',
// age: '30',
// address: { city: 'New York', country: 'USA' }
// }qs 库可以处理更复杂的URL结构，让代码更简洁易懂。但需要注意的是，引入第三方库会增加项目的依赖。
如何处理URL中包含特殊字符的参数值？
URL中的某些字符（例如空格、#、&）需要进行编码才能正确传递。通常，这些字符会被编码成 %20、%23、%26 等形式。在获取参数值之后，需要对这些编码进行解码，才能得到原始的参数值。
URLSearchParams 和 decodeURIComponent 都能自动处理这些编码，因此使用它们可以避免手动解码的麻烦。但如果使用正则表达式，则需要手动使用 decodeURIComponent 进行解码。
例如：
const url = "https://www.example.com/page?message=Hello%20World%231&name=John%26Doe";
// 使用 URLSearchParams
const urlParams = new URLSearchParams(new URL(url).search);
const message = urlParams.get('message'); // Hello World#1
const name = urlParams.get('name'); // John&Doe
console.log("Message:", message);
console.log("Name:", name);
// 使用正则表达式 (需要手动解码)
function getParameterByNameRegex(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
const messageRegex = getParameterByNameRegex('message', url); // Hello World#1
const nameRegex = getParameterByNameRegex('name', url); // John&Doe
console.log("Message (Regex):", messageRegex);
console.log("Name (Regex):", nameRegex);如何获取URL中的哈希值（#后面的部分）？
哈希值（也称为锚点）是URL中 # 符号后面的部分。它通常用于在页面内跳转到特定的位置。要获取哈希值，可以使用 window.location.hash 属性。
const url = "https://www.example.com/page#section2";
const hash = window.location.hash; // #section2
console.log("Hash:", hash);
// 去掉 # 符号
const hashWithoutPound = hash.substring(1); // section2
console.log("Hash without #: ", hashWithoutPound);需要注意的是，哈希值不会被发送到服务器，它只在客户端起作用。
什么时候应该使用哪种方法？
选择哪种方法取决于你的具体需求：
-
URLSearchParams: 如果你的目标是现代浏览器，并且不需要处理非常复杂的URL结构，那么URLSearchParams是最佳选择。它简单易用，而且性能也不错。 - 正则表达式: 如果你需要兼容老版本的浏览器，或者对性能有极致要求，那么可以使用正则表达式。但需要注意的是，正则表达式的编写和维护可能会比较困难。
-
第三方库 (
qs): 如果你需要处理非常复杂的URL结构，例如嵌套的对象或数组，那么使用第三方库可能更方便。但需要注意的是，引入第三方库会增加项目的依赖。
总的来说，URLSearchParams 是一个不错的起点，只有在它无法满足你的需求时，才考虑使用其他方法。
