選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

JS 參考手冊

按類別劃分的 JS 按字母劃分的 JS

JavaScript

JS 陣列 JS 布林值 JS 類 JS 日期 JS 錯誤 JS 全域性 JS JSON JS Map JS Math JS 數字 JS 物件 JS 運算子 JS 優先順序 JS Promise JS 正則表示式 JS Set JS 語句 JS 字串 JS TypedArray

Window

Window 物件 Window Console Window History Window Location Window Navigator Window Screen

HTML DOM

HTML 文件 HTML 元素 HTML 屬性 HTML 集合 HTML NodeList HTML DOMTokenList HTML 樣式
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundClip backgroundColor backgroundImage backgroundOrigin backgroundPosition backgroundRepeat backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cssFloat cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex

HTML 事件

HTML 事件 HTML 事件物件 HTML 事件屬性 HTML 事件方法

Web API

API Canvas API Console API Fetch API Fullscreen API 地理位置 API History API MediaQueryList API Storage API 驗證 API Web

HTML 物件

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

其他參考

CSSStyleDeclaration JS 轉換


JavaScript switch 語句

示例

根據使用者輸入執行程式碼塊

var text;
var fruits = document.getElementById("myInput").value;

switch(fruits) {
  case "Banana"
    text = "香蕉很好!";
    break;
  case "Orange"
    text = "我不喜歡橙子。";
    break;
  case "Apple"
    text = "你覺得這些蘋果怎麼樣?";
    break;
  default
    text = "我從未聽說過那種水果...";
}
自己動手試一試 »

更多“自己嘗試”的例子見下文。


描述

switch 語句根據不同的情況執行一個程式碼塊。

switch 語句是 JavaScript “條件”語句的一部分,用於根據不同的條件執行不同的操作。使用 switch 選擇要執行的多個程式碼塊中的一個。這是解決冗長、巢狀的 if/else 語句的完美方案。

switch 語句會評估一個表示式。然後將表示式的值與結構中每個 case 的值進行比較。如果匹配,則執行關聯的程式碼塊。

switch 語句通常與 break 或 default 關鍵字(或兩者)一起使用。這兩個都是可選的。

break 關鍵字用於跳出 switch 塊。這將停止塊內更多程式碼的執行和/或 case 測試。如果省略 break,則執行 switch 語句中的下一個程式碼塊。

default 關鍵字指定在沒有 case 匹配時要執行的一些程式碼。一個 switch 中只能有一個 default 關鍵字。雖然這是可選的,但建議您使用它,因為它能處理意外情況。


語法

switch(expression) {
  case n
    程式碼塊
    break;
  case n
    程式碼塊
    break;
  default
    default 程式碼塊
}

引數值

引數 描述
expression 必需。指定要評估的表示式。表示式只評估一次。表示式的值與結構中每個 case 標籤的值進行比較。如果匹配,則執行關聯的程式碼塊。


更多示例

示例

使用今天的星期幾數字來計算星期幾的名稱(星期日=0,星期一=1,星期二=2,...)

var day;
switch (new Date().getDay()) {
  case 0
    day = "星期日";
    break;
  case 1
    day = "星期一";
    break;
  case 2
    day = "星期二";
    break;
  case 3
    day = "星期三";
    break;
  case 4
    day = "星期四";
    break;
  case 5
    day = "星期五";
    break;
  case 6
    day = "星期六";
    break;
  default
    day = "未知日期";
}
自己動手試一試 »

示例

如果今天不是星期六也不是星期日,則寫入預設訊息

var text;
switch (new Date().getDay()) {
  case 6
    text = "今天是星期六";
    break;
  case 0
    text = "今天是星期日";
    break;
  default
    text = "期待週末";
}
自己動手試一試 »

示例

有時您會希望不同的 case 使用相同的程式碼,或者“落空”到一個共同的 default。

請注意,在此示例中,這些 case 共享相同的程式碼塊,並且 default case 不必是 switch 塊中的最後一個 case(但是,如果 default 不是 switch 塊中的最後一個 case,請記住以 break 結束它)。

var text;
switch (new Date().getDay()) {
  case 1
  case 2
  case 3
  default
    text = "期待週末";
    break;
  case 4
  case 5
    text = "很快就是週末了";
    break;
  case 0
  case 6
    text = "今天是週末";
}
自己動手試一試 »

示例

使用 switch 語句根據提示框中的使用者輸入執行程式碼塊

var text;
var favDrink = prompt("你最喜歡的雞尾酒是什麼?");
switch(favDrink) {
  case "Martini"
    text = "絕佳選擇!馬提尼對你的靈魂有益。";
    break;
  case "Daiquiri"
    text = "代基裡也是我的最愛!";
    break;
  case "Cosmopolitan"
    text = "真的嗎?你確定大都會是你的最愛嗎?";
    break;
  default
    text = "我從未聽說過那個..";
}
自己動手試一試 »

相關頁面

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

JavaScript 教程:JavaScript Switch 語句

JavaScript 參考:JavaScript if/else 語句

JavaScript 參考:JavaScript break 語句


瀏覽器支援

switch 是 ECMAScript1 (ES1) 功能。

ES1 (JavaScript 1997) 在所有瀏覽器中都得到完全支援

Chrome Edge Firefox Safari Opera IE

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援