JavaScript中的if-else条件更加动态

Question

I have a JavaScript code which has many if-else conditions for different brands wrt html

function get_brand_label(b) {
    var brand1label = '<div class="brand1_label">B1</div>';
    var brand2label = '<div class="brand2_label">B2</div>';
    var brand3label = '<div class="brand3_label">B3</div>';
    var brand4label = '<div class="brand4_label">B4</div>';

    if (b == 'Brand1') {
        return brand1label;
    } else if (b == 'Brand2') {
        return brand2label;
    } else if (b == 'Brand3') {
        return brand3label;
    } else if (b == 'Brand4') {
        return brand4label;
    }
}

I am using this get_brand_label function in another function as:

var label = get_brand_label(d.brand);

In future, if I want to add B5 and B6, I need to add new if-else conditions

So before adding new brands, is there any way to make the above existing code more dynamic so that I don't need to add if-else conditions in future while adding new brands

Answer 1

You can just make a map of labels and brands and then return the label based on the brand:

const brandLabelMap = {
  Brand1: '<div class="brand1_label">B1</div>',
  Brand2: '<div class="brand2_label">B2</div>',
  Brand3: '<div class="brand3_label">B3</div>',
  Brand4: '<div class="brand4_label">B4</div>'
};

function get_brand_label(b) {
  return brandLabelMap[b];
}

Answer 2

Try this one

    const yourFunction = (label) => {
      return label + "label";
    }
    yourFunction(label);

you don't even need if\\else you can return label + your brand.

Answer 3

You can use an object instead, add the extra key/value pairs when you want to extend it

 function get_brand_label(b) { let mapping = { 'Brand1': '<div class="brand1_label">B1</div>', 'Brand2': '<div class="brand1_label">B2</div>', 'Brand3': '<div class="brand1_label">B3</div>', 'Brand4': '<div class="brand1_label">B4</div>', } return mapping[b] } console.log(get_brand_label('Brand2')) 

Answer 4

Like others have suggested, use an object to map key-value-pairs and construct your HTML from it, like so:

 function get_brand_label(b) { const brandlabels = { "Brand1" : "B1", "Brand2" : "B2", "Brand3" : "B3", "Brand4" : "B4", }; return `<div class="${b.toLowerCase()}_label">${brandlabels[b]}</div>`; } console.log(get_brand_label("Brand1")); 

---

${b.toLowerCase()}_label will automatically create lower-case classnames. However if your brands contain spaces or other characters that are not valid for css you need to take care of that, too.