JavaScript 如何编码解码

你可能在网上填表单时遇到过地址里带%20的字符，或者复制链接时发现一串奇怪的百分号组合——这些其实是网页里的“编码解码”在起作用。简单来说，编码就是把普通人能看懂的文字，变成浏览器和服务器能读懂的“暗号”；解码则是反过来，把暗号还原成正常内容。JavaScript作为网页里最常用的脚本语言，自带了两个实用的编码解码工具，接下来用生活化的例子讲清楚它们的用法。

为什么需要编码解码？

想象你给远方的朋友写了一封手写的信，里面有特殊符号、空格或者外文单词，邮递员可能因为看不懂这些内容，没法准确送到。网页的数据传递也是一样：浏览器和服务器之间只能传递英文字母、数字和少数几个符号，要是遇到“北京·朝阳”里的点、“hello world”里的空格，或者“你好”这类中文，就会传递失败。这时候就得用编码把这些“特殊内容”转成统一的格式，解码则是把转后的内容还原，让大家都能看懂。

常用的编码方式

JavaScript里最常用的编码有两种，对应两种场景，就像寄信时用的两种信封，适合不同的内容。

第一种是encodeURI()，用来编码整个网页地址。比如你想给朋友发一个带搜索词的链接，搜索词是“北京 美食”，直接把链接发给对方，空格会导致链接出错。用encodeURI()处理后，空格会变成%20，链接就变成了https://www.baidu.com/s?wd=北京%20美食，这样不管是浏览器还是朋友，都能准确打开这个链接。要注意，encodeURI()不会编码URL里的特殊符号，比如冒号、问号，要是把这些也转了，整个URL就变成无效的了。

第二种是encodeURIComponent()，适合编码URL里的一部分内容，比如搜索词、参数值。还是刚才的例子，要是你直接用encodeURIComponent()处理“北京 美食”，结果是%E5%8C%97%E4%BA%AC%20%E7%BE%8E%E9%A3%9F，不仅转了空格，还把中文转成了一串百分号加数字的组合。如果把这串结果当成URL的一部分，放到参数里，就不会和URL的其他部分（比如&分隔符）冲突，比如https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%20%E7%BE%8E%E9%A3%9F，这样更安全，不会因为内容里的特殊符号搞乱整个URL的结构。

怎么对应解码？

编码的目的是为了传递，收到内容后就得解码，JavaScript里对应的解码方法也有两种，和编码一一对应。

要是用encodeURI()编码的内容，就用decodeURI()解码。比如你复制了刚才的链接，里面的%20和中文转码后的内容，用decodeURI()处理后，就能还原成原来的“北京 美食”，适合还原整个URL的内容。

要是用encodeURIComponent()编码的内容，就用decodeURIComponent()解码，这是更常用的场景。比如你在网页里填了收货地址，提交给服务器后，服务器返回的内容里有编码后的中文，用decodeURIComponent()处理，就能看到“上海市浦东新区”这样的正常文字。

举个日常的小例子

你在网上给朋友发了一条消息：“今晚去吃火锅，地点在‘人民广场’店”，想把这个内容分享到朋友圈，直接发的话，特殊符号可能会被朋友圈的系统误判。用JavaScript的encodeURIComponent()处理这条消息，得到%E4%BB%8A%E6%99%9A%E5%8E%BB%E5%90%83%E7%81%AB%E9%94%85%EF%BC%8C%E5%9C%B0%E7%82%B9%E5%9C%A8%E2%80%9C%E4%BA%BA%E6%B0%91%E5%B9%BF%E5%9C%BA%E2%80%9D%E5%BA%97，把这段复制到朋友圈，系统能正确识别，朋友收到后，用decodeURIComponent()解码，就能看到原来的消息了。

记住，编码解码不是“加密”，只是格式转换，目的是让数据在浏览器和服务器之间顺利传递，掌握这两个方法，就能轻松处理网页里的特殊内容了。