Question Joindre des chaînes avec un délimiteur uniquement si les chaînes ne sont pas nulles ou vides?


C'est comme si cela devait être simple, alors désolé si je manque quelque chose ici, mais j'essaie de trouver un moyen simple de concaténer uniquement des chaînes non nulles ou non vides.

J'ai plusieurs champs d'adresse distincts:

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

Les valeurs de ceux-ci sont définies en fonction de certains champs de formulaire de la page et d'autres codes js.

Je veux sortir l'adresse complète dans un div, délimité par une virgule + un espace, donc quelque chose comme ceci:

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

Le problème est qu'un ou tous ces champs peuvent être nuls / vides. Existe-t-il un moyen simple de joindre tous les champs non vides de ce groupe de champs, sans faire une vérification de la longueur de chacun d'eux avant de l'ajouter à la chaîne ...?


55
2017-11-11 09:27


origine


Réponses:


Considérer

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

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

$.grep(stuff, Boolean) supprime les valeurs nulles, indéfinies, les chaînes vides et les nombres entiers 0's.

Dans la vanille JS,

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


80
2017-11-11 09:38



Encore une autre solution en une ligne, qui ne nécessite pas jQuery:

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

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

102
2017-11-11 10:02



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


11
2018-01-16 20:32



La solution @ aga est génial, mais il ne fonctionne pas dans les anciens navigateurs comme IE8 en raison du manque de Array.prototype.filter () dans leurs moteurs JavaScript.

Pour ceux qui sont intéressés par une solution efficace fonctionnant dans un large éventail de navigateurs (y compris IE 5.5 - 8) et ne nécessitant pas jQuery, voir ci-dessous:

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

Il inclut des optimisations de performances décrites sur MDN ici.

Et voici un exemple d'utilisation:

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

4
2018-05-19 19:30



Juste:

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

2
2018-03-21 15:29



Essayer

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

Démo: Violon


1
2017-11-11 09:32



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

0
2017-11-11 09:39