รวมสตริงด้วยตัวคั่นเฉพาะในกรณีที่สตริงไม่เป็นโมฆะหรือว่างเปล่า

สิ่งนี้รู้สึกว่ามันควรจะเรียบง่ายดังนั้นขออภัยหากฉันขาดบางสิ่งที่นี่ แต่ฉันกำลังพยายามหาวิธีง่ายๆในการเชื่อมต่อเฉพาะสตริงที่ไม่เป็นโมฆะหรือไม่ว่างเปล่า

ฉันมีช่องที่อยู่ที่แตกต่างกันหลายช่อง:

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

ค่าสำหรับสิ่งเหล่านี้ได้รับการตั้งค่าตามฟิลด์ฟอร์มบางฟิลด์ในเพจและโค้ด js อื่น ๆ

ฉันต้องการส่งออกที่อยู่แบบเต็มใน a divคั่นด้วยเครื่องหมายจุลภาค + ช่องว่างดังนั้นสิ่งนี้:

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

ปัญหาคือฟิลด์หนึ่งหรือทั้งหมดอาจเป็นโมฆะ / ว่างเปล่า

มีวิธีง่ายๆในการรวมฟิลด์ที่ไม่ว่างทั้งหมดในกลุ่มฟิลด์นี้โดยไม่ต้องตรวจสอบความยาวของแต่ละฟิลด์ก่อนที่จะเพิ่มลงในสตริงหรือไม่?

พิจารณา

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

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

.filter(Boolean)(ซึ่งเหมือนกับ.filter(x => x)) ลบค่า "เท็จ" ทั้งหมด (nulls, undefineds, สตริงว่าง ฯลฯ ) หากคำจำกัดความของคำว่า "ว่าง" แตกต่างกันคุณจะต้องระบุตัวอย่างเช่น:

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

จะเก็บเฉพาะสตริงที่ไม่ว่างเปล่าในรายการ

-

(คำตอบ jquery ล้าสมัย)

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

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

อีกหนึ่งวิธีแก้ปัญหาแบบบรรทัดเดียวซึ่งไม่ต้องการjQuery:

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

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

โซลูชันLodash :_.filter([address, city, state, zip]).join()

แค่:

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

โซลูชันของ @ agaนั้นยอดเยี่ยม แต่ใช้ไม่ได้กับเบราว์เซอร์รุ่นเก่าเช่น IE8 เนื่องจากไม่มีArray.prototype.filter ()ในเอ็นจิ้น JavaScript

สำหรับผู้ที่สนใจโซลูชันที่มีประสิทธิภาพซึ่งทำงานในเบราว์เซอร์ที่หลากหลาย (รวมถึง IE 5.5 - 8) และไม่ต้องใช้ jQueryโปรดดูด้านล่าง:

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

ซึ่งจะรวมถึงการเพิ่มประสิทธิภาพการปฏิบัติงานบางอย่างที่อธิบายใน MDN ที่นี่

และนี่คือตัวอย่างการใช้งาน:

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

ลอง

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

การสาธิต: Fiddle

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