仅当字符串不为null或为空时,才使用分隔符连接字符串


117

感觉应该很简单,很抱歉,如果我在这里遗漏了一些东西,但是我试图找到一种简单的方法来连接非空或非空字符串。

我有几个不同的地址字段:

var address;
var city;
var state;
var zip;

这些值是根据页面中的某些表单字段和其他js代码设置的。

我想在一个完整的地址中输出div,以逗号+空格分隔,如下所示:

$("#addressDiv").append(address + ", " + city + ", " + state + ", " + zip);

问题是,这些字段之一或全部可能为空/空。

有没有简单的方法可以将这组字段中的所有非空字段联接在一起,而无需在将其添加到字符串之前检查每个字段的长度?


为什么不让一个对象中的所有这些字段然后循环,比较,丢弃?
elclanrs

Answers:


217

考虑

var address = "foo";
var city;
var state = "bar";
var zip;

text = [address, city, state, zip].filter(Boolean).join(", ");
console.log(text)

.filter(Boolean)(与相同.filter(x => x))删除所有“虚假”值(null,未定义,空字符串等)。如果您对“空”的定义不同,则必须提供它,例如:

 [...].filter(x => typeof x === 'string' && x.length > 0)

只会在列表中保留非空字符串。

-

(过时的jQuery答案)

var address = "foo";
var city;
var state = "bar";
var zip;

text = $.grep([address, city, state, zip], Boolean).join(", "); // foo, bar

117

另一个单线解决方案,它不需要jQuery

var address = "foo";
var city;
var state = "bar";
var zip;

text = [address, city, state, zip].filter(function (val) {return val;}).join(', ');

40
这可能是最好的答案。使用本机函数。如果您使用的是es6 / es2015,可以将其缩短为 [address, city, state, zip].filter(val => val).join(', ')
Sir.Nathan Stassen



5

@aga的解决方案很棒,但是由于JavaScript引擎中缺少Array.prototype.filter(),因此它在IE8等较旧的浏览器中不起作用。

对于那些对适用于各种浏览器(包括IE 5.5-8)的高效解决方案感兴趣并且不需要jQuery的用户,请参见以下内容:

var join = function (separator /*, strings */) {
    // Do not use:
    //      var args = Array.prototype.slice.call(arguments, 1);
    // since it prevents optimizations in JavaScript engines (V8 for example).
    // (See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments)
    // So we construct a new array by iterating through the arguments object
    var argsLength = arguments.length,
        strings = [];

    // Iterate through the arguments object skipping separator arg
    for (var i = 1, j = 0; i < argsLength; ++i) {
        var arg = arguments[i];

        // Filter undefineds, nulls, empty strings, 0s
        if (arg) {
            strings[j++] = arg;
        }
    }

    return strings.join(separator);
};

它包括此处在MDN上描述的一些性能优化。

这是一个用法示例:

var fullAddress = join(', ', address, city, state, zip);

1

尝试

function joinIfPresent(){
    return $.map(arguments, function(val){
        return val && val.length > 0 ? val : undefined;
    }).join(', ')
}
$("#addressDiv").append(joinIfPresent(address, city, state, zip));

演示:小提琴


0
$.each([address,city,state,zip], 
    function(i,v) { 
        if(v){
             var s = (i>0 ? ", ":"") + v;
             $("#addressDiv").append(s);
        } 
    }
);`
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.