javascript escape()和unescape()区别

简介: javascript escape()和unescape()区别
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() 函数对编码的字符串进行解码。

相关文章
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
597 0
|
前端开发 JavaScript UED
JavaScript防抖和节流的使用及区别
JavaScript防抖和节流的使用及区别
711 154
|
JavaScript 前端开发 容器
this、self、window、top 在 JavaScript 中的区别深入研究
在 JavaScript 开发中,`this`、`self`、`window` 和 `top` 是四个常用的概念。`this` 指向当前执行上下文的对象,其值取决于函数调用方式;`self` 在全局作用域中等同于 `window`,常用于 Web Workers;`window` 代表浏览器窗口,是全局变量的容器;`top` 指向最顶层窗口,用于判断是否在框架中。理解这些概念有助于编写健壮的代码。
493 1
this、self、window、top 在 JavaScript 中的区别深入研究
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
645 1
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
394 2