URL编码和Base64编码

这篇具有很好参考价值的文章主要介绍了URL编码和Base64编码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

数据操作过程中,经常涉及到编码与解码等相关操作,如web请求时会对url进行编码,其中的中文等字符会转义为其他内容;中文字符串数据传输时,会将其使用base64编码并在接收后解码,以避免乱码的出现。


一、URL编码

1. URLEncoder和URLDecoder

URLDecoder 和 URLEncoder 用于普通字符串 和 application/x-www-form-urlencoded MIME 字符串之间的相互转换

当URL地址里包含非西欧字符的字符串时,浏览器会将这些非西欧字符串转换成application/x-www-form-urlencoded MIME 字符串。

  • URLDecoder类包含一个decode(String s,String enc)静态方法,它可以将application/x-www-form-urlencoded MIME字符串转成普通字符串;
  • URLEncoder类包含一个encode(String s,String enc)静态方法,它可以将普通字符串转换成application/x-www-form-urlencoded MIME字符串。

2. URL编码规则

对 String 编码时,使用以下规则:

  • 字母、数字和字符, “a” 到 “z”、”A” 到 “Z” 和 “0” 到 “9” 保持不变;
  • 特殊字符 “.”、”-“、”*” 和 “_” 保持不变;
  • 空格字符 ” ” 转换为一个加号 “+”;
  • url编码时会将 + 编码成空格;
  • 除此之外,所有的其他字符都是不安全的,会变成以 % 开头的字符;
  • 对于一个中文,会使用3个字节表示。

由于以上限制内容,因此URL编码是一种限制性编码方式。

3. Javascript 原生提供三对 Url编码 的函数

Javascript中提供了3对函数用来将不安全不合法的Url字符转换为合法的Url字符表示 ,它们分别是:

  • escape / unescape
  • encodeURI / decodeURI
  • encodeURIComponent / decodeURIComponent

由于解码和编码的过程是可逆的,因此这里只解释编码的过程。

3.1 三对函数的不同点

(1) 安全字符不同

下面列出了这三个函数的安全字符(即函数不会对这些字符进行编码):

  • escape(69个):*/@±._0-9a-zA-Z
  • encodeURI(82个):!#$&'()*+,/:;=?@-._~0-9a-zA-Z
  • encodeURIComponent(71个):!'()*-._~0-9a-zA-Z

(2) 兼容性不同

escape函数是从Javascript 1.0的时候就存在了,其他两个函数是在Javascript 1.5才引入的。但是由于Javascript 1.5已经非常普及了,所以实际上使用encodeURI和encodeURIComponent并不会有什么兼容性问题。

(3) 对Unicode字符的编码方式不同

escape 和 encodeURI / encodeURIComponent 不是同一类。

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

注意:当需要对URL编码时,请忘记这个方法,这个方法是针对字符串使用的,不适用于URL。

(4) 适用场合不同

encodeURI 被用作对一个完整的URI进行编码,而 encodeURIComponent 被用作对URI的一个组件进行编码。

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

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

所以 encodeURIComponentencodeURI 编码的范围更大。

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

3.2 总结

总的来说,最重要的是什么场合应该用什么方法:

  1. 如果只是编码 字符串,和URL没有关系,那么使用 escape
  2. 如果需要编码 整个URL,并需要使用这个URL,那么用 encodeURI

例如:

 encodeURI("http://www.cnblogs.com/hl/some other thing");

编码后会变为:

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

其中,空格被编码成了%20。但是如果你用了encodeURIComponent,那么结果变为 “http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing”
看到区别了嘛?连 “/” 都被编码了,整个URL已经没法用了。

  1. 如果需要编码 URL中的参数,使用 encodeURIComponent 是最好方法。
// param为参数
let param = "http://www.cnblogs.com/season-huang/"; 

param = encodeURIComponent(param);

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

二、Base64编码

1. Base64编码规则

Base64是一种将二进制数据用文本表示的编码算法,它只包含64个字符,A - Z,a - z,0 - 9,+ ,/ , 对应索引为 0 - 63。

  • base64编码时选取3个字节为一组,进行重新编排,将原来8个bit为一个字节改为每6个bit作为新的字节,3个字节编码形成4个字节;
  • 如果字符字节长度不是3的倍数,会使用\x00字节补足,再根据补足的数量添加等量的=标识;
  • 如43yW56CB5rWL6K+HUQ==代表,编码时补足两个\x00,编码后增加两个+;

2. Base64编码使用

如果需要将包含中文的utf-8编码字符转换称ASCII码,则需要使用Base64作为中间编码来保证字符数据的稳定。

  • 编码,要将utl-8字符使用base64编码,得到结果后将字符转成ASCII编码;
  • 解码,将ASCII编码解析为Base64字符串,使用Base64解码方法解析为utf-8的结果数据;
  • 除了针对字符串外,Base64还可以对不太大的文件进行编码,使用字符序列表示二进制文件;

3. JavaScript 原生提供两个 Base64 相关的方法

  • btoa():任意值转为 Base64 编码;
  • atob():Base64 编码转为原来的值;

注意,这两个方法不适合非 ASCII 码的字符,会报错。
要将非 ASCII 码字符转为 Base64 编码,必须中间插入一个转码环节,再使用这两个方法。

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

总结

参考链接:
URL编码和Base64编码
Web开发须知:URL编码与解码
escape,encodeURI,encodeURIComponent有什么区别?文章来源地址https://www.toymoban.com/news/detail-787880.html

到了这里,关于URL编码和Base64编码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js实现base64,url,blob之间的相互转换

    一般来说前端展示图片会通过三种方式: url、base64、blob 1.url: 一般来说,图片的显示还是建议使用url的方式比较好。 2.base64: 如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为其Base64编码后的字符串非常大,会明显增大HTML页面,影响加载速度。如果图

    2023年04月27日
    浏览(53)
  • js实现base64、url和blob之间相互转换的三种方式

    Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式 url 转 base64 Blob 转 url Blob 转 base64 base64 转Blob base64 转 url 一般来说前端展示图片会通过三种方式:

    2024年02月03日
    浏览(50)
  • 前端实现base64编码处理

    文件上传时,因为base64文件字符串过长后端接收失败的问题。 提示:以下是本篇文章正文内容,下面案例可供参考 Base64是一种用于将二进制数据转换为ASCII字符集中可打印字符的编码方法。它通常用于在不同系统之间传输二进制数据,因为许多系统只支持文本数据的传输。 代

    2024年02月12日
    浏览(34)
  • [译]JavaScript中Base64编码字符串的细节

    本文作者为 360 奇舞团前端开发工程师 本文为翻译 原文标题:The nuances of base64 encoding strings in JavaScript 原文作者:Matt Joseph 原文链接:https://web.dev/articles/base64-encoding   Base64编码和解码是一种常见的将二进制内容转换为适合Web的文本的形式。它通常用于data URLs,比如内嵌图片

    2024年02月05日
    浏览(51)
  • 前端打包部署后接口BASE_URL不对问题解决办法

    在前端打包部署时,为了免去不同环境打包的麻烦,项目用的流水线触发方式。在这里不细说,重点说说下面情况。 当项目提交打包部署后,访问压测环境或者生产环境的地址来使用项目时,发现接口报错404。  在NETWORK里发现接口的BASEURL和当前环境需要调用的后端baseurl不同

    2024年02月11日
    浏览(43)
  • 前端Base64 编码和解码的使用方法

    使用 Base64 类从 ‘js-base64’ 库进行 Base64 编码和解码 vue: 使用 npm 或 yarn 包管理器来安装‘js-base64’ 库 原生: 通过 vue: 导入 Base64 类: 或者: vue: Base64 编码的使用示例: Base64 解码的使用示例: 或者,导入 encode 和 decode 函数: Base64 编码的使用示例: Base64 解码的使用示例

    2024年02月07日
    浏览(48)
  • 后台传输图片给前端的Base64编码方法及原理解析

    探索后台向前端传输图片的方式之一:通过Base64编码将图片转换为字符串数据,并在前端显示图片。本文详细介绍了Base64编码的原理、转换步骤以及位数不足情况的处理方法,帮助理解Base64编码的工作原理。

    2024年02月04日
    浏览(49)
  • python标准模块介绍 -Base64: Base64, Base85等数据编码

    功能:RFC 3548: Base16, Base32, Base64 数据编码。转换二进制数据为适合明文协议传输的 ASCII 序列。转换 8bits 为每个字节包含 6,5 或 4bits 的有效数据,比如 SMTP, URL 的一部分或者 HTTP POST 的一部分。参考: RFC 3548。编码算法不同于 uuencode。 类型:标准库 相关模块:uu, binhex, uu, quopri Base64

    2024年02月05日
    浏览(45)
  • base64编码:js实现base64编码的3种方式,多场景下分析使用

    js实现base64编码,前端一般应用场景在与后端接口参数中体现,后端可能需要某个字段是base64编码的字符,这时候就需要用前端的方法进行转换,再作为参数传递到服务端。 js实现base64编码的3种方式 1. 使用base64.js进行转换 获取base64.js,可以直接搜索base64.js下载。推荐使用n

    2024年02月16日
    浏览(49)
  • pytest---环境切换(base-url)

    前面小编介绍了如何通过pytest的插件来实现自动化测试的环境的切换,当时使用的方法是通过钩子函数进行获取命令行参数值,然后通过提前配置好的参数进行切换测试环境地址,今天小编再次介绍一种方法,通过pytest的插件:pytest-base-url进行来实现。 pytest-base-url 是pytest的

    2024年02月15日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包