首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一文助你分清encodeURI与encodeURIComponent

一文助你分清encodeURI与encodeURIComponent

作者头像
薛定喵君
发布2021-08-23 10:37:10
6480
发布2021-08-23 10:37:10
举报
文章被收录于专栏:薛定喵君薛定喵君

帮助你区别 encodeURI 与 encodeURIComponent 的使用场景

# 背景

最近在公司做预览功能时,遇到对请求参数进行编码的场景。那么问题来了:

  • 为什么要对链接或参数进行编码?
  • 何时需要编码?
  • encodeURI 与 encodeURIComponent 有啥区别呢?

下面来一起看看吧~

# 为啥需要编码

Http 协议中参数的传输是"key=value"这种键值对形式的,如果要传多个参数就需要用"&"符号对键值对进行分割。如"?name1=value1&name2=value2",这样在服务端在收到这种字符串的时候,会用"&"分割出每一个参数,然后再用"="来分割出参数值。

URL 是采用 ASCII 字符集进行编码的,根据 RFC3986 "%编码" 规范:"&"会被编码为"26","="会被编码为"3D"。

如果参数值中包含"="或"&"这种特殊字符会产生歧义,因为 URL 编码只是简单的在特殊字符的各个字节前加上%,所以需要对参数进行 URL 编码。

如果需要传输的参数可能包含类似"(!$&'()*+,;=)"这种特殊字符时就需要进行编码了。

下面来看看标题所说的两种编码方式。

我们注意到两种方式都包含一个 URI,那么 URI 是啥?

统一资源标识符(Uniform Resource Identifier,URI)是一个用于标识某一互联网资源名称的字符串。 Web 上可用的每种资源 -HTML 文档、图像、视频片段、程序等 - 由一个通用资源标识符(Uniform Resource Identifier, 简称"URI")进行定位。

# encodeURI

用作对一个完整的 URI 进行编码,不会对网址中的 ASCII 字母和数字及标点符号进行编码。

  • !#$&'()*+,/:;=?@-._~0-9a-zA-Z 不会被编码

使用场景: 当需要获取一个可用的 URL 地址时,使用此方法进行编码。

例子:

encodeURI('http://xuedingmiao.com/My first/');
// http://xuedingmiao.com/My%20first/

# encodeURIComponent

是对统一资源标识符(URI)的组成部分进行编码的方法,从字面意思来看 URIComponent 是 URL 组成部分、组件,所以这个方法是对组成部分进行编码而不是整体。

encodeURIComponent 会假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串),在 encodeURI 中不被编码的符号"; / ? : @ & = + $ , #",encodeURIComponent 都会进行编码。

  • !'()*-._~0-9a-zA-Z 不会被编码

使用场景: 当需要对 URL 的参数进行编码时,使用 encodeURIComponent。

例子:

encodeURIComponent('http://xuedingmiao.com/?a=1&b=2');
// "http%3A%2F%2Fxuedingmiao.com%2F%3Fa%3D1%26b%3D2"

# 区别总结

编码方式

适用场景

安全字符

encodeURI

对完整 URI 编码

82 个:!#$&'()*+,/:;=?@-._~0-9a-zA-Z

encodeURIComponent

对 URI 组件编码

71 个:!'()*-._~0-9a-zA-Z

  • 可以看到 encodeURIComponent 编码的字符范围比 encodeURI 的大

# 参考资料

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-08-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # 背景
  • # 为啥需要编码
  • # encodeURI
  • # encodeURIComponent
  • # 区别总结
  • # 参考资料
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档