escape、encodeURI和encodeURIComponent的区别

escape、encodeURI和encodeURIComponent的区别

1. 简单解释
   　　简单来说，escape是对字符串(string)进行编码(而另外两种是对URL)，作用是让它们在所有电脑上可读。
   　　编码之后的效果是%XX或者%uXXXX这种形式。
   　　其中 ASCII字母、数字、@*/+ ，这几个字符不会被编码，其余的都会。
   　　最关键的是，当你需要对URL编码时，请忘记这个方法，这个方法是针对字符串使用的，不适用于URL。
2. encodeURI和encodeURIComponent
   　　对URL编码是常见的事，所以这两个方法应该是实际中要特别注意的。
   　　它们都是编码URL，唯一区别就是编码的字符范围，其中
   　　encodeURI方法不会对下列字符编码 ASCII字母、数字、~!@#$&()=:/,;?+’
   　　encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!()’
   也就是encodeURIComponent编码的范围更广，会将http://XXX中的//也编码，会导致URL不可用。(其实java中的URLEncoder.encode(str,char)也类似于这个方法，会导致URL不可用)
3. 简单使用
   3.1 编码中文

    var param = "中文";
    console.log(escape(param));
    console.log(encodeURI(param));
    console.log(encodeURIComponent(param));

结果:

  3.2 encodeURI和encodeURIComponent编码URL

  var url = "http://localhost:85/Exam/settingAction_saveSettings.action?safeHatNumLength=测试";
  console.log(encodeURI(url));
  console.log(encodeURIComponent(url));

结果:

http://localhost:85/Exam/settingAction_saveSettings.action?safeHatNumLength=%E6%B5%8B%E8%AF%95
http%3A%2F%2Flocalhost%3A85%2FExam%2FsettingAction_saveSettings.action%3FsafeHatNumLength%3D%E6%B5%8B%E8%AF%95

4. 使用场景
   1 如果只是编码字符串，不和URL有半毛钱关系，那么用escape，而且这个方法一般不会用到。
   2 如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。
   3 当你需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。

附加送一个 createObjectURL

1. 定义
   URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
2. 使用方法
   ​​objectURL = URL.createObjectURL(blob);​​
3. 示例

<input type="file" id="btn" accept="image/*" value="点击上传" />
<img id="img"/>

btn.addEventListener('change',function(){
    let file = this.files[0];
    // 进一步防止文件类型错误
    if(!/image\/\w+/.test(file.type)){  
        alert("看清楚，这个需要图片！");  
        return false;  
    }  
    img.src = URL.createObjectURL(file)
})