js實現字串轉JSON格式

coolxiaoyi發表於2019-07-31
字串JSON

　　在瀏覽器前端實現字串轉JSON格式，有多種方法，總結如下：

  • 方法1.  js函式，eval()

語法：

var obj = eval ("(" + txt + ")");  //必須把文字包圍在括號中，這樣才能避免語法錯誤

eval()定義：eval() 函式可計算某個字串，並執行其中的的 JavaScript 程式碼。

由於 JSON 語法是 JavaScript 語法的子集，JavaScript 函式 eval() 可用於將 JSON 文字轉換為 JavaScript 物件。

注意：當字串中包含表示式時，eval() 函式也會編譯並執行，轉換會存在安全問題。

參考：JSON 使用 | 菜鳥教程，JavaScript eval() 函式

 

  • 方法2.  瀏覽器自帶物件JSON，JSON.parse()

語法：

JSON.parse(text[, reviver])
//text:必需， 一個有效的 JSON 字串。解析前要確保你的資料是標準的 JSON 格式，否則會解析出錯。
//reviver: 可選，一個轉換結果的函式， 將為物件的每個成員呼叫此函式。

JSON.parse()比eval()安全，而且速度更快。支援主流瀏覽器：Firefox 3.5，IE 8，Chrome，Opera 10，Safari 4。

注意：IE8相容模式，IE 7，IE 6，會存在相容性問題。

解決方法：引入json2.js（JSON官網）

<!--[if lte IE 7]>
<script src="json2.js"></script>    
<![endif]-->

json2.js關鍵原始碼分析：

//paring過程分為4個步驟。
//第一個步驟是將unicode字元替換為轉義字元。
//js在處理多種字元時是有問題的，不是悄悄的刪掉他們，就是把他們當作行結束符。
            text = String(text);
            cx.lastIndex = 0;
            if (cx.test(text)) {
                text = text.replace(cx, function (a) {
                    return '\\u' +
                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
                });
            }
            
//第二個步驟如下：
// In the second stage, we run the text against regular expressions that look
// for non-JSON patterns. We are especially concerned with '()' and 'new'
// because they can cause invocation, and '=' because it can cause mutation.
// But just to be safe, we want to reject all unexpected forms.
 
// We split the second stage into 4 regexp operations in order to work around
// crippling inefficiencies in IE's and Safari's regexp engines. First we
// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
// replace all simple value tokens with ']' characters. Third, we delete all
// open brackets that follow a colon or comma or that begin the text. Finally,
// we look to see that the remaining characters are only whitespace or ']' or
// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
 
            if (/^[\],:{}\s]*$/
                    .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
                        .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
                        .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
 
//第三步驟：呼叫eval命令
//'{'在js中有語法歧義傾向：可以是程式塊或者物件字面值。所以這裡使用括號來避免歧義                
                j = eval('(' + text + ')');
json2.js關鍵原始碼

參考：JSON.parse() | 菜鳥教程，json2.js 簡析(個人學習） - 奮鬥小小鳥的專欄

 

  • 方法3.  引用jQuery外掛，$.parseJSON()

語法：

$.parseJSON(json)  //json：String型別，傳入格式有誤的JSON字串可能導致丟擲異常

$.parseJSON()關鍵原始碼分析：

// Attempt to parse using the native JSON parser first
if ( window.JSON && window.JSON.parse ) {
      return window.JSON.parse( data );
 }

// Make sure the incoming data is actual JSON
// Logic borrowed from http://json.org/json2.js
if ( rvalidchars.test( data.replace( rvalidescape, "@" )
     .replace( rvalidtokens, "]" )
     .replace( rvalidbraces, "")) ) {
        return ( new Function( "return " + data ) )();
}
$.parseJSON()關鍵原始碼

參考：jQuery.parseJSON()方法 | 菜鳥教程，jQuery靜態方法parseJSON方法使用和原始碼分析 - -洋仔

 

  • 方法4.  AJAX請求獲取JSON資料時，$.getJSON() 

語法：

jQuery.getJSON(url,data,success(data,status,xhr))
//url    必需。規定將請求傳送的哪個 URL。
//data    可選。規定連同請求傳送到伺服器的資料。
//success(data,status,xhr)    可選。規定當請求成功時執行的函式。

這個時候返回的data已經是JSON物件，不需要再進行轉換。

$.getJSON() 是簡寫的 Ajax 函式，等價於：

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: "json"
});

參考：jQuery ajax - getJSON() 方法

 

 總結：

1.建議使用JSON.parse()方法；如果需相容IE7/6，再引入json2.js檔案。相對應的JSON.stringify()方法，可用來將JSON物件轉換為字串。

2.如果頁面裡已經引用jQuery，你又不想再引入多餘檔案(json2.js)，也可以使用$.parseJSON()方法。

3.使用eval()時，要注意字串裡沒有可執行程式碼。

4.如果是通過AJAX獲取JSON資料，直接用$.getJSON()函式，或者在$.ajax()中加入引數dataType: "json"，就可以直接得到JSON物件。

 

 

參考：JS字串轉換為JSON的四種方法筆記 - 天使不哭 - 部落格園

相關文章