Join strings with a delimiter only if strings are not null or empty

Question

This feels like it should be simple, so sorry if I'm missing something here, but I'm trying to find a simple way to concatenate only non-null or non-empty strings.

I have several distinct address fields:

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

The values for these get set based on some form fields in the page and some other js code.

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

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

Problem is, one or all of these fields could be null/empty.

Is there any simple way to join all of the non-empty fields in this group of fields, without doing a check of the length of each individually before adding it to the string?

Why not have all those fields in an object then loop, compare, discard? — elclanrs
– elclanrs, Commented Nov 11, 2013 at 9:28

6 revs, 3 users 88% · Accepted Answer · 2024-01-30 22:26:20Z

483

If your definition of "empty" means falsy values (e.g., nulls, undefineds, empty strings, 0, etc), consider:

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

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

.filter(Boolean) is the same as .filter(x => Boolean(x)).

If your definition of "empty" is different, then you'll have to provide it, for example:

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

will only keep non-empty strings in the list.

(obsolete jquery answer)

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

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

edited Jan 30, 2024 at 22:26

community wiki

6 revs, 3 users 88%
georg

Sign up to request clarification or add additional context in comments.

1 Comment

Fakeer Over a year ago

Insane! Clearly there is no end to finding new ish about JS

Lee Taylor · Accepted Answer · 2023-05-12 22:36:17Z

133

Yet another one-line solution, which 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(', ');

console.log(text);

edited May 12, 2023 at 22:36

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Nov 11, 2013 at 10:02

aga

29.6k13 gold badges91 silver badges127 bronze badges

1 Comment

Sir.Nathan Stassen Over a year ago

This is probably the best answer. Uses native functions. If you're using es6/es2015 it can be shortened to just [address, city, state, zip].filter(val => val).join(', ')

Tim Santeford · Accepted Answer · 2017-01-18 00:30:37Z

16

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

edited Jan 18, 2017 at 0:30

answered Jan 16, 2017 at 20:32

Tim Santeford

28.3k17 gold badges77 silver badges101 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:54:50Z

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

For those who are interested in an efficient solution working in a wide range of browsers (including IE 5.5 - 8) and which doesn't require jQuery, see 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 on MDN here.

And here is a usage example:

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

Arun P Johny · Accepted Answer · 2013-11-11 09:32:32Z

3

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

answered Nov 11, 2013 at 9:32

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

nicb · Accepted Answer · 2013-11-11 09:39:36Z

0

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

answered Nov 11, 2013 at 9:39

nicb

3214 silver badges10 bronze badges

Comments

Philzen · Accepted Answer · 2022-07-08 01:20:06Z

Here's a simple, IE6 (and potentially earlier) backwards-compatible solution without filter.

TL;DR → look at the 3rd-last block of code

toString() has a habit of turning arrays into CSV and ignore everything that is not a string, so why not take advantage of that?

["foo", null, "bar", undefined, "baz"].toString()

→ foo,,bar,,baz

This is a really handy solution for straightforward CSV data export use cases, as column count is kept intact.

join() has the same habit but let's you choose the joining delimiter:

['We built', null, 'this city', undefined, 'on you-know-what'].join(' 🤘🏼 ')

→ We built 🤘🏼 🤘🏼 this city 🤘🏼 🤘🏼 on you-know-what

As the OP asking for a nice space after the comma and probably don't like the extra commas, they're in for a replace-RegEx treat at the end:

["foo", null, "bar", undefined, "baz"].join(', ').replace(/(, ){2,}/g, ', ')

→ foo, bar, baz

Caveat: (, ){2,} is a rather simple RegEx matching all 2+ occurrences of commas followed by a space – it therefore has the potentially unwanted side-effect of filtering any occurrences of , , or , at the start or end of your data.

Of that is no concern, you're done here with a neat and simple, backwards-compatible one-liner.

If that is a concern, we need come up with a delimiter that is so far-out that the probability of it appearing twice in your data items (or once at the beginning or the end) approaches zero. What do you think about, for instance, crazy-ſđ½ł⅞⅝⅜¤Ħ&Ł-delimiter?

You could also use literally any character, probably even ones that don't exist in your local charset, as it is just a stop-signifier for our algorithm, so you could do:

["foo", null, "bar", undefined, "baz"]
  .join('emoji-✊🏻🙈🕺🤷🏼🧘🏽🎸🏆🚀-delimiter')
  .replace(/(emoji-✊🏻🙈🕺🤷🏼🧘🏽🎸🏆🚀-delimiter){2,}/g, ', ')

or (in a more DRY version of this:

var delimiter = 'emoji-✊🏻🙈🕺🤷🏼🧘🏽🎸🏆🚀-delimiter'
var regEx = new RegExp('(' + delimiter + '){2,}', 'g')

["foo", null, "bar", undefined, "baz"].join(delimiter).replace(regex, ', ')

Collectives™ on Stack Overflow

Join strings with a delimiter only if strings are not null or empty

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

TL;DR → look at the 3rd-last block of code

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

TL;DR → look at the 3rd-last block of code

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related