Attach delimited lines only if the lines are not null or empty

Question

It seems like it should be simple, so sorry if I missed something here, but I'm trying to find an easy way to concatenate only non-zero or non-empty strings.

I have several different address fields:

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

Values ​​for them are set based on some form fields on the page and some other js codes.

I want to output the full address in a div , separated by a comma + space, so something like this:

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

The problem is that one or all of these fields can be empty / empty.

Is there an easy way to combine all non-empty fields in this field group without checking the length of each separately before adding it to the string?

Answer 1

To consider

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

stuff.filter(Boolean) (same as .filter(x => x) ) discards zeros, undefined, empty strings, and zeros. If you define "empty", then you will have to set it hard, for example:

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

-

(deprecated jquery answer)

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

Answer 2

Another one-line solution that doesn't require jQuery :

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

Answer 3

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

Answer 4

Simply:

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

Answer 5

@aga's solution is great, but it doesn’t work in older browsers like IE8 due to the lack of Array.prototype.filter () in its JavaScript engines.

For those who are interested in , an effective solution that works in a wide range of browsers (including IE 5.5 - 8) and does not require jQuery is given below:

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

It includes some performance optimizations described in MDN here .

And here is a usage example:

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

Answer 6

Try

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

Demo: Fiddle

Answer 7

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