encodeURI()与encodeURIComponent()那些事

前言

      最近接手个新的小程序项目、多多少少感觉坑坑洼洼, 夯实基础才是硬道理.

Api使用说明

①. encodeURI()
语法：

 encodeURI(URIstring) // URIstring为必需。一个字符串，含有 URI 或其他要编码的文本。

说明：
A) 不会对ASCII字母和数字进行编码、也不会对如下ASCII标点符号进行编码: - _ . ! ~ * ' ( )
B) 对具有特殊含义的ASCII标点符号，也是不会进行转义的: ;/?:@&=+$,#

②. encodeURIComponent()
语法：

encodeURIComponent(uri) // uri	必需。一个字符串，含有 URI 组件或其他要编码的文本。

说明:
A) 不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( )
B) 其他字符（比如： ;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的

概念的东西说完了, 接下来结合Demo加以理解!

const test = "https://juejin.cn/";
console.log(encodeURI(test));   
console.log(encodeURIComponent(test));  

看看控制台输出的内容如下: 可以简单理解: encodeURIComponent会把https://编码成https%3A%2F%2F, But encodeURI不会.

场景选择 当你需要编码URL中的参数时, 建议采用encodeURIComponent()
Tips:
encodeURIComponent()编码后, 必须要用decodeURIComponent()对应解码;

Demo演示

需求来源:
在页面跳转时, 可能某些场景下会需要携带一些参数, 比如需要携带用户的头像信息去跳转[假设], 该头像链接可能带有些特殊字符, 我们看看前后对比图.
A页面点击跳转到B页面--无encodeURIComponent:

// A.js
const url = '/pages/userCenter/userCenter';
let headImg = 'https://xxx.com.cn?xxx=xxx&exporedTimed=xxx';
const reqUrl =  `${url}?headImg=${headImg}`;
console.log('跳转前链接', reqUrl);
wx.navigateTo({
  url:reqUrl
})

//B.js
onLoad: function (options) {
  console.log("跳转后接收到的参数信息",options);
},

查看下控制台输出: 怎么headImg的值?后的数据丢失了???

接下来, 看看A页面点击跳转到B页面--有encodeURIComponent:

// A.js
const url = '/pages/userCenter/userCenter';
let headImg = 'https://xxx.com.cn?xxx=xxx&exporedTimed=xxx';
headImg = encodeURIComponent(headImg);   
const reqUrl =  `${url}?headImg=${headImg}`;
console.log('跳转前链接', reqUrl);
wx.navigateTo({
  url:reqUrl
})

//B.js
onLoad: function (options) {
  console.log("跳转后接收到的参数信息",options, decodeURIComponent(options.headImg));
},

再查看下控制台输出:
这会我们发现: 传参正常、无丢失的情况~

接下来, 我们看看若有多个参数、该怎么编码解码呢?

总结

     在处理页面跳转、跟服务器端进行交互时, 凡涉及到对URI进行解析的、最好用encodeURIComponent进行编码避免部分数据的丢失.