前端页面地址栏传参转义问题

在URL中，一些特殊字符如空格、中文、特殊符号等是不能直接出现的。如果不对这些字符进行转义，浏览器在解析URL时可能会出现错误，导致页面加载失败或参数解析错误。

1.特殊字符如下表

字符	URL编码值
空格	%20
双引号	%22
井号	%23
美元符号	%24
百分号	%25
和号	%26
单引号	%27
左括号	%28
右括号	%29
星号	%2A
加号	%2B
逗号	%2C
正斜杠	%2F
冒号	%3A
分号	%3B
小于号	%3C
等号	%3D
大于号	%3E
问号	%3F
@符号	%40
反斜杠	%5C
竖线	%7C

2.处理方法

传参前对参数进行处理。使用JavaScript的 encodeURIComponent()函数对参数值进行编码。例如：

	let paramValue = "用户名 张三";
	let encodedValue = encodeURIComponent(paramValue);
	console.log(encodedValue); // 输出：%E7%94%A8%E6%88%B7%E5%90%8D%20%E5%BC%A0%E4%B8%89

在接到数据后，再使用JavaScript中的decodeURIComponent()函数进行解码，如下：

	let encodedValue = "%E7%94%A8%E6%88%B7%E5%90%8D%20%E5%BC%A0%E4%B8%89";
	let decodedValue = decodeURIComponent(encodedValue);
	console.log(decodedValue); // 输出：用户名 张三

3.我遇到的问题

需求是：地址栏传参，参数是被base64编码后的

问题：base64编码后会出现 + / = 特殊字符，在地址栏进行了转义

解决办法： base64编码后的串用encodeURIComponent()函数进行再次编码，接到参数用decodeURIComponent()函数进行解码后得到base64串，再进行base64解码。

注意：原始数据中包含中文，如果使用atob()函数对其进行解码，则需要确保将解码后的二进制数据正确转换为UTF-8字符串。例如：

	// 假设这是一个Base64编码的字符串，表示 "你好，世界！"
	let base64EncodedString = "5L2g5aW977yM5LiW55WM77yB";
	// 使用 atob() 解码
	let decodedBinaryString = atob(base64EncodedString);
	// 将解码后的二进制字符串转换为UTF-8字符串
	// 在现代浏览器中，可以直接使用 TextDecoder 来处理
	let decodedString = new TextDecoder("utf-8").decode(Uint8Array.from(decodedBinaryString, c => c.charCodeAt(0)));
	console.log(decodedString); // 输出: "你好，世界！"

4.发现问题

在寻找解法的过程中（与以上无关），发现一个现象。+ 加号放在不同的网址后面会有不同的转义。一般是以下三种：

1）变为 %2B ，这个忘了哪个网址了

2）变为 %20，比如elmentUI网址后拼接

3）还是 + ，比如在baidu.com后拼接

第二种情况就会出现加号和空格转义相同了（目前也没遇到过这样的数据，只是尝试），目前没找到具体原因，也许和具体项目有关。大家可以一起讨论。