只有当字符串不是空或空的时候，才使用分隔符连接字符串?

This feels like it should be simple, so sorry if I'm missing something here, but I'm trying to find a simple way to concatenate only non-null or non-empty strings.

这看起来应该很简单，如果我漏掉了什么，很抱歉，但是我正在寻找一种简单的方法来连接非空字符串或非空字符串。

I have several distinct address fields:

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

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

The values for these get set based on some form fields in the page and some other js code.

这些值是基于页面中的一些表单字段和其他js代码来设置的。

I want to output the full address in a div, delimited by comma + space, so something like this:

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

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

Problem is, one or all of these fields could be null/empty. Is there any simple way to join all of the non-empty fields in this group of fields, without doing a check of the length of each individually before adding it to the string...?

问题是，其中一个或所有这些字段都可以为空。是否有一种简单的方法来连接这组字段中的所有非空字段，而不需要分别检查每个字段的长度，然后将其添加到字符串中……?

7 个解决方案

#1

Consider

考虑

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

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

$.grep(stuff, Boolean) discards nulls, undefineds, empty strings and integer 0's.

美元。grep(东西，布尔)丢弃null, undefineds，空字符串和integer 0。

In vanilla JS,

在香草JS,

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

#2

Yet another one-line solution, which doesn't require jQuery:

另一个不需要jQuery的单行解决方案:

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

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

#3

Lodash solution: _.filter([address, city, state, zip]).join()

Lodash解决方案:_。过滤器([地址、城市、州、邮政]). join()

#4

@aga's solution is great, but it doesn't work in older browsers like IE8 due to the lack of Array.prototype.filter() in their JavaScript engines.

@aga的解决方案很棒，但由于JavaScript引擎中缺少Array.prototype.filter()，所以在旧的浏览器(如IE8)中无法使用。

For those who are interested in an efficient solution working in a wide range of browsers (including IE 5.5 - 8) and which doesn't require jQuery, see below:

对于那些对高效的解决方案感兴趣的人(包括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);
};

It includes some performance optimizations described on MDN here.

它包含了MDN上描述的一些性能优化。

And here is a usage example:

这里有一个使用例子:

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

#5

Try

试一试

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

Demo: Fiddle

演示:小提琴

#6

$.each([address,city,state,zip], 
    function(i,v) { 
        if(v){
             var s = (i>0 ? ", ":"") + v;
             $("#addressDiv").append(s);
        } 
    }
);`

#7

Just:

只是:

[address, city, state, zip].filter(Boolean).join(', ');

#1