Łącz ciągi za pomocą separatora tylko wtedy, gdy ciągi nie są puste ani puste

Wydaje się, że powinno to być proste, więc przepraszam, jeśli czegoś tutaj brakuje, ale próbuję znaleźć prosty sposób łączenia tylko niezerowych lub niepustych ciągów.

Mam kilka różnych pól adresowych:

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

Wartości tych są ustawiane na podstawie niektórych pól formularza na stronie i innego kodu js.

Chcę wypisać pełny adres w div, oddzielony przecinkiem + spacja, więc coś takiego:

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

Problem polega na tym, że jedno lub wszystkie z tych pól mogą być puste / puste.

Czy istnieje prosty sposób na połączenie wszystkich niepustych pól w tej grupie pól bez sprawdzania długości każdego z nich z osobna przed dodaniem go do ciągu?

Rozważać

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

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

.filter(Boolean)(czyli to samo co .filter(x => x)) usuwa wszystkie „fałszywe” wartości (wartości null, undefined, puste łańcuchy itp.). Jeśli Twoja definicja „pustego” jest inna, musisz ją podać, na przykład:

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

zachowa na liście tylko niepuste ciągi.

-

(przestarzała odpowiedź w jquery)

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

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

Kolejne jednoliniowe rozwiązanie, które nie wymaga jQuery:

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

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

Rozwiązanie Lodash :_.filter([address, city, state, zip]).join()

Właśnie:

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

Rozwiązanie @ aga jest świetne, ale nie działa w starszych przeglądarkach, takich jak IE8 z powodu braku Array.prototype.filter () w ich silnikach JavaScript.

Dla zainteresowanych wydajnym rozwiązaniem działającym w szerokiej gamie przeglądarek (w tym IE 5.5 - 8), które nie wymaga jQuery , zobacz poniżej:

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

Zawiera kilka optymalizacji wydajności opisanych w MDN tutaj .

A oto przykład użycia:

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

Próbować

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

Demo: Fiddle

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