标签（空格分隔）： encodeURIComponent decodeURIComponent Unicode decodeURI encodeURI

---

image.png

序

引入一段官话：“encodeURIComponent()是对URI的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码。而encodeURI() 是对URI进行编码的方法。它使用1到4个转义序列来表示每个字符的UTF-8编码。”

细心的小伙伴已经发现，二者的不同之处了，都是对地址栏里的地址进行utf-8编码，前者是只针对部分,具体来说是针对参数的值进行编码，后者是针对整个。所以二者语法相同，参数不同。

• URI：统一资源标识符,也就是浏览器地址栏里的一串地址，俗称网址。
• url参数举例：https: //www.baidu.com/s?name1=麦壳&name2=麦兜
  这里的name1就是第一组参数，key是“name1”;value是“麦壳”；
  name2就是第二组参数，key是“name2”;value是“麦兜”；

所以对这串地址使用encodeURIComponent编码，只会对“麦壳”“麦兜”有效。

语法以及参数

encodeURIComponent(str);
参数
str
String. URI 的组成部分。

encodeURI(str);
参数
str
String. URI。

从单词本身也很好记住二者区别:

"en":正向-编
"code":码
"URI":网址
"Component":部分

连起来，就是对网址的一部分进行编码。对于已经进行可编码的URI怎么进行解码呢？当然是：decodeURIComponent（）。
"de":反向-解

补充

encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有字符。

兼容性

不管是pc还是手机浏览器都对二者完全支持。不存在兼容问题，所以实际项目中出现编码转码问题不要想着是兼容问题导致的了。

坑

举一个实际开发中出现的问题。项目已经上线了，技术老大偶然发现一个问题，一次分享传参问题，就是从app的一个webview页面分享到微博时候，需要webview通过地址栏传递一个用户的name。在微博打开却是一串“%EF99%....”编码过的;最后将这一串编码放在在线工具里可以解出对应的中文name，但是要点击操作2次，说明：这个原始的name进行了2次的编码。原生把name放置在地址栏时会进行编码的，我们拿来使用的时候会进行转码的。经过测试验证：发现只有在IOS进行微博分享有这个问题，安卓没有，其他途径的分享也没有，锁定目标，微博拿到这个地址时候又进行了一次enCodeURIComppponent编码，所以，解决办法就是在我h5的分享页里在判断是IOS平台而且是微博时候对从地址栏取到的name进行2次转码。

小结

和我们编程有关的是带有URI字样的encodeURIComponent、encodeURI；Unicode只是一个编码方案。

-----喜欢就动动小手哈。-----
-----你的支持是洒家-麦壳-macrolam前进的动力-----