【笔记】js URL编码解析总结

简介: js URL编码解析总结

一、为什么要进行URI编码

1.路径中含有中文

http://hi.baidu.com/%BE%B2%D0%C4%C0%CF%C8%CB/creat/blog/

2.影响参数解析

参数值中包含=或者&这样的特殊子字符

  • POST方式提交 不需要转
  • GET方式 链接传值 建议都要转

3.json格式的数据向后台传输时,防止被截断

例如:转:解决json参数中有参数是url地址导致json无法正确传输与解析

  • RFC3986文档规定:URL中只允许包含英文字母(a-zA-Z)、数字(0-9)、- _ . ~4个特殊字符以及所有的保留字符。
  • US-ASCII字符集中没有对应的可打印字符:URL中只允许使用可打印的字符。US-ASCII码中的10-7F字节全都表示控制字符,这些字符不能直接出现在URL中。同时对于80-FF字节,由于已经超出了ASCII码定义字符的范围,因此也不能放在URL中。
  • 保留字符:RUL可以划分为干了组件,协议、主机、路径等。有一些字符(: / ? # [ ] @)是用作分隔不同组件的。例如:冒号用于分隔协议和主机组件,斜杠用于分隔主机和路径,问号用于分隔路径和查询参数,等等。还有一些字符(! $ & * + , ; =)用于在每个组件中起到分隔作用,如等号用于表示查询参数中的键值对,&符号用于分隔查询多个键值对。当组件中的普通数据包含这些特殊字符时,需要对其进行编码。
  • RFC3986中指定了以下字符为保留字符: ! * ’ ( ) ; : @ & = + $ , / ? # [ ]
  • 不安全字符:还有一些字符,当他们直接放在URL中的时候,可能会引起解析程序的歧义。这些字符被视为不安全的字符,原因有很多。

二、js常用的三组编解码方法

只有 0-9[a-Z] $ - _ . + ! * ' ( ) , 以及某些保留字,才能不经过编码直接用于 URL。
例如:搜索的中文关键字,复制网址之后再粘贴就会发现该URL已经被转码。

原理 编码 解码 不编码字符 个数
escape 和 unescape 对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码 http%3A// http:// *,+,-,.,/,@,_,0-9,a-z,A-Z 69
encodeURI 和 decodeURI 返回编码为有效的统一资源标识符 (URI) 的字符串,不会被编码的字符:! @ # $ & * ( ) = : / ; ? + ' encodeURI()是Javascript中真正用来对URL编码的函数。 http%3A// http:// !,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z 82
encodeURIComponent 和 decodeURIComponent 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) http%3A%2F%2F http:// !, ',(,),*,-,.,_,~,0-9,a-z,A-Z 71
  • escape 基本淘汰,encodeURIencodeURIComponent比较常用
  • escape()除了 ASCII 字母、数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对URL编码,最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent(指请求参数)应当是最常用的,它可以讲参数中的中文、特殊字符进行转义,而不会影响整个URL。
  • 请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

三、拓展阅读

  • URL,Uniform Resource Locator,统一资源定位符。用于表示网络上服务器的资源所在位置,比如我们输入浏览器的地址。
  • URI,Uniform Resource Identifier,统一资源标识符。它唯一标识了资源。资源的位置能从地址上标识一个资源,所以,URI一种表现形式是URL,URI还有其他表现形式。
  • url为什么要编码(下)_哔哩哔哩_bilibili
相关文章
|
3天前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
|
3天前
|
JavaScript 网络协议 数据处理
Node.js中的Buffer与Stream:深入解析与使用
【4月更文挑战第30天】本文深入解析了Node.js中的Buffer和Stream。Buffer是处理原始数据的全局对象,适用于TCP流和文件I/O,其大小在V8堆外分配。创建Buffer可通过`alloc`和`from`方法,它提供了读写、切片和转换等操作。Stream是处理流式数据的抽象接口,分为可读、可写、双工和转换四种类型,常用于处理大量数据而无需一次性加载到内存。通过监听事件和调用方法,如读取文件的可读流示例,可以实现高效的数据处理。理解和掌握Buffer及Stream能提升Node.js应用的性能。
|
3天前
|
JavaScript 前端开发 开发者
Node.js的包管理和npm工具深度解析
【4月更文挑战第30天】本文深入解析Node.js的包管理和npm工具。包管理促进代码复用和社区协作,包包含元数据描述文件`package.json`和入口文件。npm提供搜索、安装、发布等功能,通过命令行进行操作,如`install`、`search`、`uninstall`。npm支持版本控制、全局安装、脚本定义及私有仓库。理解和熟练运用npm能提升Node.js开发效率。
|
4天前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
|
4天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
4天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
4天前
|
JavaScript 大数据 开发者
Node.js的异步I/O模型与事件循环:深度解析
【4月更文挑战第29天】本文深入解析Node.js的异步I/O模型和事件循环机制。Node.js采用单线程与异步I/O,遇到I/O操作时立即返回并继续执行,结果存入回调函数队列。事件循环不断检查并处理I/O事件,通过回调函数通知结果,实现非阻塞和高并发。这种事件驱动编程模型简化了编程,使开发者更专注业务逻辑,为高并发场景提供高效解决方案。
|
7天前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。
|
JavaScript 前端开发 Go
从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)——基础中的基础 概要:javascript的组成、 各个组成部分的作用 、 一、javascript的组成   javascript   ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) 1.
1011 0
|
4天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握

推荐镜像

更多