1、escape和它们不是同一类

  简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读。编码之后的效果是%XX或者%uXXXX这种形式。其中 ASCII字母、数字、@*/+ ,这几个字符不会被编码,其余的都会。

  最关键的是,当你需要对URL编码时,请忘记这个方法,这个方法是针对字符串使用的,不适用于URL。事实上,这个方法我还没有在实际工作中用到过,所以就不多讲了。

2、最常用的encodeURI和encodeURIComponent

  对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。它们都是编码URL,唯一区别就是编码的字符范围,其中:
  (1)encodeURI方法不会对下列字符编码  ASCII字母、数字、~!@#$&*()=:/,;?+'
  (2)encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!*()'
  所以encodeURIComponent比encodeURI编码的范围更大。
  实际例子来说,encodeURIComponent会把 http://  编码成  http%3A%2F%2F 而encodeURI却不会。

3、最重要的,我该什么场合用什么方法

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

  (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肯定要出问题,因为后面的/是需要编码的。

JS编码三种方法的区别:escape、encodeURI和encodeURIComponent的更多相关文章

  1. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  2. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  3. (一)JQuery动态加载js的三种方法

    Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...

  4. 《Java多线程面试题》系列-创建线程的三种方法及其区别

    1. 创建线程的三种方法及其区别 1.1 继承Thread类 首先,定义Thread类的子类并重写run()方法: package com.zwwhnly.springbootaction.javab ...

  5. 异步加载js的三种方法

    js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...

  6. 在 C# 中,(int) ,Int32.Parse() 和 Convert.toInt32() 三种方法的区别

    在 C# 中,(int),Int32.Parse() 和 Convert.toInt32() 三种方法有何区别? int 关键字表示一种整型,是32位的,它的 .NET Framework 类型为 S ...

  7. 【c#文档】在 C# 中,(int) ,Int32.Parse() 和 Convert.toInt32() 三种方法的区别

    [c#文档]https://msdn.microsoft.com/zh-cn/library/system.convert.toint32.aspx 转载自:http://www.cnblogs.co ...

  8. 应对加密js的三种方法

    经常遇到网页在登录后会对用户输入的帐号和密码通过js进行加密,导致模拟登录这类网站时受到阻碍 这里小记一下当前解决该问题的三种方法 1.利用python实现js同等加密. 2.利用selenium模拟 ...

  9. 隐藏input的三种方法和区别

    一.<input type="hidden" />二.<input type="text" style="display:none& ...

随机推荐

  1. 牛客 2018NOIP 模你赛2 T2 分糖果 解题报告

    分糖果 链接:https://www.nowcoder.com/acm/contest/173/B 来源:牛客网 题目描述 \(N\) 个小朋友围成一圈,你有无穷个糖果,想把其中一些分给他们. 从某个 ...

  2. vue-计算属性-computed

    /* 计算属性:vue中对数据进行一些组合与计算的话,可以使用computed(计算属性); //例如:获取当前日期,组合 */ // 组合变成10-1 var vm = new Vue({ el: ...

  3. MAP的get与containskey

    前提是:Map可以出现在k与v的映射中,v为null的情况, 所以containsKey出现更加必要. map.get(key)是得到的key所对应的value值. map.contains(key) ...

  4. swiper伸缩侧边菜单栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. Java中的抽象和封装

    一.面向对象和面向过程的区别 面向对象: 核心:封装了属性和方法的类,以数据为中心,实现了类级别的代码重用 面向对象因为采用了类,所以具有继承和多态特性,可以进一步重用代码和简化编程 面向过程: 核心 ...

  6. 自以为是而已,不知道它是什么 window.onload 放执行

    var $=jQuery=function(onload){window.onload=onload();} jQuery(function(){alert(2);}); $(function(){a ...

  7. 限制MYSQL从服务器为只读状态

    修改全局变量的方法有两种,第一种是修改配置文件,第二种是SQL语句设置全局变量的值.(可以参考:http://www.cnblogs.com/qlqwjy/p/8046592.html) 0.简介: ...

  8. OpenGL ES课程VI之纹理贴图(原文对照)

    http://www.educity.cn/wenda/92368.html OpenGL ES教程VI之纹理贴图(原文对照) OpenGL ES Tutorial for Android – Par ...

  9. Scenes in Cocos2D

    https://www.makeschool.com/docs/?source=mgwu#!/cocos2d/1.0/scenes Scenes in Cocos2D In Cocos2D you h ...

  10. 转: 嵌入式linux下usb驱动开发方法--看完少走弯路【转】

    转自:http://blog.csdn.net/jimmy_1986/article/details/5838297 嵌入式linux下的usb属于所有驱动中相当复杂的一个子系统,要想将她彻底征服,至 ...