Javascript - Template Strings Don't Pretty Print Objects

Question

Can I use ES6 template strings to pretty print javascript objects? This is from a React Native project, with console.log() outputting to Chrome debugging tools.

What I Want

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

outputs

Template String Attempt

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

outputs

Question

How do I get the first output (with the pretty printing) using template strings?

Solution 1

Your first example does not actually output a string to the console. Notice how properties is passed as a separate parameter argument (as it is surrounded by commas , and not string-concatenation operators +).

When you pass an object (or any JavaScript value) to console as a discrete argument it can display it how it wishes - including as an interactive formatted display, which it does in your first example.

In your second example, you're using templated-strings, but it's (generally) equivalent to this:

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

And Object.prototype.toString() returns "[object Object]" by default. Note that this is a string value which is not particularly useful.

In order to get a JSON (literally JavaScript Object Notation) representation of an object used in a templated string use JSON.stringify:

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

Or consider extending toString for your own types:

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

Solution 2

Can I use ES6 template strings to pretty print javascript objects?

Sure, but you have to convert the object to a pretty printed version before you pass it to the template literal (I'm sure there are libraries out there that do that. The poor man's version is JSON.stringify(obj, null, 2)).

However, since console.log accepts an arbitrary number of arguments, you should just pass the object as second argument so that it doesn't get converted to a string:

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

Solution 3

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

Comments

[adeneo]

What do you mean? You can't get expandable objects in the console, when you're logging a regular string. The solution is glaringly obvious, don't log strings if you want to display it like objects.