JS 中对 URL 进行转码与解码的处理方法

Admin
Admin
Admin
52
文章
6
评论
2019年5月4日01:50:36 评论 15,943 1507字阅读5分1秒

在 JS 中对文字进行编码涉及3个函数:escape、encodeURI、encodeURIComponent,相应3个解码函数:unescape、decodeURI、decodeURIComponent,下面简单介绍一下它们的区别。

一、escape 和 unescape

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

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

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

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

  1. var url = "http://localhost:8080/pro?a=1&b=张三&c=aaa";
  2. escape(url)  -->   http%3A//localhost%3A8080/pro%3Fa%3D1%26b%3D%u5F20%u4E09%26c%3Daaa 

二、encodeURI 和 decodeURI

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

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

encodeURI() 用于整个 url 编码

  1. var url = "http://localhost:8080/pro?a=1&b=张三&c=aaa";
  2. encodeURI(url)  -->   http://localhost:8080/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa 

三、encodeURIComponent 和 decodeURIComponent

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

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

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

  1. var url = "http://localhost:8080/pro?a=1&b=张三&c=aaa";
  2. encodeURIComponent(url) --> http%3A%2F%2Flocalhost%3A8080%2Fpro%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26c%3Daaa
  1. var url = "http://localhost:8080/pp?a=1&b="+ paramUrl,
  2. var paramUrl = "http://localhost:8080/aa?a=1&b=2&c=3";
  3. // 应该使用encodeURIComponent()进行转码  
  4. encodeURIComponent(paramUrl) --> http://localhost:8080/pp?a=1&b=http%3A%2F%2Flocalhost%3A8080%2Faa%3Fa%3D1%26b%3D2%23%26c%3D3

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

继续阅读
Admin
  • 本文由 发表于 2019年5月4日01:50:36
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: