JavaScript switch 语句
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 语句
