encodeURI 确保特殊字符能够正确传输

2024-08-28 14:36

本文主要是介绍encodeURI 确保特殊字符能够正确传输,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在 JavaScript 中,decodeURIComponentdecodeURIencodeURI 和 encodeURIComponent 是用于编码和解码 URI(Uniform Resource Identifier)的常用函数。它们各有不同的用途和适用场景。

1. encodeURI

encodeURI 用于对整个 URI 进行编码,确保所有特殊字符都被转换为百分号编码形式。

用途
  • 编码整个 URI,包括协议、主机名、路径、查询字符串等。
示例
const uri = "http://example.com/path?query=value&another=value with spaces"; console.log(encodeURI(uri)); // 输出: http://example.com/path?query=value&another=value%20with%20spaces

2. encodeURIComponent

encodeURIComponent 用于对 URI 的各个组成部分(如查询字符串中的值)进行编码。
用途
  • 编码 URI 的各个组成部分,如查询参数的值。
示例
const value = "value with spaces"; console.log(encodeURIComponent(value)); // 输出: value%20with%20spaces

3. decodeURI

decodeURI 用于解码整个编码后的 URI。

用途
  • 解码整个编码后的 URI。
const encodedUri = "http%3A%2F%2Fexample.com%2Fpath%3Fquery%3Dvalue%26another%3Dvalue%2520with%2520spaces"; console.log(decodeURI(encodedUri)); // 输出: http://example.com/path?query=value&another=value%20with%20spaces

4. decodeURIComponent

decodeURIComponent 用于解码 URI 的各个组成部分(如查询字符串中的值)。

用途
  • 解码 URI 的各个组成部分,如查询参数的值。
示例
const encodedValue = "value%20with%20spaces"; console.log(decodeURIComponent(encodedValue)); // 输出: value with spaces

实际应用场景

假设你有一个对象需要通过 URL 查询参数传递,并且需要对其进行编码和解码。

编码对象

<template> <div> <button @click="navigateToCustomsData">Navigate</button> </div> </template> <script> export default { data() { return { obj: { key1: 'value1', key2: 'value with spaces' } }; }, methods: { navigateToCustomsData() { const encodedData = encodeURIComponent(JSON.stringify(this.obj)); const href = this.$router.resolve({ name: 'customsDataScreen', query: { data: encodedData } }).href; window.location.href = href; } } }; </script>

解析对象

<template> <div> <pre>{{ parsedObj }}</pre> </div> </template> <script> export default { data() { return { parsedObj: null }; }, created() { this.parseQueryParams(); }, methods: { parseQueryParams() { const queryParams = this.$route.query; if (queryParams.data) { const decodedData = decodeURIComponent(queryParams.data); try { this.parsedObj = JSON.parse(decodedData); } catch (error) { console.error('Error parsing JSON:', error); this.parsedObj = null; } } } } }; </script>

总结

  • encodeURI:用于编码整个 URI,保留一些特殊字符(如 -_. 和 ~)。
  • encodeURIComponent:用于编码 URI 的各个组成部分(如查询参数的值),对所有特殊字符进行编码。
  • decodeURI:用于解码整个编码后的 URI。
  • decodeURIComponent:用于解码 URI 的各个组成部分(如查询参数的值),对所有特殊字符进行解码。

在实际应用中,根据具体情况选择合适的函数进行编码和解码。对于查询参数的值,推荐使用 encodeURIComponent 和 decodeURIComponent

这篇关于encodeURI 确保特殊字符能够正确传输的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出

linux lvm快照的正确mount挂载实现方式

《linuxlvm快照的正确mount挂载实现方式》:本文主要介绍linuxlvm快照的正确mount挂载实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux lvm快照的正确mount挂载1. 检查快照是否正确创建www.chinasem.cn2.

Python如何判断字符串中是否包含特殊字符并替换

《Python如何判断字符串中是否包含特殊字符并替换》这篇文章主要为大家详细介绍了如何使用Python实现判断字符串中是否包含特殊字符并使用空字符串替换掉,文中的示例代码讲解详细,感兴趣的小伙伴可以了... 目录python判断字符串中是否包含特殊字符方法一:使用正则表达式方法二:手动检查特定字符Pytho

Python实现特殊字符判断并去掉非字母和数字的特殊字符

《Python实现特殊字符判断并去掉非字母和数字的特殊字符》在Python中,可以通过多种方法来判断字符串中是否包含非字母、数字的特殊字符,并将这些特殊字符去掉,本文为大家整理了一些常用的,希望对大家... 目录1. 使用正则表达式判断字符串中是否包含特殊字符去掉字符串中的特殊字符2. 使用 str.isa

Spring Boot 中正确地在异步线程中使用 HttpServletRequest的方法

《SpringBoot中正确地在异步线程中使用HttpServletRequest的方法》文章讨论了在SpringBoot中如何在异步线程中正确使用HttpServletRequest的问题,... 目录前言一、问题的来源:为什么异步线程中无法访问 HttpServletRequest?1. 请求上下文与线

使用Python创建一个能够筛选文件的PDF合并工具

《使用Python创建一个能够筛选文件的PDF合并工具》这篇文章主要为大家详细介绍了如何使用Python创建一个能够筛选文件的PDF合并工具,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录背景主要功能全部代码代码解析1. 初始化 wx.Frame 窗口2. 创建工具栏3. 创建布局和界面控件4

golang1.23版本之前 Timer Reset方法无法正确使用

《golang1.23版本之前TimerReset方法无法正确使用》在Go1.23之前,使用`time.Reset`函数时需要先调用`Stop`并明确从timer的channel中抽取出东西,以避... 目录golang1.23 之前 Reset ​到底有什么问题golang1.23 之前到底应该如何正确的

【测试】输入正确用户名和密码,点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题: 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定,导致点击后无法触发登录操作。 页面可能存在

Redis 篇-深入了解基于 Redis 实现分布式锁(解决多线程安全问题、锁误删问题和确保锁的原子性问题)

🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录         1.0 分布式锁概述         1.1 Redis 分布式锁实现思路         1.2 实现基本的分布式锁         2.0 Redis 分布式锁误删问题         2.1 解决 Redis 分布式锁误删问题         3.0 Redis 分