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?

Dai · Accepted Answer · 2024-01-20 14:22:56Z

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

As a further improvement in modern browsers, you can render an interactive JSON object in your console output then you can use the %o string substitution specifier in your format-string, like so:

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

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

...which appears like this in Chrome's console:

...it's interactive, see:

neeraj-dixit27 · Accepted Answer · 2018-08-12 06:05:53Z

4

you can try out this your message ${JSON.stringify(object)}

answered Aug 12, 2018 at 6:05

neeraj-dixit27

2,8922 gold badges19 silver badges6 bronze badges

Comments

Felix Kling · Accepted Answer · 2017-09-11 01:18:32Z

3

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

answered Sep 11, 2017 at 1:18

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

chiliNUT · Accepted Answer · 2017-09-11 00:51:28Z

2

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

answered Sep 11, 2017 at 0:51

chiliNUT

19.5k14 gold badges72 silver badges116 bronze badges

Collectives™ on Stack Overflow

Javascript - Template Strings Don't Pretty Print Objects

What I Want

Template String Attempt

Question

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I Want

Template String Attempt

Question

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related