JS中三种URI编码方式对比分析

 更新时间:2024年01月03日 09:34:11   作者:LiangSenCheng小森森  
这篇文章主要介绍了JS中三种URI编码方式对比分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

一、实例比较

数据传递常需要编码后传递,接收还需反编译,定义url:

var url = "https://www.cnblogs.com/?username='小森森'&password='666666'";

escape 与 unescape

console.log(escape(url));// 编码
console.log(unescape(escape(url)));// 解码

结果:

https%3A//www.cnblogs.com/%3Fusername%3D%27%u5C0F%u68EE%u68EE%27%26password%3D%27666666%27

encodeURIComponent 与 decodeURIComponent (推荐)

console.log(encodeURIComponent(url));// 编码
console.log(decodeURIComponent(encodeURIComponent(url)));// 解码

结果:

https%3A%2F%2Fwww.cnblogs.com%2F%3Fusername%3D'%E5%B0%8F%E6%A3%AE%E6%A3%AE'%26password%3D'666666'

encodeURI 与 decodeURI

console.log(encodeURI(url));// 编码
console.log(decodeURI(encodeURI(url)));// 解码

结果:

https://www.cnblogs.com/?username='%E5%B0%8F%E6%A3%AE%E6%A3%AE'&password='666666'

二、区别分析

三种方法都不会对 ASCII 字母、数字和规定的特殊 ASCII 标点符号进行编码,其余都替换为十六进制转义序列.

escape 与 unescape

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

对字符串全部进行转义编码,ECMAScript v3 反对使用该方法,对URL编码勿使用此方法

encodeURIComponent 与 decodeURIComponent

encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z

传递参数时需使用encodeURIComponent,组合的url才不会被#等特殊字符截断

encodeURI 与 decodeURI

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

进行url跳转时可以整体使用encodeURI,如果URI中含分隔符如 ? 和 #,应使用encodeURIComponent

三、结论

推荐使用encodeURIComponent

到此这篇关于JS中三种URI编码方式比较的文章就介绍到这了,更多相关js URI编码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap学习笔记 轮播(Carousel)插件

    Bootstrap学习笔记 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。这篇文章主要介绍了Bootstrap学习笔记 轮播(Carousel)插件,需要的朋友可以参考下
    2017-03-03
  • JS基于递归实现网页版计算器的方法分析

    JS基于递归实现网页版计算器的方法分析

    这篇文章主要介绍了JS基于递归实现网页版计算器的方法,结合实例形式分析了javascript采用递归算法实现网页版计算器的步骤与相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • 使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的简单用例

    使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的简单用例

    schema-utils 库用于在 loader 和 plugin 实例化时,对传入的参数进行校验,本文重点给大家介绍使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的用例详解,感兴趣的朋友一起看看吧
    2022-03-03
  • JS实现方向键切换输入框焦点的方法

    JS实现方向键切换输入框焦点的方法

    这篇文章主要介绍了JS实现方向键切换输入框焦点的方法,涉及javascript鼠标事件及页面元素焦点的切换实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JS延迟加载的几种方式小结

    JS延迟加载的几种方式小结

    JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件,JS延迟加载有助于提高页面加载速度,本文小编给大家介绍了JS延迟加载的几种方式小结,感兴趣的小伙伴跟着小编一起来看看吧
    2024-08-08
  • 基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

    基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

    这篇文章主要介绍了基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • Javascript Web Slider 焦点图示例源码

    Javascript Web Slider 焦点图示例源码

    Slider 焦点图会在很多的网站上见到,在本文为大家详细介绍下具体的实现过程,下面的源码大家可以运行下
    2013-10-10
  • JS实现网页时钟特效

    JS实现网页时钟特效

    这篇文章主要为大家详细介绍了JS实现网页时钟特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 五句话帮你轻松搞定js原型链

    五句话帮你轻松搞定js原型链

    这篇文章主要给大家介绍了关于js原型链的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • js前端加密库Crypto-js进行MD5/SHA256/BASE64/AES加解密的方法与示例

    js前端加密库Crypto-js进行MD5/SHA256/BASE64/AES加解密的方法与示例

    js加密解密可以使用crypto-js它可以进行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,这是一个对称加密的库,可以使用 AES、DES、但没有rsa等非对称加密的方法
    2023-12-12

最新评论