小码哥的IT人生

JavaScript switch 语句

JavaScript基础 2022-06-08 11:18:18小码哥的IT人生shichen

JavaScript switch 语句

实例

根据用户输入执行代码块:

var text;
var fruits = document.getElementById("myInput").value;
switch(fruits) {
  case "Banana":
    text = "Banana is good!";
    break;
  case "Orange":
    text = "I am not a fan of orange.";
    break;
  case "Apple":
    text = "How you like them apples?";
    break;
  default:
    text = "I have never heard of that fruit...";
}

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>在输入字段中输入 Banana、Orange 或 Apple,然后单击按钮。</p>
<p>switch 语句将根据您的输入执行一段代码。</p>
<input id="myInput" type="text">
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var text;
  var fruits = document.getElementById("myInput").value;
  switch(fruits) {
    case "Banana":
      text = "Banana is good!";
    break;
    case "Orange":
    text = "I am not a fan of orange.";
    break;
    case "Apple":
    text = "How you like them apples?";
    break;
    default:
    text = "I have never heard of that fruit...";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

页面下方有更多 TIY 实例。

定义和用法

switch 语句根据不同的情况执行代码块。

switch 语句是 JavaScript 的“条件”语句的一部分,用于根据不同的条件执行不同的操作。使用 switch 选择要执行的许多代码块之一。这是长的嵌套 if/else 语句的完美解决方案。

switch 语句计算表达式。然后将表达式的值与结构中每个 case 的值进行比较。如果匹配,则执行关联的代码块。

switch 语句通常与 break 或 default 关键字(或两者)一起使用。这些都是可选的:

break 关键字脱离 switch 块。这将停止在块内执行更多代码和/或案例测试。如果省略 break,则执行 switch 语句中的下一个代码块。

如果没有 case 匹配,default 关键字指定要运行的一些代码。一个 switch 中只能有一个 default 关键字。尽管其是可选的,但建议您使用它,因为它可以处理意外情况。

浏览器支持

语句 Chrome IE Firefox Safari Opera
switch 支持 支持 支持 支持 支持

语法

switch(expression) {
  case n:
    code block
    break;
  case n:
    code block
    break;
  default:
    default code block
}

参数值

参数 描述
expression 必需。指定要计算的表达式。表达式会被计算一次。表达式的值与结构中每个 case 标签的值进行比较。如果匹配,则执行相关的代码块。

技术细节

JavaScript 版本: ECMAScript 1

更多实例

示例代码:

使用今天的 weekday 编号计算 weekday 名称 (Sunday=0, Monday=1, Tuesday=2, ...):

var 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";
    break;
  default:
    day = "Unknown Day";
}

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>单击该按钮来显示今天是哪一天。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var 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";
      break;
    default:
      day = "Unknown Day";
  }
  document.getElementById("demo").innerHTML = "Today is " + day;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

如果今天既不是星期六也不是星期日,写一条默认消息:

var 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";
}

完整实例:

<html>
<body>
<p>单击这个按钮可根据今天的日期显示一条消息。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var 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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

有时您会希望不同的情况使用相同的代码,或者使用相同的默认值。

请注意,在本例中,case 共享相同的代码块,并且 default case 不必是 switch 块中的最后一个 case(但是,如果 default 不是 switch 块中的最后一个 case,请记住用 break 结束它)。

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

完整实例:

<html>
<body>
<p>单击这个按钮可根据日期显示消息。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var text;
  switch (new Date().getDay()) {
    case 1:
    case 2:
    case 3:
    default:
      text = "Looking forward to the Weekend";
      break;
    case 4:
    case 5:
      text = "Soon it is Weekend";
      break;
    case 0:
    case 6:
      text = "It is Weekend";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

根据来自提示框的用户输入,使用 switch 语句执行代码块:

var text;
var favDrink = prompt("What's your favorite cocktail drink?");
switch(favDrink) {
  case "Martini":
    text = "Excellent choice! Martini is good for your soul.";
    break;
  case "Daiquiri":
    text = "Daiquiri is my favorite too!";
    break;
  case "Cosmopolitan":
    text = "Really? Are you sure the Cosmopolitan is your favorite?";
    break;
  default:
    text = "I have never heard of that one..";
}

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>单击按钮以显示对话框,询问您最喜欢的饮料。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var text;
  var favDrink = prompt("What's your favorite cocktail drink?", "Daiquiri");
  switch(favDrink) {
    case "Martini":
      text = "Excellent choice. Martini is good for your soul.";
      break;
    case "Daiquiri":
      text = "Daiquiri is my favorite too!";
      break;
    case "Cosmopolitan":
      text = "Really? Are you sure the Cosmopolitan is your favorite?";
      break;
    default:
      text = "I have never heard of that one..";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

相关页面

JavaScript 教程:JavaScript If...Else 语句

JavaScript 教程:JavaScript Switch 语句

JavaScript 参考手册:JavaScript if/else 语句

JavaScript 参考手册:JavaScript break 语句

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024