如何通过JS实现转码与解码

 更新时间:2020年02月21日 11:27:36   作者:秋夜雨巷  
这篇文章主要介绍了如何通过JS实现转码与解码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了如何通过JS实现转码与解码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

escape 和 unescape

escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。

采用unicode字符集对指定的字符串除0-255以外进行编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)。比如,空格符对应的编码是%20。

escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z。

escape()函数用于js对字符串进行编码。

encodeURI 和 decodeURI

把URI字符串采用UTF-8编码格式转化成escape各式的字符串。

encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z

encodeURI()用于整个url编码

encodeURIComponent 和 decodeURIComponent

与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。

因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。把URI字符串采用UTF-8编码格式转化成escape格式的字符串。

encodeURIComponent() 用于参数的传递,参数包含特殊字符可能会造成间断。

总结

escape编码字符串

简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读。

编码之后的效果是%XX或者%uXXXX这种形式。

其中 ASCII字母 数字 @*/+ 等字符不会被编码,其余的都会。

最关键的是,当需要对URL编码时,忘记这个方法,这个方法是针对字符串使用的,不适用于URL。

URL编码encodeURI和encodeURIComponent

对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。它们都是编码URL,唯一区别就是编码的字符范围,其中

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

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

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

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

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

如果你需要编码整个URL,然后需要使用这个URL,那么用encodeURI。
比如

编码结果:

http://www.cnblogs.com/some%20other%20thing

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

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

连 "/" 都被编码了,整个URL已经没法用了。

当需要编码URL中的参数的时候,那么encodeURIComponent是最好方法

var param = "http://www.cnblogs.com/"; //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%2F

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js实现同一页面多个运动效果的方法

    js实现同一页面多个运动效果的方法

    这篇文章主要介绍了js实现同一页面多个运动效果的方法,涉及javascript操作页面元素运动效果的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • vue组件中watch props根据v-if动态判断并挂载DOM的问题

    vue组件中watch props根据v-if动态判断并挂载DOM的问题

    这篇文章主要介绍了vue组件中watch props根据v-if动态判断并挂载DOM的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)

    微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)

    这篇文章主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • js在浏览器中的event loop事件队列示例详解

    js在浏览器中的event loop事件队列示例详解

    大家都知道js是单线程的脚本语言,在同一时间只能做同一件事,为了协调事件、用户交互、脚本、UI渲染和网络处理等行为,防止主线程阻塞,Event Loop方案应运而生,这篇文章主要给大家介绍了关于js在浏览器中的event loop事件队列的相关资料,需要的朋友可以参考下
    2021-11-11
  • Object.keys 诡异特性示例详解

    Object.keys 诡异特性示例详解

    这篇文章主要介绍了Object.keys 诡异特性示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 浅谈JS中的反柯里化( uncurrying)

    浅谈JS中的反柯里化( uncurrying)

    本篇文章主要介绍了浅谈JS中的反柯里化( uncurrying),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 使用JS组件实现带ToolTip验证框的实例代码

    使用JS组件实现带ToolTip验证框的实例代码

    这篇文章主要介绍了使用JS组件实现带ToolTip验证框的实例代码,需要的朋友可以参考下
    2017-08-08
  • JS中两个数组对象筛选方法

    JS中两个数组对象筛选方法

    这篇文章主要介绍了JS中两个数组对象筛选,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • layui实现文件或图片上传记录

    layui实现文件或图片上传记录

    这篇文章主要为大家详细介绍了layui实现文件或图片上传记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 实现163邮箱的图标功能

    实现163邮箱的图标功能

    实现163邮箱的图标功能...
    2007-05-05

最新评论