尝试在 JavaScript 中实现 JSON 解析函数以更漂亮的格式输出字符串 [重复]

Question

我很清楚 npm 包中存在 JSON.parse 和 JSON.stringify 和 prettier。但由于某种原因，我仍然必须手动执行此操作。把它想象成一个编码面试问题，请不要仅仅因为我可以使用JSON.parse 和JSON.stringify 而关闭这个问题，正如我所说的那样有这个限制。

这是一个字符串"['foo', {bar:['baz',null,1.0,2]}]"

我想实现一个函数来返回一个字符串，该字符串表示具有适当缩进的 json 对象。

即输出 string 应该是

   [
        "foo", 
        {
            "bar":
            [
                "baz", 
                null, 
                1.0, 
                2
            ]
        }
    ]

这是我的尝试

function printJSON(str) {
    let spaces = [];
    let output = '';

    str.split('').forEach(char => {
        switch(char) {
            case '{':
            case '[':
                spaces.push('    ');
                output += char + '\n' + spaces.join('');
                break;
            case '}':
            case ']':
                spaces.pop();
                output += '\n' + spaces.join('') + char;
                break;
            case ',':
                output += char + '\n' + spaces.join('');
                break;
            default:
                output += char;
                break;
        }
    });

    console.log(output);
    return output
}

但输出格式与中略有不同

[ 
    "foo", 
     { 
        bar:[ // ????
            "baz", 
            null, 
            1.0, 
            2 
        ] 
    } 
] 

如何解决此格式问题？还有没有更优雅的方式或替代方式来实现这一点？

Answer 1

你试过JSON.stringify的内置漂亮打印吗？

例如：

console.log(JSON.stringify(
  ['foo', { bar: ['baz', null, 1.0, 2 ] } ],
  null,
  4 // Indent, specify number of spaces or string
));

输出：

[
    "foo",
    {
        "bar": [
            "baz",
            null,
            1,
            2
        ]
    }
]

如果您想将字符串用作美化代码的函数的输入：

function pretty(string) {
  var object = JSON.parse(string) /* or eval(string) */;
  return JSON.stringify(object, null, 4);
}

---

不过，推出自己的解决方案并不困难。我们从写作开始-

const input =
  ['foo', {bar:['baz',null,1.1,2]}]

const result =
  toJson(input)

toJson 对输入 t 进行简单类型分析 -

function toJson (t, i = "  ", d = 0)
{ function toString(t)
  { switch (t?.constructor)
    { case Object:
        return [ "{", indent(Object.entries(t).map(([k, v]) => `${k}:\n${toString(v)}`).join(",\n"), i, d + 1), "}" ].join("\n")
      case Array:
        return [ "[", indent(t.map(v => toString(v)).join(",\n"), i, d + 1), "]" ].join("\n")
      case String:
        return `"${t}"`
      case Boolean:
        return t ? "true" : "false"
      default:
        return String(t ?? null)
    }
  }
  return indent(toString(t), i, d)
}

indent 在哪里-

const indent = (s, i = "  ", d = 0) =>
  s.split("\n").map(v => i.repeat(d) + v).join("\n")

展开下面的sn-p，在你自己的浏览器中运行toJson——

function toJson (t, i = "  ", d = 0)
{ function toString(t)
  { switch (t?.constructor)
    { case Object:
        return [ "{", indent(Object.entries(t).map(([k, v]) => `${k}:\n${toString(v)}`).join(",\n"), i, d + 1), "}" ].join("\n")
      case Array:
        return [ "[", indent(t.map(v => toString(v)).join(",\n"), i, d + 1), "]" ].join("\n")
      case String:
        return `"${t}"`
      case Boolean:
        return t ? "true" : "false"
      default:
        return String(t ?? null)
    }
  }
  return indent(toString(t), i, d)
}

const indent = (s, i = "  ", d = 0) =>
  s.split("\n").map(v => i.repeat(d) + v).join("\n")

const input =
  ['foo', {bar:['baz',null,1.1,2]}]

const result =
  toJson(input)

console.log(result)

结果符合要求-

[
  "foo",
  {
    bar:
    [
      "baz",
      null,
      1.1,
      2
    ]
  },
  true
]

您可以通过指定第二个参数来自定义缩进，例如制表符 -

const result =
  toJson(input, "\t") // indent using a tab

或者使用自定义数量的空格 -

const result =
  toJson(input, "    ") // indent using a four (4) spaces