js对url进行编码解码的三种方案,JS在url中如何传递参数或特殊符号

news2024/10/7 4:36:50

为什么要进行url编码?

当你的URL里出现%2F 怎么办?JS在url中如何传递参数或者特殊符号呢?在url链接中会经常碰到一些%2F、%2B等特殊符号怎么解决呢?下面我们来了解一下:

  • 根据RFC标准,有些符号在URI中是不能直接传递的,要按照规定格式进行编码
  • 编码格式:%加字符的ASCII码,即一个百分号%,后面加上对应字符的ASCII(16进制)码值。举个栗子:空格的编码值是"%20"。

url特殊符号及编码.

 + URL 中+号表示空格 %2B
 空格 URL中的空格可以用+号或者编码 %20
 / 分隔目录和子目录 %2F
 ? 分隔实际的 URL 和参数 %3F
 % 指定特殊字符 %25
 # 表示书签 %23
 & URL 中指定的参数间的分隔符 %26
 = URL 中指定参数的值 %3D

怎么进行url编码和解码?

1. escape 和 unescape (不太常用)

注意事项

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

使用介绍
  • escape()不能直接用于URL编码,真正作用是返回一个字符的Unicode编码值。
  • escape()函数用于js对字符串进行编码
  • 采用unicode字符集对指定的字符串除0-255以外进行编码。
  • 所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)。
  • 比如,空格符对应的编码是%20。
使用案例
var url = "http://localhost:8080/xiaojin?state=11&name=xiaojin&other=开心";
escape(url)
'http%3A//localhost%3A8080/xiaojin%3Fstate%3D11%26name%3Dxiaojin%26other%3D%u5F00%u5FC3'

2. encodeURI 和 decodeURI (不太常用)

注意事项

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

使用介绍

把URI字符串采用UTF-8编码格式转化成escape各式的字符串。
encodeURI()一般用于整个url编码

使用案例
var url = "http://localhost:8080/xiaojin?state=11&name=xiaojin&other=开心";
encodeURI(url)
'http://localhost:8080/xiaojin?state=11&name=xiaojin&other=%E5%BC%80%E5%BF%83'

3. encodeURIComponent 和 decodeURIComponent (常用)

注意事项

==特别注意事项: 这个比较好用哦,因为"; / ? : @ & = + $ , #",这些统统会被编码。 ==

使用介绍
  • 我一般用这个搞参数传递
  • 它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。
  • 采用UTF-8编码格式转化成escape格式的字符串。
  • 参数包含特殊字符可能会造成间断。
使用案例
var url = "http://localhost:8080/xiaojin?state=11&name=xiaojin&other=开心";
encodeURIComponent(url)
'http%3A%2F%2Flocalhost%3A8080%2Fxiaojin%3Fstate%3D11%26name%3Dxiaojin%26other%3D%E5%BC%80%E5%BF%83'
今天就写到这里啦~
  • 小伙伴们,( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ我们明天再见啦~~
  • 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境,合作共赢

在这里插入图片描述

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1090913.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenHarmony docker环境搭建

OpenHarmony docker环境搭建 要求一台安装ubuntu的虚拟机,vscode软件 安装docker 在 Ubuntu 上安装 Docker 非常直接。我们将会启用 Docker 软件源,导入 GPG key,并且安装软件包。 首先,更新软件包索引,并且安装必要的依赖软件…

运放的常见应用(收藏)

运放对于外人来说可能有点陌生,但它在我们生活中无处不在,运放的最基本电路符号: 01 放大器 1、反相放大器电路图 输入输出波形: 2、同相放大器: 输入输出波形: 3、电压跟随器 输入输出波形: 4、…

快速了解什么是jwt及如何使用jwt

一、导言 1、什么是jwt及组成部分 JWT(JSON Web Token)是一种用于在网络应用间安全传递声明(claim)的开放标准。它由三部分组成:头部(Header)、载荷(Payload)和签名&…

git cherry-pick命令

问题场景: 需要把dev分支的代码,合并到master分支中,但是又不能根据整个分支合并,所有使用cherry-pick命令,根据提交的commit号来合并 问题描述: 原因分析: 解决方案: 1.在dev分支…

2023年中国乘用车金属冲压件产量、需求量及行业市场规模分析[图]

汽车冲压件,主要是指通过压力机和冲压模具对金属材料施加外力,使之产生塑性变形或分离,从而获得所需形状和尺寸的工件,广泛应用于汽车覆盖件、白车身系统、座椅系统、仪表系统及排气系统等部件,汽车车身的金属件几乎全…

Redis第一章:初识

目录 1.1 Redis介绍 1.2 Redis 特性 1.3 Redis 使⽤场景 1.3.1 Redis 可以做什么 1.3.2 Redis 不可以做什么 1.4 安装并启动 Redis 1.5 Redis 命令⾏客⼾端 1.1 Redis介绍 Redis 是⼀种基于键值对(key-value)的 NoSQL 数据库,与很多键…

中小学生使用全光谱台灯对眼睛好不好?2023口碑好的护眼台灯推荐

近年来,我国青少年近视问题呈现高发性、低龄化、重度化趋势。根据国家卫健委的数据,我国儿童青少年总体近视率为53.6%。特别是在前几年疫情期间,由于观看电子屏幕时间增长、户外运动时间减少,与往年相比,我国中小学生近…

3.1 面向对象的思想

思维导图: **第3章 面向对象(上)** **目录** 1. 面向对象的思想 2. 封装性 3. 继承性 4. 多态性 **3.1 面向对象的思想** - 面向对象是一种编程思想,与现实生活中的事物和它们之间的关系相对应。 - 面向过程分析问题,通过函数实现步骤&…

安卓APP:有读写权限,却读取不到照片的怪事

这是我的: 忽然想起用京东时也碰到过:

RabbitMQ之Exchange(交换机)属性及备用交换机解读

目录 基本介绍 主要结论 备用交换机 springboot代码实战(备用交换机) 实战架构 工程概述 RabbitConfigDeal 配置类:创建队列及交换机并进行绑定 MessageService业务类:发送消息及接收消息 主启动类RabbitMq01Application…

GO 语言的并发模式你了解多少?

工作中查看项目代码,发现会存在使用 GO 语言做并发的时候出现各种各样的异常情况,有的输出结果和自己期望和设计的不一致,有的是程序直接阻塞住,更有甚者直接是程序 crash 掉。 实际上,出现上述的情况,还是…

spring6-事务

文章目录 1、JdbcTemplate1.1、简介1.2、准备工作1.3、实现CURD①装配 JdbcTemplate②测试增删改功能③查询数据返回对象④查询数据返回list集合⑤查询返回单个的值 2、声明式事务概念2.1、事务基本概念①什么是事务②事务的特性 2.2、编程式事务2.3、声明式事务 3、基于注解的…

NewStarCTF2023week2-ez_sql

闭合之后尝试判断字段数,存在WAF,使用大小写绕过(后面的sql语句也需要进行大小写绕过) ?id1 Order by 5-- 测出有5列 ?id1 Order by 6-- 查一下数据库名、版本、用户等信息 ?id1Union Select database(),version(),user(),4,…

205、使用消息队列实现 RPC(远程过程调用)模型的 服务器端 和 客户端

目录 ★ RPC模型(远程过程调用通信模型)▲ 完整过程:代码演示总体流程解释:ConstantUtil 常量工具类ConnectionUtil RabbitMQ连接工具类Server 服务端Client 客户端测试结果服务端客户端 完整代码ConstantUtil 常量工具类Connecti…

CocosCreator 面试题(十一)Cocos Creator 屏幕适配

Cocos Creator 提供了多种屏幕适配的方式,以确保游戏在不同设备上能够正确显示和布局。 以下是 Cocos Creator 中常用的屏幕适配方式及其说明。 1、 Cocos Creator 项目设置中统一配置设计分辨率和屏幕适配 在同一个项目里的多个 Canvas 的设计分辨率仍然采用同一…

2023年中国改性ABS树脂产能、产量及市场规模分析[图]

ABS树脂是由丙烯腈(Acrylonitrile)、丁二烯(Butadiene)和苯乙烯(Styrene)三种单体共聚而成的热塑性聚合物,是介于通用塑料和工程塑料之间的一种高分子材料,是五大合成树脂之一。随着…

USB转串口芯片GP232RL 完全兼容替代FT232RL SSOP28

GP232RL是一款高度集成的USB到UART桥接控制器,提供了一种简单的解决方案,可以使用最少的元器件和PCB空 间,将RS232接口转换为USB接口 。GP232RL包括一个USB 2.0全速功能控制器、USB收发器、振荡器、EEPROM和带有完整的调制解调器控制信号的异…

优雅而高效的JavaScript——扩展运算符

😗博主:小猫娃来啦 😗文章核心:优雅而高效的JavaScript——扩展运算符 文章目录 什么是扩展运算符扩展运算符的定义扩展运算符的作用 扩展运算符在数组中的应用数组的展开数组的合并数组的复制数组的解构赋值 扩展运算符在对象中的…

IDEA创建项目失败提示 Failed to create directory 或 “项目初始化失败”

基本只有一个原因,IDEA对该文件夹操作没有权限 比如你把项目建在了C盘的User文件夹下,User是系统盘,不要乱在里面搞东西 其他教程也许有可能教你文件夹开放权限的方法 但我个人建议,换个普通的文件夹创建项目即可 或者新建个文件…

【计算机毕业设计】python学生成绩补考通知管理系统

经过分析和研究,基于Web的学生成绩管理系统主要包括学生信息管理模块,学生成绩管理模块,学生班级管理模块,学生课程管理模块和系统管理模块。其中信息管理包括信息的浏览和处理,成绩管理包括成绩查询和处理&#xff0c…