JavaScript中将对象作为空格分隔字符串连接的最简单方法是什么？

Question

大家好：

我想从一个JS对象中构建一个字符串（就像构建toString方法一样，但是像重载运算符），例如：

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

< p > fmtinfo将是一个格式为字符串的字符串：

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

我想知道有没有人能给我一个简单的方法来做到这一点？

谢谢

- Kuan

---

所以你想定义 info.join？ - Ry-

@minitech 任何方法都可以，只要使用起来简单。 - Kuan

Answer 1

为避免显式迭代，您可以使用 Object.keys 和 map 将每个键转换为相应的条目，然后简单地将它们拼接在一起：join。

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

为了解释这个工作原理：

调用 Object.keys() 返回一个对象的可枚举键的数组，有效地结合了 for (f in o) 和 o.hasOwnProperty() 检查。 Object.keys 相对来说支持得很好，除了 IE9 以外的所有浏览器（尽管 polyfills 不复杂）。

这些键的数组通过 Array.prototype.map() 进行转换，使用所需的字符串格式化。这很简单，但请注意，obj[k] 将调用它的 .toString() 方法（如果有的话）将其转换为字符串。这允许优秀地处理自定义对象，因为您可以简单地在每个对象上定义一个 toString 方法，VM 就会捕捉到它。同样，IE9 及更高版本都支持此功能，但 polyfills 很容易实现。

最后，我们使用Array.prototype.join()将结果字符串连接起来，这个方法会确保我们不会在末尾添加分隔符或其他内容。所有浏览器都支持此方法。

好奇的话，ES6 的等效方法如下：

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

- ssube

---

感谢您的封装！这是最好的（ES5）方式。 - Ry-

Answer 2

你可以使用 for..in 语句和辅助数组来实现此目的：

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

- antyrat

Answer 3

您可以遍历对象的键来获取键名和相应的值。虽然不是非常优雅，但由于您所需字符串的格式不常见，因此需要一些工作。

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)

这是解决方案的jsfiddle链接：http://jsfiddle.net/pstricker/ec1oohsk/

- pstricker

Answer 4

经过一段时间的努力，我可能已经通过两个现有的Stackoverflow答案实现了预期的功能，这两个答案分别涉及对象迭代和检查JavaScript变量是否为函数类型。希望这可以帮到您 :-)

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('%'));

- jyrkim

---

这可能更干净，作为一个function join(object, delimiter) { ... }，没有typeof。 - Ry-

Answer 5

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

然后你可以这样做：

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

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

- Chris Charles