js获取来路域名参数

基础概念

在JavaScript中，获取URL中的查询参数（即来路域名参数）是一种常见的需求。查询参数通常出现在URL的?符号之后，以key=value的形式出现，并且多个参数之间用&符号分隔。

类型与应用场景

查询参数通常用于以下场景：

搜索功能：在搜索引擎中，用户输入的关键词作为查询参数传递给服务器。
分页导航：在分页显示数据的网页中，页码作为查询参数传递。
个性化设置：根据用户传递的参数显示不同的内容或布局。

如何获取来路域名参数

在JavaScript中，可以通过URLSearchParams接口来获取查询参数。以下是一个示例代码：

// 假设当前URL为：https://example.com/?name=John&age=30

// 获取当前URL的查询字符串部分
const queryString = window.location.search;

// 创建一个URLSearchParams对象
const params = new URLSearchParams(queryString);

// 获取特定参数的值
const name = params.get('name'); // 'John'
const age = params.get('age'); // '30'

console.log(`Name: ${name}, Age: ${age}`);

遇到的问题及解决方法

问题1：如何处理参数不存在的情况？

解决方法：使用URLSearchParams.get()方法获取参数值时，如果参数不存在，将返回null。因此，在使用参数值之前，最好进行检查。

const name = params.get('name');
if (name) {
  console.log(`Name: ${name}`);
} else {
  console.log('Name parameter is missing');
}

问题2：如何处理参数值中的特殊字符？

解决方法：URLSearchParams会自动处理URL编码和解码。因此，传递给get()方法的参数值已经是解码后的字符串。如果需要手动编码或解码，可以使用encodeURIComponent()和decodeURIComponent()函数。

// 编码
const encodedName = encodeURIComponent('John Doe');
console.log(encodedName); // 'John%20Doe'

// 解码
const decodedName = decodeURIComponent(encodedName);
console.log(decodedName); // 'John Doe'