JavaScript Switch Statement


Innehållsförteckning

    Visa innehållsförteckning


switch-satsen används för att utföra olika åtgärder baserat på olika förhållanden.


JavaScript-utlåtandet switch

Använd switch-satsen för att välja ett av många kodblock som ska exekveras.

Syntax

switch(expression) {
  case x:
     // code block
        break;
  case y:
     // code block
     break;
  default:
      // code block
 }

Så här fungerar det:

  • Växlingsuttrycket utvärderas en gång.

  • Värdet på uttrycket jämförs med värdena för varje fall.

  • Om det finns en matchning exekveras det associerade kodblocket.

  • Om det inte finns någon matchning exekveras standardkodblocket.

Exempel

Metoden getDay() returnerar veckodagen som ett tal mellan 0 och 6.

(söndag=0, måndag=1, tisdag=2 ..)

Det här exemplet använder veckodagsnumret för att beräkna veckodagsnamnet:

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
      day = "Monday";
     break;
  case 2:
       day = "Tuesday";
      break;
  case 3:
    day = "Wednesday";
      break;
  case 4:
      day = "Thursday";
     break;
  case 5:
      day = "Friday";
      break;
  case 6:
    day = "Saturday";
}

Dagens resultat blir:

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>


Nyckelordet break

När JavaScript når ett avbrott nyckelord, bryter den ut ur switchblocket.

Detta kommer att stoppa exekveringen inuti switchblocket.

Det är inte nödvändigt att bryta det sista fallet i ett kopplingsblock. Blocket går sönder (slutar) där ändå.

Obs: Om du utelämnar break-satsen kommer nästa fall att köras även om utvärderingen stämmer inte överens med fallet.


standard nyckelordet

Nyckelordet default anger koden som ska köras om det inte finns någon fall matchning:

Exempel

Metoden getDay() returnerar veckodagen som ett tal mellan 0 och 6.

Om idag varken är lördag (6) eller söndag (0), skriv ett standardmeddelande:

switch (new Date().getDay()) {
   
case 6:
      text = "Today is Saturday";
    break; 
  case 0:
      text = "Today is Sunday";
      break; 
   
default: 
      text = "Looking forward to the Weekend";
}

Resultatet av texten blir:

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

standard-fallet behöver inte vara det sista fallet i en switch blockera:

Exempel

switch (new Date().getDay()) {
  default: 
        text = "Looking forward to the Weekend";
    
  break;
  case 6:
        text = "Today is Saturday";
        break; 
  case 0:
        text = "Today is Sunday";
  }

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Om default inte är det sista fallet i switchblocket, kom ihåg att avsluta standardfallet med en paus.


Vanliga kodblock

Ibland vill man annorlunda byt fodral för att använda samma koda.

I detta exempel delar fall 4 och 5 samma kodblock, och 0 och 6 delar ett annat kodblock:

Exempel

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
      break; 
  case 0:
  case 6:
      text = "It is Weekend";
    break;
  default: 
    text = "Looking forward to the Weekend";
  }

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Växlingsdetaljer

Om flera fall matchar ett skiftvärde väljs första fallet.

Om inga matchande fall hittas fortsätter programmet till standard-etiketten.

Om ingen standardetikett hittas fortsätter programmet till satsen/satserna efter bytet.


Strikt jämförelse

Byt fall använder strikt jämförelse (===).

Värdena måste vara av samma typ för att matcha.

En strikt jämförelse kan bara vara sann om operanderna är av samma typ.

I det här exemplet kommer det inte att finnas någon matchning för x:

Exempel

 let x = "0";
switch (x) {
  case 0:
    text = "Off";
      break;
  case 1:
    text = "On";
    break;
    default:
    
  text = "No value found";
} 

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let x = "0";

switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>