javascript escape()和unescape()区别

最新推荐文章于 2024-05-22 09:40:33 发布
最新推荐文章于 2024-05-22 09:40:33 发布
阅读量389 收藏
点赞数
原文链接：https://www.jianshu.com/u/05f416aefbe1
版权

#####JavaScript escape() 函数定义和用法

escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

语法：

escape(string)

例子：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>

        </style>
    </head>
    <body>

    </body>

    <script>
        document.write(escape("wang xiaoting!") + "<br />")
        document.write(escape("?!=()#%&"))
    </script>
</html>

#####JavaScript unescape() 函数定义和用法

unescape() 函数可对通过 escape() 编码的字符串进行解码。

语法：

unescape(string)

在本例中，我们将使用 escape() 来编码字符串，然后使用 unescape() 对其解码：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<style>

		</style>
	</head>
	<body>

	</body>

	<script type="text/javascript">
	
	var test1="wang  xiao ting !"
	
	test1=escape(test1)
	document.write (test1 + "<br />")
	
	test1=unescape(test1)
	document.write(test1 + "<br />")
	
	</script>
</html>

举个栗子：

实际应用在项目里面

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Dashboard | Nadhif - Responsive Admin Template</title>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
	</head>
	<style>
		.page-content-wrapper {
			width: 800px;
			position: absolute;
			top: 10%;
			left: 24%;
			background: #fff;
			border: 1px solid #999;
			padding: 3% 0 0 9%;
			display: none;
		}
		.inputstyle {
			width: 60%;
			height: 34px;
			padding: 6px 12px;
			font-size: 14px;
			line-height: 1.42857143;
			color: #555;
			background-color: #fff;
			background-image: none;
			border: 1px solid #ccc;
			border-radius: 4px;
		}
	</style>
	<body>

		<table id="mytab" class="table table-hover"></table>
		<!-- 新增和修改界面 -->
		<div class="page-content-wrapper">
			<input type="text" class="inputstyle" id="id" style="display: none;">
			<div class="form-group">
				<label>工号:</label> <input type="text" class="inputstyle" id="deviceId">
			</div>
			<div class="form-group">
				<label>姓名:</label> <input type="text" class="inputstyle" id="name">
			</div>
			<div class="form-group">
				<label>电话:</label> <input type="text" class="inputstyle" id="phone">
			</div>
			<div class="form-group">
				<label>公司:</label> <input type="text" class="inputstyle" id="organName">
			</div>


			<div class="modal-footer">
				<button type="button" class="btn default" data-dismiss="modal" id="close">关闭</button>
				<button type="button" class="btn blue" id="addBtn">保存</button>

			</div>
		</div>

		<script>
			$('#mytab').bootstrapTable({
				method: 'get',
				url: "test.json", // 请求路径
				striped: true, // 是否显示行间隔色
				pageNumber: 1, // 初始化加载第一页
				pagination: true, // 是否分页
				sidePagination: 'client', // server:服务器端分页|client：前端分页
				pageSize: 5, // 单页记录数
				pageList: [5, 20, 30],
				// showRefresh : true,// 刷新按钮
				queryParams: function(params) { // 上传服务器的参数
					var temp = {

					};
					return temp;
				},
				columns: [{
					title: 'id',
					field: 'id',
					visible: false
				}, {
					title: '工号',
					field: 'deviceId',

				}, {
					title: '姓名',
					field: 'name',

				}, {
					title: '联系电话',
					field: 'phone'
				}, {
					title: '公司部门',
					field: 'organName'
				}, {
					title: '操作',
					field: 'id',
					formatter: option
				}]
			})

			// 定义删除、更新按钮
			function option(value, row, index) {
				var htm = "";
				htm = '<button id="upd"  onclick="update(\'' + escape(JSON.stringify(row)) + '\')">修改</button>';
				return htm;
			}

			function update(row) {
				$(".page-content-wrapper").show();
				var data = JSON.parse(unescape(row))
				$('#deviceId').val(data.deviceId)
				$('#name').val(data.name)
				$('#phone').val(data.phone)
				$('#organName').val(data.organName)

			}
			$("#close").on("click", function() {
				$(".page-content-wrapper").hide();
			})
		</script>
	</body>

</html>

test.json

[
    {
        "id": 1,
        "deviceId": "43445",
        "name": "王小婷",
        "phone": "1567865475",
        "organName": "字节跳动"
    },  {
        "id": 2,
        "deviceId": "53456",
        "name": "最帅的坏兔子",
        "phone": "1567865475",
        "organName": "腾讯" 
    },{
        "id": 3,
        "deviceId": "2345",
        "name": "阿强",
        "phone": "1567865475",
        "organName": "360" 
    },{
        "id": 4,
        "deviceId": "2345",
        "name": "阿花",
        "phone": "1567865475",
        "organName": "百度" 
    },
	{
	    "id": 5,
	    "deviceId": "2345",
	    "name": "阿奶",
	    "phone": "1567865475",
	    "organName": "蚂蚁金服" 
	},{
	    "id": 5,
	    "deviceId": "2345",
	    "name": "阿狗",
	    "phone": "1567865475",
	    "organName": "阿里" 
	}
]

首先使用escape对字符串进行编码，然后使用unescape() 函数对编码的字符串进行解码。

在这里插入图片描述

前端王小婷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Escape/Unescape,HTML实体编码，敲击码(Tap code),摩尔斯电码(Morse Code)
X__WY__X的博客
09-23 1万+
1.Escape/Unescape 加密解码/编码解码,又叫%u编码，采用UTF-16BE模式， Escape编码/加密,就是字符对应UTF-16 16进制表示方式前面加%u。Unescape解码/解密，就是去掉"%u"后，将16进制字符还原后，由utf-16转码到自己目标字符。如：字符“中”，UTF-16BE是：“6d93”，因此Escape是“%u6d93”。 2.敲击码(Tap code) 敲击码(Tap code)是一种以非常简单的方式对文本信息进行编码的方法。因该编码对信息通过使用一系列的点击声音
javascript
weixin_44654375的博客
02-15 414
-JavaScript 今日内容 使用JS完成图片轮播效果 使用JS完成页面定时弹出广告 使用JS完成表格的隔行换色 使用JS完成复选框的全选效果 使用JS完成省市联动效果 学习目标 使用JS可以获得指定元素 使用JS可以编写定时程序 使用JS可以创建元素 使用JS可以对元素的属性进行操作 使用JS可以对元素的标签体进行操作 使用JS可以对指定元素的样式进行操作（获得或修改） ...
escape();unescape();编码解码
weixin_33778778的博客
07-18 363
escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。 返回值 已编码的string的副本。其中某些字符被替换成了十六进制的转义序列。 说明 该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。 提示和注释 提示：可以使用unescape()对...
JavaScript 中 unescape() 和 escape() 函数有什么区别
最新发布
每天都要努力学习哦~~
05-22 852
escape() 函数可以将字符串中的非 ASCII 字符转义为十六进制表示的字符串，以便在 URL 编码或者HTML编码中使用。unescape() 函数与 escape() 函数功能相反，可以将经过转义的十六进制字符转回为原始的 Unicode 字符。escape() 和 unescape() 函数是 JavaScript 中用于字符转义和解密的函数。escape() 函数将字符串中的非 ASCII 字符转义为十六进制表示的字符串，以便在 URL 编码或者 HTML 编码中使用。
Javascript escape() 函数和unescape() 函数
2301_78835635的博客
12-14 571
charString是必选参数，表示要进行编码的字符串或文字。与escape()函数相反，unescape()函数返回一个包含charString内容的字符串值，所有以“%xx”十六进制形式编码的字符都用ASCII字符集中等价的字符代替。空格符对应的编码是“%20”，感叹号对应的编码是“%21”，因此执行unescape("hello%20lvye%21")后结果为“hello lvye!空格符对应的编码是“%20”，感叹号对应的编码是“%21”，因此执行escape("hello lvye!
了解escape、unescape
大佬请赐教
06-26 2255
escape(charstring)方法 作用：对String对象进行编码，以便他们能够在所有计算机上可读 参数：参与编码的任意String对象或文字 返回值：返回一个包含了charstring内容的字符串值(Unicode格式) ①所有空格、标点、重音符号及其它非ASCII字符都用%xx(xx等于表示该字符的十六进制数)编码代替，如空格返回的是 "%20"，>返回的是"%3e"。 ②字符值...
JS escape()和unescape()函数的介绍
成长的味道
11-24 2961
escape()和unescape()是一对编码解码函数，一般用于URL中非ASCII字符的编码和解码！ 如：escape("&")返回%26,unescape("%26")返回&,都用十六进制编码！         这个函数在AJAX技术应用中发送中文字串很有用，特别是AJAX向GB2312编码的ASP程序发送中文时很有用！         如：要将name="东方不败"发给red.a
JavaScript
weixin_30540691的博客
09-07 889
JavaScript 引入方式 1.script标签内写入代码 <script> //js代码 </script> 2.引入JS文件 <script src='js文件'></script> 语法规范 1.注释 // 单行注释 ​ /* 多行注释 */ 2.结束...
JavaScript escape/unescape 编码的 Java 实现
05-26
本工具类用java实现了JavaScript escape/unescape 编码。对接建行支付以及需要向后端传输中文数据时可以使用得到
PHP实现Javascript中的escape及unescape函数代码分享
10-24
在JavaScript中，`escape`和`unescape`函数是用来对字符串进行编码和解码的，主要是为了处理非ASCII字符。然而，在PHP中，没有直接对应的内置函数。但是，通过自定义函数，我们可以模拟这些功能。这里我们将深入探讨...
如何使用PHP实现javascript的escape和unescape函数
10-27
本篇文章是对使用PHP实现javascript的escape和unescape函数的方法进行了详细的分析介绍，需要的朋友参考下
javascript-escape-unescape:Javascript EscapeUnescape
04-07
JavaScript中的`escape()`和`unescape()`函数是两个与字符串编码和解码相关的函数，它们在处理特殊字符和非ASCII字符时尤其有用。这两个函数在Web开发中扮演着重要角色，尤其是在处理URL、HTML和JSON数据时。 首先...
android 实现JavaScript escape unescape
09-24
输入样例： String stest = "中文1234 abcd[](),.~\\";...System.out.println(unescape(escape(stest))); 输出结果： 中文1234 abcd[](),.~\ %u4E2D%u65871234+abcd%5B%5D()%3C%2B%3E%2C.~%5C 中文1234 abcd[](),.~\
js中escape和unescape方法
请不要被黑暗的手抓住,朝着光的方向奔跑吧
01-30 2299
1.escape 方法 对 String 对象编码以便它们能在所有计算机上可读， escape(charString) 必选项 charstring 参数是要编码的任意 String 对象或文字。 说明 escape 方法返回一个包含了 charstring 内容的字符串值（ Unicode 格式）。所有空格、标点、重音符号以 及 其他非 ASC...
学习：escape和unescape使用
Shelly Long的博客
09-13 3288
escape方法 对String对象进行编码，以便他们能够在所有计算机上可读 escape(charString) 必选项 charstring 参数是要编码的任意 String 对象或文字。 escape 方法返回一个包含了 charstring 内容的字符串值（ Unicode 格式）。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字...
js中的编码解码--escape/unescape、encodeURI/decodeURI 、encodeURIComponent/decodeURIComponent
wujiyue的博客
07-03 605
一、escape/unescape         escape:escape 方法返回一个包含 charstring 内容的字符串值（Unicode 格式）。所有空格、标点、 重音符号以及任何其他非 ASCII 字符都用 %xx 编码替换，其中 xx 等于表示该字符的十六进制数      unescape:从用 escape 方法编码的 String 对象中返回已解码的字符串   
三种编解码方式
weixin_30340775的博客
04-07 1343
js对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent 1、 传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。 例如：<script la...
JavaScript系统函数详解与教程
"这篇教程详细介绍了JavaScript中的系统函数，包括eval()、unescape()、escape()、parseFloat()和parseInt()等。JavaScript是一种基于对象、事件驱动的轻量级编程语言，由Netscape公司开发，它与Java虽然名字相似，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值