encodeURI 和 encodeURIComponent

￡神魔★判官ぃ 2021-09-18 07:54 234阅读 1赞

### **URL编码你可能会懵** ###

我们要查询一个年龄为 20，姓名包含 `tom` 的人，那么我们会这样去组织请求

var url = "http//xxx/age=20&name=tom"

然后服务端就能收到下面的接口请求参数

{
      "age": "20",
      "name": "tom"
    }

如果我要搜索的姓名是 `tom&lucy`，那么 url 就变成了

var url = "http//xxx?age=20&name=tom&lucy"

我们预想的结果是

{
      "age": "20",
      "name": "tom&lucy"
    }

然而实际上却是

{
      "age": "20",
      "name": "tom",
      "lucy": ""
    }

想必大家也都能理解，这个参数中包含 `&`，就被当做 URL 本身的参数结构了，关键是如何解决这个问题呢？

### encodeURI ###

可能有的同学知道 JavaScript 中有个 `encodeURI()` 方法用来对 URI 进行编码。接下来我们试试

encodeURI(url)

得到的是什么结果呢？抱歉，和原 url 一模一样，没有任何变化。为什么会这样呢？

这是因为 `encodeURI` 强调的是给整个 URL 进行编码，用特殊的 UTF-8 编码替换所有无效的字符，从而让浏览器能够接受和理解。比如

encodeURI('http//xxx?age=20 &name=王二狗&lucy')

编码后的结果为

"http//xxx?age=20%20&name=%E7%8E%8B%E4%BA%8C%E7%8B%97&lucy"

可以看到，里面的空格和中文都被编码了，而 `&` 和 `=` 并未被编码。

### encodeURIComponent ###

相比于 `encodeURI`，`encodeURIComponent` 则强调对 URL 中的某部分进行彻底编码，比 encodeURI 编码的范围更大，能够多编码的字符 `@#$&=:/,;?+`。

可见 `?#&` 这些本属于 URL 结构的特殊字符会被 `encodeURIComponent` 编码，而不会被 `encodeURI` 编码。

所以我们改为用 encodeURIComponent 来解决上面的问题

encodeURIComponent("http//xxx?age=20&name=tom&lucy")

结果是

"http%2F%2Fxxx%3Fage%3D20%26name%3Dtom%26lucy"

放到浏览器里面直接不认识，什么情况？请注意，encodeURIComponent 是用在对 URL 的某部分进行编码，编码的结果为纯粹的字符串，肯定是不能对整个 URL 运用这个方法的。

正确的姿势是单独对 `name` 的值进行编码

let _name = encodeURIComponent('tom&lucy')
    let url = 'http//xxx?age=20&name=' + _name

这里 `_name` 就变成了 `tom%26lucy`，可见 `&` 被编码成了 `%26`。

这样就会被接口识别为

{
      "age": "20",
      "name": "tom&lucy"
    }

通常，如果有一批查询条件的话，我们可以这样处理

let params = {
      "name": 'tom&lucy'
    }

### axios ###

说到这里我想到了常用的第三方请求库，比如 axios

axios.get('http://xxx/test', {
      params: {
        age: 20,
        name: 'tom&lucy'
      }
    })

经测试，结果正确。然后通过查看源码发现 axios 对每个参数都进行了下面的处理

function encode(val) {
      return encodeURIComponent(val).
        replace(/%40/gi, '@').
        replace(/%3A/gi, ':').
        replace(/%24/g, '$').
        replace(/%2C/gi, ',').
        replace(/%20/g, '+').
        replace(/%5B/gi, '[').
        replace(/%5D/gi, ']');
    }

为什么后面多出来这么多 `replace` 呢？ encodeURIComponent 会把 `@` 编码为 `%40`，然后又被替换回去了。所以意思就是，不让 encodeURIComponent 编码 `@:$,+[]` 字符，但是几个关键的字符 `#?&` 还是会被编码的。

### 结论 ###

`encodeURI` 本质上对接口的识别没有任何影响，仅仅是为了让 URL 更好看。

`encodeURIComponent` 则是彻底解决了特殊字符带来的影响，能够正确识别参数值中的特殊字符。