使用encodeURIComponent对含URL的JSON字串转义

WHY

用uniapp做h5页面时，经常会用到url传参，如果参数是对象，需要将对象先转为json字串。

该对象的内容可以是简单的string，也极有可能是带有 // 等特殊符号的url。如果直接使用 const jsonObj = JSON.stringify(item) 去处理对象，就会发现在子页面进行 JSON.parse(jsonObj) 时，报错不断。

所以在json序列化前，请先考虑对象中是否含有url。不确定的话，一律使用encodeURIComponent 对url进行转义防止解析错误。

encodeURIComponent() 是对统一资源标识符（URI）的组成部分进行编码的方法。 它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码（只有由两个Unicode代理区字符组成的字符才用四个转义字符编码）。

最佳实践：

传递前：

handleDetail(e) {
	let obj = encodeURIComponent(JSON.stringify(e))
	this.$tab.navigateTo(`/pages/work/xxxx?data=${obj}`)
},

encodeURIComponent()

解析：

onLoad: function (e) {
  if (e.data) {
    try {
      this.formData = JSON.parse(decodeURIComponent(e.data))
    } catch (error) {
      this.$modal.msgError("解析错误")
    }
  }
  this.getUsers()
},

它和 encodeURI() 之间的差别？

是的，还有一个基础版的转义api encodeURI。就像它本身更短的名字一样，它转义的范围更基础一些。

1. 编码范围不同: encodeURIComponent() 会对 URI 组件中的所有非字母数字字符进行编码,包括斜杠 /、问号 ?、冒号 : 等特殊字符。 encodeURI() 则只会对那些在 URI 中有特殊含义的字符进行编码,比如空格、井号 # 、百分号 % 等,而不会对斜杠 / 进行编码。
2. 适用场景不同: encodeURIComponent() 通常用于对 URI 组件(如查询参数或路径段)进行编码。 encodeURI() 通常用于对整个 URI 进行编码,例如对完整的 URL 进行编码。
3. 编码结果不同: 由于编码范围的差异,使用 encodeURIComponent() 得到的编码字符串通常会比 encodeURI() 编码的结果更长。

encodeURIComponent('https://example.com/search?q=hello world') 
// 输出: "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world"

encodeURI('https://example.com/search?q=hello world')
// 输出: "https://example.com/search?q=hello%20world"

由此可见，选择encodeURIComponent更为稳妥的选择，而且在我的使用场景下，需要对// 进行转义。