[javascript] 문자열이 널이 아니거나 비어 있지 않은 경우에만 구분 기호로 문자열 결합

이것은 간단해야 할 것 같아서 여기에 뭔가 빠졌다면 미안하지만 null이 아니거나 비어 있지 않은 문자열 만 연결하는 간단한 방법을 찾으려고합니다.

몇 가지 고유 한 주소 필드가 있습니다.

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

이러한 값은 페이지의 일부 양식 필드와 다른 js 코드를 기반으로 설정됩니다.

div쉼표 + 공백으로 구분 된 전체 주소를 다음과 같이 출력하고 싶습니다.

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

문제는 이러한 필드 중 하나 또는 모두가 null / 비어있을 수 있다는 것입니다.

문자열에 추가하기 전에 개별적으로 길이를 확인하지 않고이 필드 그룹의 비어 있지 않은 모든 필드를 조인하는 간단한 방법이 있습니까?

답변

치다

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)) 모든 “거짓”값 (null, 정의되지 않음, 빈 문자열 등)을 제거합니다. “비어 있음”에 대한 정의가 다른 경우이를 제공해야합니다. 예를 들면 다음과 같습니다.

 [...].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의 솔루션 은 훌륭하지만 JavaScript 엔진 에 Array.prototype.filter () 가 없기 때문에 IE8과 같은 구형 브라우저에서는 작동하지 않습니다 .

광범위한 브라우저 (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);
        }
    }
);`