Dizeleri bir sınırlayıcıyla birleştirin, yalnızca dizeler boş veya değer atanmamışsa

Bu, basit olması gerektiği gibi geliyor, burada bir şey kaçırırsam özür dilerim, ancak yalnızca boş olmayan veya boş olmayan dizeleri birleştirmenin basit bir yolunu bulmaya çalışıyorum.

Birkaç farklı adres alanım var:

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

Bunların değerleri, sayfadaki bazı form alanlarına ve diğer bazı js koduna göre belirlenir.

Tam adresi divvirgül + boşlukla ayrılmış olarak vermek istiyorum, bu nedenle şöyle bir şey:

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

Sorun şu ki, bu alanlardan biri veya tümü boş olabilir.

Bu alan grubundaki boş olmayan alanların tümünü dizeye eklemeden önce her birinin uzunluğunu tek tek kontrol etmeden birleştirmenin basit bir yolu var mı?

Düşünmek

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

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

.filter(Boolean)(ile aynıdır .filter(x => x)) tüm "yanlış" değerleri (boş, tanımsızlar, boş dizeler vb.) kaldırır. "Boş" tanımınız farklıysa, bunu sağlamanız gerekir, örneğin:

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

listede yalnızca boş olmayan dizeleri tutacaktır.

-

(eski jquery yanıtı)

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

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

Yine, gerektirmeyen başka bir tek satırlık çözüm jQuery:

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

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

Lodash çözümü:_.filter([address, city, state, zip]).join()

Sadece:

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

@ aga'nın çözümü harika, ancak JavaScript motorlarındaki Array.prototype.filter () eksikliğinden dolayı IE8 gibi eski tarayıcılarda çalışmıyor .

Çok çeşitli tarayıcılarda (IE 5.5 - 8 dahil) çalışan ve jQuery gerektirmeyen verimli bir çözümle ilgilenenler için aşağıya bakın:

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

Bu MDN'yi açıklanan bazı performans iyileştirmeleri içerir burada .

Ve işte bir kullanım örneği:

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

Deneyin

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

Demo: Keman

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