如何使用带有switch语句的JavaScript + =

Question

I have the following:

let buttonClass = '';
buttonClass += link ? ' button-link ' : '';

I would like to add:

let buttonClass = '';
buttonClass += link ? ' button-link ' : '';
buttonClass += 
  (return switch(textAlign) {
        case "right":
          "ta-r"
          break;
        case "left":
          "ta-l"
          break;
        default:
          "ta-c"
})

The above is erring... How can I use += with a switch statement as seen above?

Answer 1

You won't be able to do that.

An alternative is using IIFE (Immediately Invoked Function Expression)

 var textAlign = 'right'; var buttonClass = "class-name-" buttonClass += (function() { switch (textAlign) { case "right": return "ta-r" case "left": return "ta-l" default: return "ta-c" } })(); console.log(buttonClass); 

Answer 2

I'd use an object:

buttonClass += {
  "right": "ta-r",
  "left": "ta-l",
}[textAlign] || "ta-c";

That instantiates a throw-away object (which you could of course replace with a more permanent object) and looks up the current textAlign value. If no entry is found, the [ ] expression will return undefined so the || provides the default.

Answer 3

By itself, switch does not return a value that you can insert into a larger expression. It branches into one set of code that is executed. A simple way to make this work is to set the value of a variable via the switch :

let buttonClass = '';
buttonClass += link ? ' button-link ' : '';
var result = null; // Answer will wind up here
switch(textAlign) {
        case "right":
          result = "ta-r";
          break;
        case "left":
          result = "ta-l";
          break;
        default:
          result = "ta-c";
}

// Whatever the switch set the result to, use it here:
textAlign += result;

As others have pointed out as well, you can certainly wrap switch with a function and have the function return a value based on the outcome of the switch .

function wrapSwitch(tAlign){
  switch(tAlign){
        case "right":
          return "ta-r";
        case "left":
          return "ta-l";
        default:
          return "ta-c";
  }
}

textAlign += wrapSwitch(textAlign);

Answer 4

let buttonClass = '';
buttonClass += link ? ' button-link ' : '';

const switchFn = (textAlign) => {
    switch(textAlign) {
        case "right":
            return "ta-r";

        case "left":
            return "ta-l";

        default:
            return "ta-c";
    }
}

textAlign += switchFn(textAlign)