JavaScript URL中文参数乱码解决方案与编码方法详解

场景复现：

在开发后台管理系统时，遇到一个Bug：点击“导出数据”按钮后，下载的文件内容为空。

乱码的url

正确的url

Bug解决思路：

首先，文件为空通常意味着请求的URL路径不正确，可能返回了未带参数的空模板，因此初步判断是参数传递存在问题。

其次，通过控制台打印输出的URL，可以观察到参数中的中文出现了乱码现象。

接下来需要解决的是中文乱码问题（这也是本文重点探讨的难点）。

起初，我尝试了encodeURI、decodeURI、encodeURIComponent以及decodeURIComponent方法，这些在常规情况下通常有效，但在此处并未解决问题。随后，我在导出数据接口处打印了{key}和{form[key]}的值，发现结果均为undefined。经过反复测试，最终通过添加一个value参数成功解决了问题。

思路纠错：

此前，我将大量时间用于对比当前页面的导出接口与其他页面的导出接口是否一致，发现代码写法完全相同，却忽略了深入分析具体传值的需求。这种对具体数值处理逻辑的忽视导致了排查过程的耗时。

URL传参中文乱码的解决方法

1、escape 和 unescape

escape()函数不能直接用于URL编码，其核心作用是返回字符的Unicode编码值。

该方法采用Unicode字符集对指定字符串进行编码（0-255范围内的字符除外）。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。 escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z。

escape()函数用于js对字符串进行编码，不常用。

//跳转页
location.href = './test.html?'+escape('name=张三&age=18')
//接收页
var str = unescape(location.search.substr(1));
//url显示
'test.html?name%3D%u5F20%u4E09%26age%3D18'

2、encodeURI 和 decodeURI

把URI字符串采用UTF-8编码格式转化成escape各式的字符串。

encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z

encodeURI()用于整个url编码。

//跳转页
location.href = encodeURI('./test.html?name=张三&age=18');
//接收页
var str = decodeURI(location.search.substr(1));
//url显示
'test.html?name=张三&age=18'

3、encodeURIComponent 和 decodeURIComponent

与encodeURI()的不同的是，“; / ? : @ & = + $ , #”，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。把URI字符串采用UTF-8编码格式转化成escape格式的字符串。

//跳转页
location.href = './test.html?'+encodeURIComponent('name=张三&age=18');
//接收页
var str = decodeURIComponent(location.search.substr(1));
//url显示
'test.html?name%3D张三%26age%3D18'

总结

到此这篇关于js解决url传递中文参数乱码问题的文章就介绍到这了,更多相关js url传递中文参数乱码内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！