区分escape、encodeURI和encodeURIComponent

青旅半醒 2022-05-10 12:36 182阅读 0赞

### 一、前言 ###

讲这3个方法区别的文章太多了，但是大部分写的都很绕。本文试图从实践角度去讲这3个方法。

### 二、escape和它们不是同一类 ###

简单来说，escape是对字符串(string)进行编码(而另外两种是对URL)，作用是让它们在所有电脑上可读。  
编码之后的效果是%XX或者%uXXXX这种形式。  
其中 ASCII字母、数字、@\*/+ ，这几个字符***不会***被编码，其余的都会。  
最关键的是，当你需要对URL编码时，请忘记这个方法，这个方法是针对字符串使用的，不适用于URL。  
事实上，这个方法我还没有在实际工作中用到过，所以就不多讲了。

### 三、最常用的encodeURI和encodeURIComponent ###

对URL编码是常见的事，所以这两个方法应该是实际中要特别注意的。

它们都是编码URL，唯一区别就是编码的字符范围，其中

encodeURI方法***不会***对下列字符编码  ASCII字母、数字、~!@\#$&\*()=:/,;?+'

encodeURIComponent方法***不会***对下列字符编码 ASCII字母、数字、~!\*()'

所以encodeURIComponent比encodeURI编码的范围更大。

实际例子来说，encodeURIComponent会把 http://  编码成  http%3A%2F%2F 而encodeURI却不会。

### 四、最重要的，我该什么场合用什么方法 ###

区别上面说的很清楚了，接下来从实际例子来说说把。

**1、如果只是编码字符串，不和URL有半毛钱关系，那么用escape。**

**2、如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。**

比如

encodeURI("http://www.cnblogs.com/season-huang/some other thing");

编码后会变为

"http://www.cnblogs.com/season-huang/some%20other%20thing";

其中，空格被编码成了%20。但是如果你用了encodeURIComponent，那么结果变为

"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"

看到了区别吗，连 "/" 都被编码了，整个URL已经没法用了。

**3、当你需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。**

var param = "http://www.cnblogs.com/season-huang/"; //param为参数
    param = encodeURIComponent(param);
    var url = "http://www.cnblogs.com?next=" + param;
    console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"

看到了把，参数中的 "/" 可以编码，如果用encodeURI肯定要出问题，因为后面的/是需要编码的。

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 escape、encodeURI 和encodeURIComponent 的区别

escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法，而他们之间的异同却困扰了很多的J

灰太狼/ 2022年08月04日 14:48/ 0 赞/ 151 阅读

相关 JavaScript encodeURIComponent() 函数

定义和用法 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。语法 encodeURIComponent(U

Myth丶恋晨/ 2022年07月21日 01:44/ 0 赞/ 164 阅读

相关 encodeURI和encodeURIComponent区别

1、用来编码和解码URI的统一资源标识符，或叫做 URI，是用来标识互联网上的资源（例如，网页或文件）和怎样访问这些资源的传输协议（例如，HTTP 或 FTP）的字符串。除

╰半夏微凉°/ 2022年05月26日 04:40/ 0 赞/ 171 阅读

相关区分callee和caller

callee和caller是对象的两个属性，今天就来区分一下这两个： callee是arguments对象的一个属性，指向 arguments 对象的函数，即当前函数。

妖狐艹你老母/ 2022年05月13日 23:36/ 0 赞/ 180 阅读

相关区分escape、encodeURI和encodeURIComponent

一、前言讲这3个方法区别的文章太多了，但是大部分写的都很绕。本文试图从实践角度去讲这3个方法。二、escape和它们不是同一类简单来说，escape是

青旅半醒/ 2022年05月10日 12:36/ 0 赞/ 183 阅读

相关 encodeURIComponent和URLEncoder.encode的区别

二者的区别： 1、 encodeURIComponent(str) : 参数：str - 字符串； js(前端)编码方法；对应的解码方法：decod

青旅半醒/ 2022年04月10日 05:22/ 0 赞/ 205 阅读

相关前端学习（八）：区分escape、encodeURI和encodeURIComponent

escape和它们不是同一类简单来说，escape是对字符串(string)进行编码(而另外两种是对URL)，作用是让它们在所有电脑上可读。编码之后的效果是%XX或

迈不过友情╰/ 2022年01月20日 00:27/ 0 赞/ 386 阅读

相关 post和get 区分

区分post和get 参数： 1 get直接在url中，post的参数放在requestBody中，所以从这里说post更安全 post Request URL:

ゝ一纸荒年。/ 2021年12月12日 13:15/ 0 赞/ 342 阅读

相关 encodeURI 和 encodeURIComponent

URL编码你可能会懵我们要查询一个年龄为 20，姓名包含 `tom` 的人，那么我们会这样去组织请求 var url = "http//xxx/age=20&

￡神魔★判官ぃ/ 2021年09月18日 07:54/ 1 赞/ 283 阅读

相关 JavaScript encodeURIComponent()

JavaScript encodeURIComponent() 此方法可以对URI进行编码，并返回编码后的字符串，与encodeURI方法类似，区别也很明显。从方法名称...

红太狼/ 2020年05月26日 15:49/ 0 赞/ 498 阅读