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

Question

我可以使用 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);

输出

问题

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

Answer 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 );
};

---

作为现代浏览器的进一步改进，您可以在控制台输出中呈现交互式 JSON 对象，然后您可以在格式字符串中使用

%o

字符串替换说明符，如下所示：

var foo = { a: 123, b: 'bar' };

console.log( 'Logged object follows this: %o - and some following text too', foo );

...在 Chrome 的控制台中显示如下：

...它是交互式的，请参阅：

Answer 2

你可以试试这个

your message ${JSON.stringify(object)}

Answer 3

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

当然，但是在将对象传递给模板文字之前，您必须将其转换为漂亮的打印版本（我确信有库可以做到这一点。穷人的版本是

JSON.stringify(obj, null, 2)

）。

但是，由于

console.log

接受任意数量的参数，因此您应该将对象作为第二个参数传递，这样它就不会转换为字符串：

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

Answer 4

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