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

Question

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

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

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

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

我想输出一个div由逗号+空格分隔的完整地址,所以像这样:

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

问题是,这些字段中的一个或全部可能为空/空.

是否有任何简单的方法可以连接这组字段中的所有非空字段,而无需在将其添加到字符串之前单独检查每个字段的长度？

Answer 1

考虑

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)与之相同)丢弃空值,未定义,空字符串和零.如果你定义的"空"是不同的,那么你将不得不对它进行硬编码,例如:

 [...].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

Answer 2

另一种单线解决方案,不需要jQuery:

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

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

Answer 3

Lodash解决方案:_.filter([address, city, state, zip]).join()

Answer 4

只是:

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

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