javascript - console.log 和 JSON.parse 返回错误

Question

我正在尝试解析 JSON 字符串并将其记录到 Chrome 控制台。该字符串使用 JSONLint 进行验证。那么为什么 Chrome 返回错误:“Uncaught SyntaxError: Unexpected token %”？

<script>console.log(JSON.parse('{"header-top":{"name":"Header Top","id":"header-top","description":"","class":"","before_widget":"\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E","after_widget":"\u003C\/li\u003E\n","before_title":"\u003Ch2 class=\u0022widgettitle\u0022\u003E","after_title":"\u003C\/h2\u003E\n"}}'));</script>

这是 JSON，打印得很漂亮:

{
    "header-top": {
        "name": "Header Top",
        "id": "header-top",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "header": {
        "name": "Header",
        "id": "header",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "header-bottom": {
        "name": "Header Bottom",
        "id": "header-bottom",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "content-top": {
        "name": "Content Top",
        "id": "content-top",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "content": {
        "name": "Content",
        "id": "content",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "content-bottom": {
        "name": "Content Bottom",
        "id": "content-bottom",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "footer-top": {
        "name": "Footer Top",
        "id": "footer-top",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "footer": {
        "name": "Footer",
        "id": "footer",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    },
    "footer-bottom": {
        "name": "Footer Bottom",
        "id": "footer-bottom",
        "description": "",
        "class": "",
        "before_widget": "\u003Cli id=\u0022%1$s\u0022 class=\u0022widget %2$s\u0022\u003E",
        "after_widget": "\u003C\/li\u003E\n",
        "before_title": "\u003Ch2 class=\u0022widgettitle\u0022\u003E",
        "after_title": "\u003C\/h2\u003E\n"
    }
}

Answer 1

发生这种情况是因为字符串之一中存在 \u0022 字符。

它的问题在于，当评估字符串文字(长 JSON)时，它会被替换为 " (引号字符)，这会导致某些 JSON 字符串损坏:

"\u0022"

变成了

"""

因此从技术上讲，给定的 JSON 是有效的 JSON，但它不能在评估 \uXXXX 序列的环境中按原样使用。

例如，您可以从其他来源读取它 - 例如作为 AJAX 请求的响应，但您不能将其用作 JS 代码中的字符串文字。