json對象與字符串相互轉換

時間  2019-11-08
標籤 json 對象 字符串 相互 轉換 欄目 JavaScript 简体版
原文   原文鏈接
複製代碼

JSON 語法

JSON 語法規則

在 JS 語言中，一切都是對象。所以，任何支持的類型均可以經過 JSON 來表示，例如字符串、數字、對象、數組等。可是對象和數組是比較特殊且經常使用的兩種類型：
  • 對象表示爲鍵值對
  • 數據由逗號分隔
  • 花括號保存對象
  • 方括號保存數組

JSON 鍵/值對

JSON 鍵值對是用來保存 JS 對象的一種方式，和 JS 對象的寫法也大同小異，鍵/值對組合中的鍵名寫在前面並用雙引號 "" 包裹，使用冒號 : 分隔，而後緊接着值：
1
{"firstName": "Json"}
這很容易理解，等價於這條 JavaScript 語句：
1
{firstName : "Json"}

JSON 與 JS 對象的關係

不少人搞不清楚 JSON 和 Js 對象的關係，甚至連誰是誰都不清楚。其實，能夠這麼理解：
JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質是一個字符串。
如
1
var  obj = {a:  'Hello' , b:  'World' };  //這是一個對象，注意鍵名也是可使用引號包裹的

 

1
var  json =  '{"a": "Hello", "b": "World"}' ;  //這是一個 JSON 字符串，本質是一個字符串


JSON 和 JS 對象互轉

要實現從對象轉換爲 JSON 字符串，使用 JSON.stringify() 方法：
 
 
var  json = JSON.stringify({a:  'Hello' , b:  'World' });  //結果是 '{"a": "Hello", "b": "World"}'

 

要實現從 JSON 轉換爲對象，使用 JSON.parse() 方法：
 
 
var  obj = JSON.parse( '{"a": "Hello", "b": "World"}' );  //結果是 {a: 'Hello', b: 'World'} 
//使用json中的parser方法轉換；

var str='{"name":"fendouer", "age":23}';      //這是一個json字符串''
var ob=JSON.parse(str) ;  //返回一個新對象
console.log(ob.name)


//把json中的stringify對象轉換成字符串 

var obj={"student":[{"name":"cyl","age":"21"},{"name":"hyj","age":"23"}]};      //這是一個json對象
var str=obj.student[0].name;
var newstr=JSON.stringify(str); //返回一個新字符串
console.log(newstr);
複製代碼

在Firefox，chrome，opera，safari，ie9，ie8等高級瀏覽器直接能夠用JSON對象的stringify()和parse()方法。
JSON.stringify(obj)       將JSON對象轉爲字符串。
JSON.parse(string)       將字符串轉爲JSON對象格式。javascript

簡單栗子：css

複製代碼 
var a={"name":"tom","sex":"男","age":"24"}; 
var b='{"name":"Mike","sex":"女","age":"29"}'; 
var aToStr=JSON.stringify(a);             //對象轉換成字符串
var bToObj=JSON.parse(b);                //字符串轉換成對象
alert(typeof(aToStr));                           //string 
alert(typeof(bToObj));                          //object 
JSON.stringify();
複製代碼

 

 擴展：html

jquery中也有將字符串轉爲JSON格式的方法jquery.parseJSON( json )，接受一個標準格式的 JSON 字符串，並返回解析後的 JavaScript （JSON）對象。固然若是有興趣能夠本身封裝一個jquery擴展，jQuery.stringifyJSON(obj)將JSON轉爲字符串。
這只是一種方法，還有幾種方法，你們能夠看一下：java


1) jquery插件支持的轉換方式：jquery

$.parseJSON( jsonstr );git

//jquery.parseJSON(jsonstr), 能夠將json字符串轉換成json對象。github

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>json字符串轉爲json對象-jQuery.parseJSON()</title>
        <style type="text/css">
            p{
                white-space: pre-line;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <p><a href="http://www.css88.com/jqapi-1.9/jQuery.parseJSON/">資源連接：http://www.css88.com/jqapi-1.9/jQuery.parseJSON/</a></p>
        <p>jQuery中也有將字符串轉爲JSON格式的方法jQuery.parseJSON( json )，接受一個標準格式的 JSON 字符串，並返回解析後的 JavaScript （JSON）對象。</p>
        <p>
            描述: 接受一個標準格式的 JSON 字符串，並返回解析後的 JavaScript 值。
            
            從jQuery 3.0開始，不推薦使用$.parseJSON。 要解析JSON字符串，請改用原生的 JSON.parse 方法。
            
            傳入格式有誤的 JSON 字符串可能致使拋出異常。例如，下面這些無效的 JSON 字符串：
            ---------------------------------------------------
            {test: 1} (test 沒有使用雙引號包裹).
            {'test': 1} ('test' 用了單引號而不是雙引號包裹).
            "{test: 1}" (test 沒有使用雙引號包裹).
            "{'test': 1}" ('test' 用了單引號而不是雙引號包裹).
            "'test'" ('test' 用單引號代替雙引號).
            ".1" (number 必須以數字開頭; "0.1" 將是有效的).
            "undefined" (undefined 不能表示一個 JSON 字符串; 然而null,能夠).
            "NaN" (NaN 不能表示一個 JSON 字符串; 用Infinity直接表示無限也是不容許的).
            ---------------------------------------------------
            
            JSON標準不容許「控制字符」如製表符或換行符。
            好比$.parseJSON('{"testing":"1\t2\n3"}')，大多數實現中將拋出一個錯誤，由於JavaScript分析器直接轉換字符串的製表符和換行符爲文本的製表符和換行符; 
            產生雙反斜槓，例如"1\\t2\\n3"是預期的結果。
            這個問題每每在服務器端語言，如PHP，JSON注入到一個JavaScript文件時發生。
            
            若是瀏覽器實現了原生的 JSON.parse， jQuery 則會使用它來解析字符串。
            
            在jQuery 1.9以前,若是傳遞給$.parseJSON一個空字符串，null, 或者 undefined,，將返回null，而不是拋出一個錯誤，即便這些都不是有效的JSON。
            
            jQuery 3.0開始，$.parseJSON已通過時（不建議使用）。要將字符串解析成JSON對象，請使用原生的JSON.parse方法來代替。
            
        </p>
        <script src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript">
            //解析一個 JSON 字符串。
            var d = '{"name":"鄭秀晶","sex":"女","age":"23","height":"165","weight":"95g"}';
            console.log(d)      //
            console.log(typeof(d))         //string
            
            var obj = jQuery.parseJSON(d); 
            console.log(obj)          //
            console.log(typeof(obj))       //object
            
            console.log( obj.name );      //鄭秀晶
            
        </script>
    </body>
</html>
複製代碼

 

2) 兼容：瀏覽器支持的轉換方式(Firefox，chrome，opera，safari，ie9，ie8)等瀏覽器： 
JSON.parse(jsonstr);                     //能夠將json字符串轉換成json對象 
JSON.stringify(jsonobj);               //能夠將json對象轉換成json對符串 
注：ie8(兼容模式),ie7和ie6沒有JSON對象，推薦採用JSON官方的方式，引入json.js。chrome

 

3) JSON官方的轉換方式： 
http://www.json.org/       提供了一個json.js,這樣ie8(兼容模式),ie7和ie6就能夠支持JSON對象以及其stringify()和parse()方法； 
能夠在https://github.com/douglascrockford/JSON-js上獲取到這個js，通常如今用json2.js。json

 

4) Javascript支持的轉換方式（eval）： 
eval('(' + jsonstr + ')');                  //能夠將json字符串轉換成json對象,注意須要在json字符外包裹一對小括號 
注：ie8(兼容模式),ie7和ie6也可使用eval()將字符串轉爲JSON對象，但不推薦這些方式，這種方式不安全eval會執行json串中的表達式。api

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>string轉object-兼容低版本瀏覽器（eval實現）</title>
    </head>
    <body>
        <p style="white-space: pre-line; font-size: 18px;">
        ie8(兼容模式),ie7和ie6沒有JSON對象，不過http://www.json.org/提供了一個json.js,
        這樣ie8(兼容模式),ie7和ie6就能夠支持JSON對象以及其stringify()和parse()方法；
        你能夠在https://github.com/douglascrockford/JSON-js上獲取到這個js，通常如今用json2.js。

        ie8(兼容模式),ie7和ie6可使用eval()將字符串轉爲JSON對象，
        eval("("+c+")")
        </p>
        
        <!--兼容ie6/7/8--引入json2.js文件-->
        <script src="js/json2.js"></script>
        <script type="text/javascript">
            
            var c='{"name":"鄭秀晶","sex":"女","age":"23","height":"165","weight":"95g"}';
            console.log(c);
            console.log(typeof(c));  //string
            
            var cToObj=eval("("+c+")");
            console.log(typeof(cToObj));       //object
            
        </script>
    </body>
</html>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程