Javascript - 模板字符串不漂亮地打印对象答案

【问题标题】：Javascript - Template Strings Don't Pretty Print ObjectsJavascript - 模板字符串不漂亮地打印对象
【发布时间】：2020-03-03 17:16:16
【问题描述】：

我可以使用 ES6 模板字符串来漂亮地打印 javascript 对象吗？这是来自 React Native 项目，console.log() 输出到 Chrome 调试工具。

我想要什么

const description = 'App opened';
const properties = { key1: 'val1', blah: 123 };
console.log('Description: ', description, '. Properties: ', properties);

输出

模板字符串尝试

// Same description and properties
const logString = `Description: ${description}. Properties: ${properties}`;
console.log(logString);

输出

问题

如何使用模板字符串获得第一个输出（带有漂亮的打印）？

【问题讨论】：

什么意思？当您记录常规字符串时，您无法在控制台中获取可扩展对象。解决方案非常明显，如果您想像对象一样显示它，请不要记录字符串。

标签： javascript string ecmascript-6

【解决方案1】：

您的第一个示例实际上并未将string 输出到console。请注意 properties 如何作为单独的参数参数传递（因为它被逗号 , 包围，而不是字符串连接运算符 +）。

当您将 object（或任何 JavaScript 值）作为离散参数传递给 console 时，它可以按照自己的意愿显示它 - 包括作为交互式格式化显示，它在您的第一个示例中就是这样做的。

在您的第二个示例中，您使用的是模板字符串，但它（通常）等同于：

logString = "Description: " + description.toString() + ". Properties: " + properties.toString()";

而Object.prototype.toString() 默认返回"[object Object]"。请注意，这是一个string 值，并不是特别有用。

为了得到一个 JSON (literally JavaScript Object Notation) 在模板化字符串中使用的对象的表示使用JSON.stringify:

logString = `Description: ${ description }. Properties: ${ JSON.stringify( properties ) }.`

或者考虑为您自己的类型扩展toString：

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

【讨论】：

【解决方案2】：

我可以使用 ES6 模板字符串来漂亮地打印 javascript 对象吗？

当然，但是在将对象传递给模板字面量之前，您必须将其转换为漂亮的打印版本（我确信那里有库可以做到这一点。穷人的版本是JSON.stringify(obj, null, 2)）。

但是，由于console.log 接受任意数量的参数，您应该只将对象作为第二个参数传递，这样它就不会被转换为字符串：

const logString = `Description: ${description}. Properties:`;
console.log(logString, properties);

【讨论】：

【解决方案3】：

const logString = `Description: ${description}. Properties: ${JSON.stringify(properties, null, 2)}`;
console.log(logString);

【讨论】：

【解决方案4】：

你可以试试这个your message ${JSON.stringify(object)}

【讨论】：