Gabungkan string dengan pembatas hanya jika string tidak kosong atau kosong

Ini terasa seperti seharusnya sederhana, jadi maaf jika saya melewatkan sesuatu di sini, tetapi saya mencoba menemukan cara sederhana untuk menggabungkan hanya string non-null atau non-kosong.

Saya memiliki beberapa bidang alamat yang berbeda:

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

Nilai-nilai ini diatur berdasarkan beberapa bidang formulir di halaman dan beberapa kode js lainnya.

Saya ingin menampilkan alamat lengkap dalam a div, dibatasi oleh koma + spasi, jadi seperti ini:

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

Masalahnya adalah, salah satu atau semua kolom ini boleh kosong / kosong.

Apakah ada cara sederhana untuk menggabungkan semua bidang yang tidak kosong dalam grup bidang ini, tanpa melakukan pemeriksaan panjang masing-masing bidang sebelum menambahkannya ke string?

Mempertimbangkan

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

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

.filter(Boolean)(yang sama dengan .filter(x => x)) menghapus semua nilai "salah" (nulls, undefineds, string kosong dll). Jika definisi Anda tentang "kosong" berbeda, Anda harus memberikannya, misalnya:

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

hanya akan menyimpan string yang tidak kosong dalam daftar.

-

(jawaban jquery usang)

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

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

Solusi satu baris lainnya, yang tidak membutuhkan jQuery:

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

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

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

Hanya:

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

Solusi @ aga sangat bagus, tetapi tidak berfungsi di browser lama seperti IE8 karena kurangnya Array.prototype.filter () di mesin JavaScript mereka.

Bagi mereka yang tertarik dengan solusi efisien yang bekerja di berbagai browser (termasuk IE 5.5 - 8) dan yang tidak memerlukan jQuery , lihat di bawah:

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

Ini mencakup beberapa pengoptimalan kinerja yang dijelaskan di MDN di sini .

Dan berikut adalah contoh penggunaan:

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

Mencoba

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

Demo: Biola

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