发表于: 2017-04-26 22:37:29
1 916
json用法,如何处理转义
1.背景介绍
J S O N是什么?
JSON 是一种轻量级的数据交换格式。 是适用于 Ajax 应用程序的一种有效格式,它使 js 对象和字符串值之间得以快速转换 JSON 同时也是一种传递对象的语法,对象可以是name/value对,数组和其他对象。
JSON传递的对象为函数时候必须是在js中进行传递,非js语言是没有办法辨别它的语法的。
JSON特性及用途
- 一种数据格式
- 基于文本的数据格式
- 轻量级的数据格式
- 被广泛地用于数据交换
JSON是一种格式,基于文本,优于轻量,用于交换数据
一种数据格式
姓名“金刚小葫芦”,身高“160cm”,体重“60kg”
name="金刚小葫芦" height="160cm" weight="60kg"金刚小葫芦 160 60 {"name":"金刚小葫芦","height":160,"weight":60}
基于文本的数据格式
JSON是基于文本的数据格式,相对于基于二进制的数据,所以JSON在传递的时候是传递符合JSON这种格式的字符串,而不是一个对象。
轻量级的数据格式
像上面的例子中的格式的数据中标签本身就占据了很多空间,而JSON比较轻量,即相同数据,以JSON的格式占据的带宽更小,这在有大量数据请求和传递的情况下是有明显优势的。
被广泛地用于数据交换
举个最简单的例子,页面之间数据的交换(页面传参)。除了页面之间可以进行数据的交换,还有前后端之间的数据交换。
2.知识剖析
JSON转义数据的书写格式是:名称/值对。
名称/值对组合中的名称写在前面(在双引号中),值对写在后面,中间用冒号隔开,2个组合之间用逗号隔开,其中值可以是:数字整数或浮点数、字符串(在双引号中)、逻辑值(true或false)、数组(在方括号中)、对象(在花括号中)、null
使用方式:
var json = {"name":"myname","password":123456}
JSON传参的使用方法
3.常见问题
JSON.parse的参数包含转移字符的时候会遇到两次转义的问题,其实第一次是字符串本身的转义,第二次是将真正转为js对象的转义。
4.解决方案
将字符串'{"a":"b","b":"\\\\"}'传递给JSON.parse,首先解析器提取单引号括起来的字符串时认为第一个\转义第二个\ 第三个\转义第四个\, 也就是说实际可输出字符串是{"a":"b","b":"\\"}
之后正式转为js对象的时候还有一次转义, 也就是实际输出字符转中的第一个\转义第二个\(此时只有两个\)。 所以console.log(JSON.parse('{"a":"b","b":"\\\\"}') );输出结果为Object {a: "b", b: "\"}, 也就是说实际显示的数据为一个\(实际可输出一个\说明在此之前还有一个\)。
'{"a":"b","b":"\\\\"}'
JSON.parse('{"a":"b","b":"\\\\"}')
var obj = {a : "b",b : "\\",c : {b : "\\",a : {b : "\\"}}};
var json_str = JSON.stringify(obj);
console.log( JSON.stringify(obj) );
console.dir(JSON.parse(json_str));
console.dir(JSON.parse('{"a":"b","b":"\\\\","c":{"b":"\\\\","a":{"b":"\\\\"}}}'));
根据转义规则,实际输出一个\在这个\之前必定有一个\。所以如上第一行输出按照书写来说为'{"a":"b","b":"\\\\","c":{"b":"\\\\","a":{"b":"\\\\"}}}',可通过第三条输出来验证。
总结,如果想在js对象中出现一个\,需要在json字符串中出现四个\
5.编码实战
6.扩展思考
"\\\'\'\\"
7.参考文献
参考一:ROBOTECH_ER博客
参考二:脚本之家
8.更多讨论
json格式与js对象语法的区别?
没有json对象,只有符合json格式的对象,所以问题应该换成普通的对象和json格式的对象有什么区别?
对比内容 | JSON | JS对象 |
---|---|---|
键名 | 必须是加双引号 | 可允许不加、加单引号、加双引号 |
属性值 | 只能是数值(10进制)、字符串(双引号)、布尔值和null, | 爱啥啥 |
逗号问题 | 最后一个属性后面不能有逗号 | 可以 |
数值 | 前导0不能用,小数点后必须有数字 | 没限制 |
PPT链接:https://ptteng.github.io/PPT/PPT/js-05-json.html#/
视频连接:

评论