JS全局对象 : 编码和解码

最新推荐文章于 2025-06-11 15:08:45 发布

转载最新推荐文章于 2025-06-11 15:08:45 发布 · 817 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bd127d96fb9a05cea7fcef4

文章标签：

#javascript #ViewUI

本文深入探讨了JavaScript中用于处理URI的编码和解码函数，包括encodeURI(), decodeURI(), encodeURIComponent()和decodeURIComponent()。解释了它们之间的区别，以及如何在有效URI中使用UTF-8编码来替换特殊字符，确保浏览器的正确解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编码和解码

JS全局对象中编码和解码的函数：encodeURI() decodeURI() encodeURIComponent() decodeURIComponent()

URI:Uniform Resource Identifier 统一资源标识符
复制代码

`有效的URI`中不包含`空格`、`%`等特殊符号，所以需要`URI编码方法`用`UTF-8编码`替换这些字符，让浏览器接受和理解。

区别：
encodeURI()不会对本身属于URI的特殊字符进行编码，例如: / : ? #``@ & = + $ , ;
encodeURIComponent()会对它发现的任何非标准字符（非字母数字字符）进行编码
encodeURI()对应的解码函数是decodeURI()
encodeURIComponent()对应的解码函数是decodeURIComponent()

<script type="text/javascript">
var test = "http://www.w3school.com.cn/My first/"
# encodeURI()编码
var encodeText = encodeURI(test)
var decodeText = decodeURI(encodeText)
##encodeText => http://www.w3school.com.cn/My%20first/
##decodeText => http://www.w3school.com.cn/My first/

# encodeURIComponent()编码
var enComText = encodeURIComponent(test)
var deComText = decodeURIComponent(enComText)
## enComText => http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
## deComText => http://www.w3school.com.cn/My first/

# 测试
var deText = decodeURI(enComText)
var decodeComText = decodeURIComponent(encodeText)
## deText => http%3A%2F%2Fwww.w3school.com.cn%2FMy first%2F
## decodeComText => http://www.w3school.com.cn/My first/
</script>
复制代码

encodeURIComponent()相比encodeURI()编码得更加彻底
大多使用encodeURIComponent()编码，用 decodeURIComponent()解码

汉字字符串的编码和解码

encodeURI('狗子') => "%E7%8B%97%E5%AD%90"
decodeURI('%E7%8B%97%E5%AD%90') => "狗子"
encodeURIComponent('狗子') => "%E7%8B%97%E5%AD%90"
decodeURIComponent('%E7%8B%97%E5%AD%90') => "狗子"
复制代码