ES6 - 如何使用模板文字保留 JSON 语法？

Question

当我这样做时：

console.log(JSON)

它将在控制台中以JSON语法显示：

[ { test1: 'data',
    test2: 'data',
    test3: 'data' } ]

当我这样做时：

console.log(`JSON Data\n\n${JSON}`)

它将显示 [object Object] 所以我这样做：

console.log(`JSON Data\n\n${JSON.stringify(JSON)}`)

以字符串语法显示：

[{"test1":"data","test2":"data","test3":"data"}]

我想对 JSON 数据执行 console.log，后跟模板文字中的一些文本，同时保持 JSON 语法，如下所示：

[ { test1: 'data',
test2: 'data',
test3: 'data' } ]

JSON Data Displayed Above

Answer 1

当您使用模板文字时，结果是一个字符串。如果要添加文本标签 before/after 记录的数据或其他值，请用逗号分隔它们：

var data = { a: 1, b: [1, 2] };
console.log('Before:', data, '\n\nJSON Data Displayed Above');

console.log(data, '\n\nAfter');

console.log('Before\n', data, '\n\nAfter');

Answer 2

或者，您可以更改对象转换为字符串的方式：

 Object.prototype.toString = function(){
   return JSON.stringify(this);
 };

现在这将按预期工作：

 console.log(`JSON Data\n\n${JSON}`)

Answer 3

console 实现是 browser-specific。在现代浏览器中，对象可以以 human-readable 形式输出。

现代实现支持多个 console 参数（正如另一个答案所建议的）：

console.log(`JSON Data`, json);

这在旧版浏览器中可能无法正常工作；多个 console.log 参数最初用于 string substitutions，如果第一个参数不小心包含替换语法，则可能会出现问题，例如%s.

一种兼容的，cross-platform实现string-only，human-readable输出的方式是配置对象字符串化：

console.log(`JSON Data\n\n${JSON.stringify(json, null, 2)}`)

这种方法的好处是输出在任何地方都保持不变，无论是旧版浏览器还是被记录器拦截的 console.log 调用。

ES6 - 如何使用模板文字保留 JSON 语法？

ES6 - How to keep JSON syntax with template literals?

javascript

json

ecmascript-6

template-literals