Javascript：轉換代碼字符串並返回

Question

假設我有以下代碼：

var cfg = {
  config: {
    fields: {
      name: {
        type: 'text'
      },
      age: {
        type: 'number'
      }
    },
    actions: [
      {
        label: 'Print',
        cb: (model) => {
          console.log(model);
        }
     }
   ]
  },
  data: {name: 'Jhon', age: 23}
}

我想將其轉換為字符串（以便用戶對其進行編輯），然后將其轉換回可執行代碼，如何實現這一點的任何想法？

我嘗試使用JSON.stringify和JSON.parse但是這當然會剝離功能。 .toString返回"[object Object]" ，對對象進行迭代，然后在值是字符串，函數或數字的情況下調用.toString ，還有其他想法嗎？

Answer 1

Function構造函數將代碼作為字符串， eval和另外兩個也是如此。 但是，出於安全考慮，調試能力以及這樣做時可能遇到的許多其他問題，如果以某種方式可以避免，請勿將代碼轉換為字符串並向后轉換。

將代碼轉換為字符串有點煩人，因為您需要確保不重新聲明變量，並且新上下文中的所有內容在語法上都是正確的，例如，請注意，在聲明中再次命名obj的f屬性，因為稍后給eval ，它將它放在需要名稱的全局范圍內。

 let obj = { f: function f() { let stuff = "hi"; console.log("hi"); } }; let code = obj.f.toString(); console.log(code); eval(code); f(); 

請注意， JSON.stringify具有可選的replacer參數，可用於自定義流程。

我再次強烈建議在可能的情況下，避免任何代碼到/從字符串轉換，在所有正常情況下，都是不需要的，也不應該這樣做。

Answer 2

您可以遍歷該對象並將其設置為輸入元素，如下所示

for (var key in cfg.config.fields) {
   console.log(key, cfg.config.fields[key].type);
   console.log(key, cfg.data[key],'data');
   console.log('<input type="'+cfg.config.fields[key].type+'" value="'+cfg.data[key]+'">')
}

Answer 3

這是我想出的解決方案：

const toString = (code) => {
  if(Array.isArray(code)){
    return code.map(item => toString(item));
  }
  else if(typeof code == 'object'){
    let tmp = {};
    Object.keys(code).forEach(key => {
      tmp[key] = toString(code[key])
    });
    return tmp;
  }
  else{
    return code.toString().split('\n').join('').replace(/ +(?= )/gmi, '');
  }
};

這將對隨機JS結構（包含對象和數組的對象）中的所有屬性進行遞歸迭代，並返回包含字符串的對應結構，然后可以使用JSON.stringify來獲取實際的字符串。

用戶對其進行編輯后，將執行以下命令：

eval(`(${string})`);

如其他人所述，請謹慎使用eval ，這可能很危險（有趣的文章是https://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/ ）