Javascript – Template Strings Don’t Pretty Print Objects

by

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

More Related Contents:

  1. Is there a downside to using ES6 template literals syntax without a templated expression?
  2. Are ES6 template literals faster than string concatenation?
  3. How to update nested state properties in React
  4. How do I replace a character at a particular index in JavaScript?
  5. How to count string occurrence in string?
  6. How to find if an array contains a specific string in JavaScript/jQuery?
  7. Check for special characters in string
  8. Contains case insensitive
  9. How to build query string with Javascript
  10. What is the difference between “let” and “var”?
  11. Recursively print all permutations of a string (Javascript)
  12. ES6 module Import giving “Uncaught SyntaxError: Unexpected identifier”
  13. detect differences between two strings with Javascript
  14. Override a setter, and the getter must also be overridden
  15. Nested ES6 classes?
  16. Why can I not use `new` with an arrow function in JavaScript/ES6?
  17. React.js ES6 avoid binding ‘this’ to every method
  18. Cutting a string at nth occurrence of a character
  19. ES6 Tail Recursion Optimisation Stack Overflow
  20. Find all values by specific key in a deep nested object
  21. Typescript: can not access member value in inherited class constructor
  22. How can I get a character array from a string?
  23. First item from a Map on JavaScript ES2015
  24. Remove empty & null values from nested object (ES6) – Clean nested Objects
  25. `string.replace` doesn’t change the variable [duplicate]
  26. How to use ES6 Fat Arrow to .filter() an array of objects
  27. Split a string straight into variables
  28. What is the most efficient way to copy some properties from an object in JavaScript?
  29. Print / display a JavaScript variable’s name instead of it’s value
  30. How to count the number of lines of a string in javascript

Leave a Comment