JS URL的编码解码以及使用场景

2023-10-27

前端事件交互,有的时候会用到url作为参数,然而你会发现直接把url当个字符串来处理会发现有很多的局限性,比如说我想添加一个参数什么的,或者进行个解析比较麻烦。而且有的时候解析url有的时候因为特殊符号什么的也是个问题。于是有了JS的url的编码和解码。

想知道url的解码和解码是什么样的,我可以提供一个在线工具的地址,你随便粘贴一个网站尝试一下把这个url进行编码。看一下编码后会是什么样的:

在线url编码:

JS如何对url进行编码和解码?
我介绍两组JS的URL的编码和解码方法:
encodeURI和decodeURI:这个在堆URL进行解码的过程中,对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #,不会进行编码。很多在线编码工具其实就是用的这种方式,因为他对符号输出是每个字节前加一个%,而且你也能看到这些符号没有进行处理。

encodeURIComponent()和decodeURIComponent():这个我在做小程序的时候用的比较多,就是把带参数的url进行编码,他把特殊符号也进行处理。其实看自己需要,现在想一想当时用上一种也可以,两者区别就是对特殊符号的处理和不处理。

url的适用场景
特殊符号的问题使得你只把URL当做字符串有自己的局限性,页面的跳转有的时候需要url作为参数,从A页面到B页面,然后再返回的过程中,有的时候是需要在URL上添加参数作为返回的处理。比如支付后支付页面跳转到订单详情页,你要把参数传回去告诉详情页是否支付成功,状态变化什么的。你不可能什么都要发送个请求,有些不需要后台处理或者查询返回结果你自己就可以算出,提高交互。

同样URL作为参数,进行编码解码有的时候可以用这个做个工具类公共组件,可以对一些共通的进行解耦,比如说我们小程序对于地址列表查询以及地址列表的返回,N个页面N个参数不便于管理,可以之间传一个url编码后的作为参数,返回时直接添加地址参数拼接返回过去。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS URL的编码解码以及使用场景 的相关文章

  • WebRTC视频码率控制(二)—— QP检测

    WebRTC在视频编码过程中会进行QP检测 目的是让视频质量维持在可接受范围的前提下 调节整体视频表现 如分辨率 帧率 这里要注意的是 QP检测机制只是利用QP分析结果对分辨率 帧率进行调节 并不对编码QP做直接调整 说句题外话 通常编码器

随机推荐

  • Hausdorff distance

    微分动力系统原理 这本书里有介绍 Hausdorff距离是描述两组点集之间相似程度的一种量度 它是两个点集之间距离的一种定义形式 假设有两组集合A a1 ap B b1 bq 则这两个点集合之间的Hausdorff距离定义为 H A B m
  • Netcat 了解

    工作项目中遇到有用Netcat来实现Windows gt Macos通信 传输文件与数据的 所以想了解一下 Netcat 简称nc 是一款简单的Unix工具 使用UDP和TCP协议 它是一个可靠的容易被其他程序所启用的后台操作工具 同时它也
  • 计算机虚拟技术有什么用途,CPU虚拟化有什么作用?CPU怎么开启虚拟化技术?

    目前Intel和AMD的主流CPU都支持虚拟化技术 而搭配的主板BIOS中都自带了开启虚拟化技术的功能 但是主板出厂时默认禁用虚拟化技术的 如果我们如果需要使用CPU虚拟化技术 那么需要在主板中开启 那么CPU怎么开启虚拟化技术 下面装机之
  • 7-20 打印九九口诀表 (格式输出)

    下面是一个完整的下三角九九口诀表 1 1 1 1 2 2 2 2 4 1 3 3 2 3 6 3 3 9 1 4 4 2 4 8 3 4 12 4 4 16 1 5 5 2 5 10 3 5 15 4 5 20 5 5 25 1 6 6 2
  • linux对磁盘的管理员权限设置,Linux系统磁盘及文件系统管理

    本节索引 一 磁盘基本概念 二 磁盘分区管理 三 文件系统管理 四 设备挂载管理 一 磁盘基本概念 设备文件 Linux中一切皆文件 open read write close 设备类型 块设备 block 存储单位 块 磁盘 字符设备 c
  • 智能学习

    智能学习 MATLAB实现基于HS和谐搜索的时间序列未来多步预测 目录 智能学习 MATLAB实现基于HS和谐搜索的时间序列未来多步预测 效果一览 基本介绍 模型描述 程序设计 参考资料 效果一览 基本介绍 使用 Harmony Searc
  • docker部署redis集群配置文件笔记

    密码 requirepass 123456 指明为主机一的从机 slaveof 192 168 0 1 6389 主从redis同步的认证密码 与连接密码同 若不需要可不用配置 masterauth 123456 最大内存 maxmemor
  • 30条值得你借鉴的好习惯

    我有幸一直能生活在比较好的圈子中 我的优秀的同学 舍友 乃至我现在创业后遇到的优秀创业者 从他们身上看到和学到一些好的习惯 我一直觉得 好的习惯 是成功和进步的重要一点 我随手总结一些给大家 零散未经排版 当然 每个人有每个人的判断 这里可
  • 学术诚信的重要性_坚守学术道德,弘扬学术诚信

    霍楷 徐晨 摘 要 学车无辕而不立 人无信则不立 诚信乃为人之根本 学术诚信是个人行为秉性和学术道德品质的展现 反映了个体真实水准与学术涵养 培养学术道德意识 弘扬学术诚信精神 坚守学术诚信理念 净化学术环境是艺术类高校义不容辞的责任 提升
  • 基础12:高阶函数

    高阶函数 高阶函数英文叫 Higher order function 它的定义很简单 就是至少满足下列一个条件的函数 接受一个或多个函数作为输入 输出一个函数 也就是说高阶函数是对其他函数进行操作的函数 可以将它们作为参数传递 或者是返回它
  • springboot项目启动成功后执行一段代码的两种方式

    转自 https www cnblogs com zuidongfeng p 9926471 html 1 实现ApplicationRunner接口 package com lnjecit lifecycle import org spr
  • netcat小工具使用

    接收端 nc l 1789 gt test1 txt 发送端 nc 1 1 1 1 1789 lt test1 txt 使用nc传文件要比scp快不少 当然 安全性低了 root 12 nc h usage nc 46DdhklnrStUu
  • 小米笔记本pro开机出现no bootable devices

    用了4个月的小米笔记本开机突然出现no bootable devices 无法正常启动 很烦 如下图 上网查了资料 说是无法正确识别硬盘 然后 小米论坛的朋友 也有反馈 说很他们的小米笔记本也都出现了类似的情况 至今没有找到解决的方法 这可
  • 51单片机AD模数转换(SPI通信)

    一 AD DA介绍 AD AnalogtoDigital 模拟 数字转换 将模拟信号转换为计算机可操作的数字信号 DA Digital to Analog 数字 模拟转换 将计算机输出的数字信号转换为模拟信号 AD DA转换打开了计算机与模
  • python pandas定位表格中的某一单元并修改——at

    python pandas定位表格中的某一单元并修改 at 首先 我们创造一个用来进行测试的dataframe import pandas data aaa abc1 abc2 bbb bc1 bc2 ccc c1 c2 df pandas
  • Nacos安装详细过程

    本文来说下Nacos 注册中心 配置中心 安装详细过程 文章目录 初识Nacos Nacos开发必知 安装Nacos 本文小结 初识Nacos Nacos 致力于帮助您发现 配置和管理微服务 Nacos 提供了一组简单易用的特性集 帮助您快
  • 【转】介绍线性代数

    color red 这里转一个别人写的对线性代数的理解 觉得他已经写出了线性代数的魂 可惜的是我也是从网上别人的转载中摘录的 未知作者的大名啊 color 今天先谈谈对线形空间和矩阵的几个核心概念的理解 这些东西大部分是凭着自己的理解写出来
  • Canvas画布基本功能及实现网页签名功能

    canvas 简介
  • C++之泛型编程

    目录 模板 模板的特点 函数模板 前言 函数模板的使用方式 函数模板具体案例 使用模板的注意事项 普通函数与函数模板间的区别 具体案例 普通函数与函数模板调用规则 模板的局限性 具体化模板 类模板 前言 类模板与函数模板的区别 类模板中成员
  • JS URL的编码解码以及使用场景

    前端事件交互 有的时候会用到url作为参数 然而你会发现直接把url当个字符串来处理会发现有很多的局限性 比如说我想添加一个参数什么的 或者进行个解析比较麻烦 而且有的时候解析url有的时候因为特殊符号什么的也是个问题 于是有了JS的url