Unisci le stringhe con un delimitatore solo se le stringhe non sono nulle o vuote

Sembra che dovrebbe essere semplice, quindi scusa se mi manca qualcosa qui, ma sto cercando di trovare un modo semplice per concatenare solo stringhe non nulle o non vuote.

Ho diversi campi indirizzo distinti:

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

I valori per questi vengono impostati in base ad alcuni campi del modulo nella pagina e ad altri codici js.

Voglio mostrare l'indirizzo completo in un div, delimitato da virgola + spazio, quindi qualcosa del genere:

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

Il problema è che uno o tutti questi campi potrebbero essere nulli / vuoti.

Esiste un modo semplice per unire tutti i campi non vuoti in questo gruppo di campi, senza controllare la lunghezza di ciascuno individualmente prima di aggiungerlo alla stringa?

Tener conto di

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

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

.filter(Boolean)(che è lo stesso di .filter(x => x)) rimuove tutti i valori "falsi" (null, undefined, stringhe vuote ecc.). Se la tua definizione di "vuoto" è diversa, dovrai fornirla, ad esempio:

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

manterrà solo le stringhe non vuote nell'elenco.

-

(risposta jquery obsoleta)

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

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

Ancora un'altra soluzione a una riga, che non richiede jQuery:

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

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

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

Appena:

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

La soluzione di @ aga è ottima, ma non funziona nei browser meno recenti come IE8 a causa della mancanza di Array.prototype.filter () nei loro motori JavaScript.

Per coloro che sono interessati a una soluzione efficiente che funzioni in una vasta gamma di browser (incluso IE 5.5 - 8) e che non richiede jQuery , vedere di seguito:

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

Include alcune ottimizzazioni delle prestazioni descritte su MDN qui .

Ed ecco un esempio di utilizzo:

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

Provare

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

Demo: violino

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