How to use JavaScript to convert an object to a readable string format?

General Discussions
, ,
1

I’m trying to convert a JavaScript object into a string. For example:

var o = {a:1, b:2};
console.log(o); 
console.log('Item: ' + o);

The first log gives a nice readable output, but the second just shows [object Object]. What’s the right way to handle a JavaScript convert object to string scenario like this?

2

From my experience, the easiest and most widely used approach to javascript convert object to string is using JSON.stringify(). It’s both simple and readable:

var o = { a: 1, b: 2 };
console.log('Item: ' + JSON.stringify(o));  // Output: Item: {"a":1,"b":2}

This method gives you a clean, human-readable string representation of your object, which is perfect for logging or debugging. If you need to make the output easier to read with some indentation, you can also pretty-print the string:

console.log(JSON.stringify(o, null, 2));  // Pretty-printed format

This can make things more readable when you’re working with larger objects.

3

I totally agree with Emma, but sometimes you may need more control over how the object is represented. In those cases, javascript convert object to string with a custom function can be a great solution. Here’s one way you can format it however you want:

function objectToString(obj) {
    return Object.entries(obj)
        .map(([key, value]) => `${key}: ${value}`)
        .join(', ');
}

var o = { a: 1, b: 2 };
console.log('Item: ' + objectToString(o));  // Output: Item: a: 1, b: 2

This approach is super useful when you’re dealing with custom labels or log entries that need a specific format. It’s more flexible than JSON.stringify() and allows you to define your own style for the string.

4

I love both previous suggestions! However, if you’re trying to send the data over a network or work with URLs, you might want to javascript convert object to string into a query-string format. Here’s a neat trick for that:

function toQueryString(obj) {
    return Object.keys(obj)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
        .join('&');
}

var o = { a: 1, b: 2 };
console.log('Query format: ' + toQueryString(o));  // Output: Query format: a=1&b=2

This method is particularly helpful when you need to work with query strings for HTTP requests, form submissions, or even debugging. It provides a compact string format that is easy to pass around in URLs or APIs.