Chỉ nối các chuỗi bằng dấu phân cách nếu các chuỗi không rỗng hoặc rỗng

Điều này có vẻ như nó phải đơn giản, rất tiếc nếu tôi thiếu thứ gì đó ở đây, nhưng tôi đang cố gắng tìm một cách đơn giản để chỉ nối các chuỗi không null hoặc không rỗng.

Tôi có một số trường địa chỉ riêng biệt:

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

Các giá trị cho những thứ này được đặt dựa trên một số trường biểu mẫu trong trang và một số mã js khác.

Tôi muốn xuất địa chỉ đầy đủ bằng a div, được phân tách bằng dấu phẩy + dấu cách, vì vậy, giống như sau:

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

Vấn đề là, một hoặc tất cả các trường này có thể là null / rỗng.

Có cách nào đơn giản để nối tất cả các trường không trống trong nhóm trường này mà không cần kiểm tra độ dài của từng trường riêng lẻ trước khi thêm nó vào chuỗi không?

Xem xét

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

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

.filter(Boolean)(giống với .filter(x => x)) loại bỏ tất cả các giá trị "giả" (null, không xác định, chuỗi rỗng, v.v.). Nếu định nghĩa của bạn về "trống" khác, thì bạn sẽ phải cung cấp định nghĩa đó, ví dụ:

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

sẽ chỉ giữ các chuỗi không trống trong danh sách.

-

(câu trả lời jquery lỗi thời)

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

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

Tuy nhiên, một giải pháp một dòng khác, không yêu cầu jQuery:

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

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

Giải pháp nối mi :_.filter([address, city, state, zip]).join()

Chỉ:

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

Giải pháp của @ aga rất tuyệt, nhưng nó không hoạt động trong các trình duyệt cũ hơn như IE8 do thiếu Array.prototype.filter () trong các công cụ JavaScript của họ.

Đối với những người quan tâm đến một giải pháp hiệu quả hoạt động trên nhiều trình duyệt (bao gồm IE 5.5 - 8) và không yêu cầu jQuery , hãy xem bên dưới:

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

Nó bao gồm một số tối ưu hóa hiệu suất được mô tả trên MDN tại đây .

Và đây là một ví dụ sử dụng:

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

Thử

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