Verbinden Sie Zeichenfolgen nur dann mit einem Trennzeichen, wenn die Zeichenfolgen nicht null oder leer sind

Dies scheint einfach zu sein. Es tut mir leid, wenn ich hier etwas vermisse, aber ich versuche einen einfachen Weg zu finden, um nur nicht null oder nicht leere Zeichenfolgen zu verketten.

Ich habe mehrere unterschiedliche Adressfelder:

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

Die Werte für diese werden basierend auf einigen Formularfeldern auf der Seite und einem anderen js-Code festgelegt.

Ich möchte die vollständige Adresse in einem divdurch Komma + Leerzeichen getrennten a ausgeben , also ungefähr so:

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

Das Problem ist, dass eines oder alle dieser Felder null / leer sein können.

Gibt es eine einfache Möglichkeit, alle nicht leeren Felder in dieser Gruppe von Feldern zu verbinden, ohne die Länge jedes einzelnen Felds einzeln zu überprüfen, bevor es zur Zeichenfolge hinzugefügt wird?

Erwägen

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

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

.filter(Boolean)(das ist das gleiche wie .filter(x => x)) entfernt alle "falschen" Werte (Nullen, Undefinierte, leere Zeichenfolgen usw.). Wenn Ihre Definition von "leer" anders ist, müssen Sie sie angeben, zum Beispiel:

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

behält nur nicht leere Zeichenfolgen in der Liste bei.

- -

(veraltete jquery Antwort)

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

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

Noch eine einzeilige Lösung, die nicht erfordert jQuery:

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

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

Lodash- Lösung:_.filter([address, city, state, zip]).join()

Gerade:

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

Die Lösung von @ aga ist großartig, funktioniert jedoch in älteren Browsern wie IE8 nicht, da Array.prototype.filter () in ihren JavaScript-Engines fehlt .

Für diejenigen, die an einer effizienten Lösung interessiert sind, die in einer Vielzahl von Browsern (einschließlich IE 5.5 - 8) funktioniert und für die keine jQuery erforderlich ist , siehe unten:

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

Es enthält einige Leistungsoptimierungen, die hier auf MDN beschrieben werden .

Und hier ist ein Anwendungsbeispiel:

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

Versuchen

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

Demo: Geige

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