JavaScript中JSON与字符串互转及兼容处理详解
本文详解JavaScript中JSON对象与字符串的互转方法。重点对比原生JSON.parse与JSON.stringify的安全性及性能优势，指出eval函数的潜在风险。针对IE8以下版本缺乏原生支持的问题，提供json2.js等兼容方案及jQuery.parseJSON的使用技巧，帮助开发者实现跨浏览器稳定处理。
JSON基础与eval转换风险
JSON全称为JavaScript Object Notation，其本质即为JavaScript对象的一种数据格式表示。
若对JSON概念尚不熟悉，可参考w3cschool的相关教程进行了解http://www.w3school.com.cn/json/
首先，在JavaScript环境中构建一个包含JSON文本的字符串变量。
var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}'; 鉴于JSON语法遵循JavaScript语法的子集规范，开发者可利用JavaScript内置的eval()函数将JSON字符串解析为JavaScript对象。
eval()函数依托于JavaScript编译器来解析JSON文本并生成对应的JS对象。为确保语法正确性，必须将待解析的JSON文本包裹在圆括号内，以规避语法错误：
var obj = eval ("(" + txt + ")"); 需特别注意，eval()具备编译并执行任意JavaScript代码的能力，这引入了不可忽视的安全隐患。
采用JSON解析器将JSON字符串转换为JavaScript对象是更为安全的替代方案。因为JSON解析器仅识别合法的JSON文本，而不会执行其中的脚本代码。
在现代浏览器环境中，原生JSON支持已得到广泛提供，且JSON解析器的执行效率通常高于eval()。
当前主流浏览器及最新的ECMAScript (JavaScript)标准均已内置对JSON的原生支持功能。
原生JSON转换方法
实现字符串向JSON对象的转换，可使用语法：JSON.parse(jsonstr);
实现JSON对象向JSON字符串的转换，可使用语法：JSON.stringify(jsonObj);
jQuery与数组遍历处理
此外，还可借助JQuery库提供的方法进行处理：
利用jQuery将JSON字符串转换为对象，调用方法为：jQuery.parseJSON(jsonStr);
<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
obj = JSON.parse(txt);
document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html> 关于JSON数组的遍历，可将其视为普通JavaScript对象进行操作。
<html>
<body>
<h2>如何遍历JSON数组</h3>
<div id="result"></div>
<script type="text/javascript">
var txt = '[{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]';
var arrayJson = JSON.parse(txt);
var html='';
for(var p in arrayJson){
html+=' firstName:'+arrayJson[p].firstName;
html+=' lastName'+arrayJson[p].lastName;
html+='<br />';
}
document.getElementById("result").innerHTML= html;
</script>
</body>
</html> 旧版IE浏览器兼容性方案
对于ie8(兼容模式),ie7和ie6等老旧浏览器，由于原生不支持JSON对象，http://www.json.org/js.html提供了json.js库，使得这些浏览器能够支持JSON对象及其stringify()和parse()方法；开发者可在 https://github.com/douglascrockford/JSON-js获取该js文件，目前普遍使用json2.js版本。
在ie8(兼容模式),ie7和ie6环境中，仍可使用eval()函数将字符串转换为JSON对象：
var c='{"name":"Mike","sex":"女","age":"29"}';
var cToObj=eval("("+c+")");
alert(typeof(cToObj)); 上述内容涵盖了JS中JSON对象和String之间的互转及处理技巧，希望能为读者提供帮助。接下来补充JavaScript中String和JSON之间转换的额外知识。
以下介绍符合w3c标准的现代浏览器（如Firefox、Chrome等）中内置的JSON对象（注意首字母大写），该对象专门用于处理JSON数据，主要包含两个核心函数：
JSON.parse(text) //用于解析json字符串；
JSON.stringify(object) //用于生成json格式字符串；
早期IE版本未内置此对象，开发者可前往json官方网站自行下载json2.js以兼容早期IE版本http://www.JSON.org
历史方法与弃用建议
以下是过去常用但现已建议弃用的旧方法：
1.旧方法实现
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}2.常用封装方式
function strToJson(str){
return (new Function("return " + str))();
} 3.IE不支持的原生方法
function strToJson(str){
return JSON.parse(str);
} 4.jQuery封装方法
parseJSON: function( data ) {
if ( typeof data !== "string" || !data ) {
return null;
}
data = jQuery.trim( data );
if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")
.replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) {
return window.JSON && window.JSON.parse ?
window.JSON.parse( data ) :
(new Function("return " + data))();
} else {
jQuery.error( "Invalid JSON: " + data );
}
}, JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28