Оператор switch в JavaScript — вибір за значенням
Загальний опис
switch — це умовна конструкція, яка дозволяє виконувати різні фрагменти коду залежно від значення виразу. Вона працює шляхом послідовного порівняння виразу з кожним з вказаних case. Якщо збіг знайдено, виконується відповідний блок коду. Конструкція завершується після ключового слова break, яке запобігає виконанню наступних блоків. Якщо жоден із випадків (case) не збігається, виконується блок default, якщо він заданий.
Наприклад, для перевірки дня тижня:
const day = "Monday";
switch (day) {
case "Monday":
console.log("Початок робочого тижня");
break;
case "Friday":
console.log("Час розслабитись");
break;
default:
console.log("Це звичайний день");
}
Особливість конструкції switch полягає в тому, що порівняння значень виконується жорстко (===), тому різні типи даних не призводять до збігу. Наприклад, 1 і "1" не вважаються рівними.
Якщо пропустити break, виконання коду перейде до наступного блоку, навіть якщо значення не збігаються:
const fruit = "apple";
switch (fruit) {
case "apple":
console.log("Яблуко");
case "orange":
console.log("Апельсин");
break;
}
// Виведе: "Яблуко", "Апельсин"
Ця поведінка може використовуватися для об’єднання кількох case для однієї дії.
- Порада
-
Переконайтеся, що ви додаєте
автор: Bondbreakпісля кожного блоку. Винятки можна робити тільки свідомо, наприклад, коли потрібно, щоб код «провалився» у наступний випадок. - Порада
-
Використовуйте
default, навіть якщо здається, що всі можливі випадки враховані. Це корисно для обробки неочікуваних або невідомих значень, наприклад:
автор: Bondswitch (status) { case "active": console.log("Активний"); break; default: console.log("Невідомий статус"); } - Порада
-
Не використовуйте
switch, якщо кількість умов дуже велика. У таких випадках краще застосовувати об'єкти або функціональний підхід. Наприклад:
автор: Bondconst actions = { Monday: () => console.log("Понеділок"), Friday: () => console.log("П’ятниця"), }; (actions[day] || (() => console.log("Невідомий день")))();
Синтаксис
switch (вираз) {
case значення1:
// Код для значення1
break;
case значення2:
// Код для значення2
break;
default:
// Код за замовчуванням
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі реалізовано простий конвертер валют, який використовує switch для визначення курсу залежно від обраної валюти. Користувач вводить суму в гривнях і вибирає, у яку валюту конвертувати (долар, євро, фунт). Натисканням кнопки отримує результат розрахунку, який відображається на сторінці.
HTML
<header>
<h2 class="title">Конструкція switch</h2>
<p class="description">Обирає та виконує код залежно від значення змінної.</p>
</header>
<main>
<div class="result">
<!-- Вхідні дані -->
<label for="amount">Сума в гривнях:</label>
<input type="number" id="amount" placeholder="Введіть суму" />
<label for="currency">Конвертувати у валюту:</label>
<select id="currency">
<option value="usd">Долар</option>
<option value="eur">Євро</option>
<option value="gbp">Фунт</option>
</select>
<button id="convert-btn">Конвертувати</button>
<!-- Виведення результату -->
<p id="output">Результат: <span id="converted-amount">-</span></p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
label {
display: block;
margin-top: 10px;
}
input, select {
margin: 10px 0;
padding: 5px;
font-size: 14px;
}
button {
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 15px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
p#output {
margin-top: 20px;
font-weight: bold;
}JS
document.getElementById("convert-btn").addEventListener("click", () => {
const amount = parseFloat(document.getElementById("amount").value);
const currency = document.getElementById("currency").value;
const output = document.getElementById("converted-amount");
if (isNaN(amount) || amount <= 0) {
output.textContent = "Введіть коректну суму.";
return;
}
let convertedAmount;
// Конструкція switch для вибору валюти
switch (currency) {
case "usd":
convertedAmount = amount / 36.5; // Курс гривня-долар
break;
case "eur":
convertedAmount = amount / 40.0; // Курс гривня-євро
break;
case "gbp":
convertedAmount = amount / 46.0; // Курс гривня-фунт
break;
default:
convertedAmount = null;}
// Вивід результату
if (convertedAmount) {
output.textContent = `${convertedAmount.toFixed(2)} ${currency.toUpperCase()}`;
} else {
output.textContent = "Невідома валюта.";
}
});
//# sourceURL=pen.jsУ цьому прикладі switch використовується для реалізації калькулятора. Конструкція забезпечує простоту читання та додавання нових операцій.
function calculator(a, b, operation) {
switch (operation) {
case "add":
return a + b;
case "subtract":
return a - b;
case "multiply":
return a * b;
case "divide":
return b !== 0 ? a / b : "Помилка: ділення на нуль";
default:
return "Невідома операція";
}
}
console.log(calculator(4, 2, "add")); // 6
console.log(calculator(4, 0, "divide")); // Помилка: ділення на нульЦей приклад демонструє, як switch може обробляти різні HTTP-статуси. Завдяки блоку default можна легко передбачити поведінку для невідомих значень.
function handleResponse(status) {
switch (status) {
case 200:
return "OK";
case 404:
return "Not Found";
case 500:
return "Server Error";
default:
return "Unknown Status";
}
}
console.log(handleResponse(200)); // OK
console.log(handleResponse(403)); // Unknown StatusКоментарі
Коментарів ще немає — будьте першим!