项目开发中,Ajax是我们经常要用到的方式,无论是前端还是后端,JSON格式都是通用的。所以我们经常需要进行JSON对象和字符串对象的互转。如将JSON格式的字符串返回到前端,前端解析成JS对象(JSON )。ECMA-262(E3) 中没有将JSON概念写到标准中,但在 ECMA-262(E5) 中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法。
1、JS中字符串转JSON
JavaScript中字符串(string)转json的方法主要有四种。
1.1 使用js函数eval()
testJson=eval(jsonStr);
是错误的转换方式。正确的转换方式: testJson = eval("(" + jsonStr+ ")");
,注意 jsonStr 两边的小括号。eval()的速度非常快,但是他可以编译以及执行任何javaScript程序,所以会存在安全问题。在使用eval()时来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入,就有可能提供无效的json或者载有危险的脚本,在eval()中执行脚本,释放恶意代码。
代码如下:
function ConvertToJsonForJs() {
//var testJson = "{ name: '小强', age: 16 }";(支持)
//var testJson = "{ 'name': '小强', 'age': 16 }";(支持)
var testJson = '{ "name": "小强", "age": 16 }';
//testJson=eval(testJson);//错误的转换方式
testJson = eval("(" + testJson + ")");
alert(testJson.name);
}
1.2 使用new Function形式
使用Function来进行转换
代码如下:
var jsonStr = '{"userName": "tiu","userAge": 26,"isMale": true}';
var json = (new Function("return " + jsonStr))();
可以看到其原理就是拼接js代码字符串,然后使用Function创建一个匿名方法然后调用!在IE6/7中当字符串中含有换行(\n)时,new Function不能解析,但eval可以解析。
1.3 使用jquery.parseJSON()方法
使用jquery.parseJSON()方法对json的格式要求比较高,必须符合json格式
代码如下:
function ConvertToJsonForJq() {
var testJson = '{ "name": "小强", "age": 16 }';
//'{ name: "小强", age: 16 }' (name 没有使用双引号包裹)
//"{ 'name': "小强", 'age': 16 }"(name使用单引号)
testJson = $.parseJSON(testJson);
alert(testJson.name);
}
1.4 使用JSON全局对象
使用JSON全局对象,不过比较可惜的是IE8以下的版本没有这个对象,如果不考虑兼容IE8以下版本的话JSON全局对象是个很有用的东西。目前IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 已实现了该方法。
代码如下:
var jsonStr = '{"userName": "tiu","userAge": 26,"isMale": true}';
// 字符串转JSON对象
var json = JSON.parse(jsonStr);
// JSON对象转字符串
var str = JSON.stringify(json);
// name没有用引号引起来,使用JSON.parse所有浏览器中均抛异常,解析失败。
var str = '{name:"jack"}';
var obj = JSON.parse(str); // --> parse error
2、JS中JSON转字符串
JSON.stringify(obj)方法可以将JSON转为字符串。
var a={"name":"tom","sex":"男","age":"24"};
var b='{"name":"Mike","sex":"女","age":"29"}';
// 将JSON对象转为字符串。
var aToStr=JSON.stringify(a);
// 可以将json字符串转换成json对象
var bToObj=JSON.parse(b);
alert(typeof(aToStr)); //string
alert(typeof(bToObj));//object
在vue中还可以使用qs插件使用this.$qs.stringify(obj)进行转换。
评论区