javascript encodeURI和encodeURIComponent的比较

 更新时间:2010年04月03日 09:45:54   作者:   我要评论

在进行SaaS前端开发的时候,大家经常会用到两个JavaScriptNative函数:encodeURI 和 encodeURIComponent。这篇文章详细解释这两个函数的用途并比较它们的不同之处
背景
encodeURI 和 encodeURIComponent都是ECMA-262标准中定义的函数,所有兼容这个标准的语言(如JavaScript, ActionScript)都会实现这两个函数。它们都是用来对URI (RFC-2396)字符串进行编码的全局函数,但是它们的处理方式和使用场景有所不同。为了解释它们的不同,我们首先需要理解RFC-2396中对于URI中的字符分类
保留字符(reserved characters):这类字符是URI中的保留关键字符,它们用于分割URI中的各个部分。这些字符是:";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | ","
Mark字符(mark characters):这类字符在RFC-2396中特别定义,但是没有特别说明用途,可能是和别的RFC标准相关。 这些字符是:"-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"
基本字符(alphanum characters):这类字符是URI中的主体部分,它包括所有的大写字母、小写字母和数字
在介绍完上面三类字符串后,我们就非常容易来解释encodeURI和encodeURIComponent函数的不同之处了:
encodeURI: 该函数对传入字符串中的所有非(基本字符、Mark字符和保留字符)进行转义编码(escaping)。所有的需要转义的字符都按照UTF-8编码转化成为一个、两个或者三个字节的十六进制转义字符(%xx)。例如,字符空格" "转换成为"%20"。在这种编码模式下面,需要编码的ASCII字符用一个字节转义字符代替,在\u0080和\u007ff之间的字符用两个字节转义字符代替,其他16为Unicode字符用三个字节转义字符代替
encodeURIComponent: 该函数处理方式和encodeURI只有一个不同点,那就是对于保留字符同样做转义编码。例如,字符":"被转义字符"%3A"代替
之所以有上面两个不同的函数,是因为我们在写JS代码的时候对URI进行两种不同的编码处理需求。encodeURI可以用来对完整的URI字符串进行编码处理。而encodeURIComponent可以对URI中一个部分进行编码,从而让这一部分可以包含一些URI保留字符。这在我们日常编程中是十分有用的。比如下面的URI字符串:
http://www.mysite.com/send-to-friend.aspx?url=http://www.mysite.com/product.html
在这个URI字符串中。send-to-friend.aspx页面会创建HTML格式的邮件内容,里面会包含一个链接,这个链接的地址就是上面URI字符串中的url值。显然上面的url值是URI中的一个部分,里面包含了URI保留关键字符。我们必须调用encodeURIComponent对它进行编码后使用,否则上面的URI字符串会被浏览器认为是一个无效的URI。正确的URI应该如下:
http://www.mysite.com/send-to-friend.aspx?url=http%3A%2F%2Fwww.mysite.com%2Fproduct.html
例子
encodeURI
复制代码 代码如下:

var uri="my test.asp?name=ståle&car=saab";
document.write(encodeURI(uri));

上面的输出如下:
my%20test.asp?name=st%C3%A5le&car=saab

encodeURIComponent
复制代码 代码如下:

var uri="http://jb51.net/my test.asp?name=ståle&car=saab";
document.write(encodeURIComponent(uri));

上面的输出如下:
http%3A%2F%2Fjb51.net%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab
其他
在ECMA-262标准中还定义了和这两个encode函数向对应的decode全局函数,它们是decodeURI和decodeURIComponent。我们可以用它们来decode编码后的字符串

相关文章

  • connection reset by peer问题总结及解决方案

    connection reset by peer问题总结及解决方案

    这篇文章主要介绍了connection reset by peer问题解决方案的相关资料,这里整理了一些常见问题,及如何解决,需要的朋友可以参考下
    2016-10-10
  • 详解webpack之图片引入-增强的file-loader:url-loader

    详解webpack之图片引入-增强的file-loader:url-loader

    这篇文章主要介绍了详解webpack之图片引入-增强的file-loader:url-loader,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • JS实现回到页面顶部动画效果的简单实例

    JS实现回到页面顶部动画效果的简单实例

    下面小编就为大家带来一篇JS实现回到页面顶部动画效果的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 基于JS实现无缝滚动思路及代码分享

    基于JS实现无缝滚动思路及代码分享

    无缝滚动效果在各大网站都有这样的需求,应用非常广泛,下面小编给大家分享基于JS实现无缝滚动思路及代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-06-06
  • zepto.js 实时监听输入框的方法

    zepto.js 实时监听输入框的方法

    今天小编就为大家分享一篇zepto.js 实时监听输入框的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-12-12
  • es6 filter() 数组过滤方法总结

    es6 filter() 数组过滤方法总结

    这篇文章主要介绍了es6 filter() 数组过滤方法总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • js 一个关于图片onload加载的事

    js 一个关于图片onload加载的事

    前几天一个项目让我头疼了很久,一个关于图片加载时的loading效果,因为不是太懂js,所以在网上各种找资料,但还是不理想,无赖苦心研究,终于有了一点眉目了,虽然个中还有一些道理不懂,至少目的达到了
    2013-11-11
  • ajax级联菜单实现方法实例分析

    ajax级联菜单实现方法实例分析

    这篇文章主要介绍了ajax级联菜单实现方法,结合实例形式分析了基于ajax与后台php交互实现级联菜单功能的相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • javascript数组输出的两种方式

    javascript数组输出的两种方式

    这篇文章主要介绍了javascript数组输出的两种方式,涉及javascript数组遍历的常用技巧,需要的朋友可以参考下
    2015-01-01
  • 原生js实现弹出层登录拖拽功能

    原生js实现弹出层登录拖拽功能

    这篇文章主要为大家详细介绍了使用原生JavaScript实现弹出层登录拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论