What is the simplest way to Join a object as a space separated string in Javascript

Question

All:

I want to build a string from a JS object( like build a toString method but like operator overload), for example:

var info = {name:"username",age:20};
var fmtinfo = info.join("||");

the fmtinfo will be a string with format:

"name(username)||age(20)"

I wonder if anyone can give me a simple way to do that?

Thanks

@minitech Any method is welcomed, as lone as it is simple to use. — Kuan, Feb 18 '15 at 17:01

ssube · Accepted Answer · 2015-02-19T15:18:19.930

To avoid any explicit iteration, you can use Object.keys with map to transform each key into the corresponding entry, then simply join them together:

function fancyString(obj) {
    return Object.keys(obj).map(function (k) { 
        return "" + k + "(" + obj[k] + ")"; 
    }).join("||");
}

var foo = {name: "username", age: 20};
console.log(fancyString(foo));

To offer some explanation of how this work:

The call to Object.keys() returns an array of the object's own enumerable keys, effectively combining the for (f in o) and o.hasOwnProperty() checks. Object.keys is relatively well-supported, by everything except IE9 (although polyfills are not complicated).

That array of keys are transformed via Array.prototype.map(), using the desired string formatting. This is pretty simple, but do not that obj[k] will call its .toString() method (if available) to transform it into a string. This allows excellent handling of custom objects, as you can simply define a toString method on each and it will be picked up by the VM. Again, this is supported by IE9 and better, but polyfills are trivial.

Finally, we join the resulting strings with Array.prototype.join(), which takes care of making sure we don't append the separator to the end or anything like that. All browsers support this.

For curiosity, the ES6 equivalent would be:

let fancyString = o => Object.keys(o).map(k => "" + k + "(" + o[k] + ")").join("||");

Thanks for wrapping! This is the nicest (ES5) way. – Ry- Feb 18 '15 at 18:38 — Ry-, Feb 18 '15 at 18:38

score 3 · Answer 2 · answered Feb 18 '15 at 16:54

You can use for..in statement and helper array:

var info = {name:"username",age:20};
var helperArray = [];
for( var key in info ) {
    if( info.hasOwnProperty( key ) ) {
        helperArray.push( key + '(' + info[key] + ')' );
    }
}
alert(helperArray.join('||'));

score 2 · Answer 3 · answered Feb 18 '15 at 17:10

You could iterate over the object's keys to get both the key names and their corresponding values. Not incredibly elegant but since the desired format of your string is uncommon, it requires a little work.

var info = {name:"username",age:20};
var keys = Object.keys(info);
var returnVal = ""

for(var i = 0; i < keys.length; i++) {
    if(returnVal.length > 0)
        returnVal += "||";

    returnVal += keys[i] + "(" + info[keys[i]] + ")";
}

alert(returnVal)

Here is a jsfiddle of the solution: http://jsfiddle.net/pstricker/ec1oohsk/

score 1 · Answer 4 · edited May 23 '17 at 11:51

It took a while, but I might have got it working as intended with help of two existing Stackoverflow answers related to: Object iteration and checking if JavaScript variable is function type. I hope this helps :-)

Object.prototype.join = function join(param) {

    var helperArray = []

    for (var key in this) {
        //check that function is not printed -> join: function
        if (typeof (this[key]) != "function") 
            helperArray.push(key + "(" + this[key] + ")")
    }
    return helperArray.join(param);
}

var info = {
    name: "username",
    age: 20
};

console.log(info.join('||'));

console.log(info.join('<>'));

console.log(info.join('%'));

This might be cleaner as a `function join(object, delimiter) { … }` with no `typeof`. — Ry-, Feb 18 '15 at 18:36

score 0 · Answer 5 · answered Feb 18 '15 at 16:59

Object.prototype.fancyString = function(){ 
    var a = []
    for(var prop in this) {
        if(this.hasOwnProperty(prop)) {
            a.push(prop + '(' + this[prop] + ')' );
        }
    }
    return a.join('||');
}

Then you can just do:

var info = {name:"username",age:20};

info.fancyString();
// outputs: "name(username)||age(20)"

What is the simplest way to Join a object as a space separated string in Javascript

5 Answers5