Javascript – Template Strings Don’t Pretty Print Objects

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?

Answer

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