25

简简单单对比encodeURI与encodeURIComponent - 技术小黑屋

 4 years ago
source link: https://droidyue.com/blog/2019/11/17/encodeuri-vs-encodeuricomponent/?
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

encodeURI和encodeURIComponent 是两个很相近的方法，用来encode URI。但是他们之间也存在着细微的差异，如果不能很好的理解这个差异，可能会导致一些不必要的麻烦。本文将尝试用最简单的形式展示这个差异。

encodeURI

  • encode所有的字符，除了下面的字符

Not Escaped:

A-Z a-z 0-9 ; , / ? : @ & = + $ – _ . ! ~ * ‘ ( ) #

encodeURIComponent

  • encode所有的字符，除了下面的字符

Not Escaped:

A-Z a-z 0-9 – _ . ! ~ * ‘ ( )

encodeURIComponent encode的字符多于 encodeURI，即如下字符

, / ? : @ & = + $ #

使用场景差异

当encode内容作为 URI 的参数值时，使用encodeURIComponent

比如下面的例子

1
2
3
4
5
6

var linkOne = "https://droidyue.com/q=" + encodeURIComponent("安卓")
//encode后的内容  https://droidyue.com/q=%E5%AE%89%E5%8D%93

var deepLink = "droidyue://webview?url=" + encodeURIComponent("https://droidyue.com/?q=%E5%AE%89%E5%8D%93&from=direct")

//encode后的内容  droidyue://webview?url=https%3A%2F%2Fdroidyue.com%2F%3Fq%3D%25E5%25AE%2589%25E5%258D%2593%26from%3Ddirect

当encode的内容是独立的URI，不作为其他URI附属时，使用encodeURI

1
2

var linkTwo = encodeURI("https://droidyue.com/?q=安卓")
//encode后的内容 https://droidyue.com/?q=%E5%AE%89%E5%8D%93

错用会怎样

该用encodeURI,却使用了 encodeURIComponent

  • 导致连接无法被识别加载
1
2

encodeURIComponent("https://droidyue.com/?q=安卓")
//encode后的内容 https%3A%2F%2Fdroidyue.com%2F%3Fq%3D%E5%AE%89%E5%8D%93

该用encodeURIComponent 却使用了 encodeURI

  • 导致参数丢失
1
2

"droidyue://webview?url=" + encodeURI("https://droidyue.com/?q=%E5%AE%89%E5%8D%93&from=direct")
//encode后的内容 droidyue://webview?url=https://droidyue.com/?q=%25E5%25AE%2589%25E5%258D%2593&from=direct

如上from=direct本属于https://droidyue.com/?q=%E5%AE%89%E5%8D%93&from=direct，但是错误的encode后，反而属于了droidyue://webview?url=your_url&from=direct。

以上，希望有所帮助。

References


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK