Переключение базового url в JavaScript: switch vs if

Быстрый ответ

switch (yourString) {
  case 'option1':
    // Код для случая, когда строка соответствует 'option1'
    break;
  case 'option2':
    // Код для случая, когда строка соответствует 'option2'
    break;
  default:
    // Код, который будет выполнен, если строка не соответствует ни одному из приведенных вариантов
}

Сравниваем переменную yourString с различными вариантами внутри оператора switch. Ключевое слово break прерывает выполнение оператора switch, когда найдено совпадение. Если совпадение не обнаружено, выполняется блок default.

Применение оператора сопоставления с образцом switch

От if/else к повышению читабельности с switch

Код будет выглядеть более наглядно и понятно, если заменить множественные условия if/else на switch:

const baseURL = location.host.toLowerCase();

switch (baseURL) {
  case 'localhost':
  case '127.0.0.1':
    console.log("Работаем в режиме разработки. Нет времени для отдыха!");
    break;
  case 'staging.website.com':
    console.log("Вы находитесь на стейджинг-сервере. Будьте внимательны к возможным багам.");
    break;
  case 'production.website.com':
    console.log("Мы перешли в рабочий режим. Готовы к тестированию пользователями.");
    break;
  default:
    console.log("Хост не определен. Возможно, стоит что-то проверить.");
}

Для независимости от регистра символов при сравнении строк стоит приводить их в нижний регистр. Можно использовать последовательное перечисление case вместо оператора || для обработки идентичных исходов.

Подробнее об этом расскажет наш спикер на видео

Использование Regex для более гибкого сопоставления с помощью switch

С помощью switch(true) и regex вы можете сделать сопоставление с образцами строк более динамичным:

const urlPath = 'yourwebsite/pathway';

switch (true) {
  case /^https:\/\/.+\.example\.com/.test(urlPath):
    console.log("Добро пожаловать в мир удивительного!");
    break;
  case /localhost|127\.0\.0\.1/.test(urlPath):
    console.log("Привет, ты дома!");
    break;
  // Можно добавить другие шаблоны...
  default:
    console.log("Мы кажется заблудились. Где карта?");
}

Метод .test() регулярных выражений позволяет проверить соответствие строки образцу, в то время как switch(true) определяет, выполняется ли хоть одно условие из case.

Эффективное использование switch

Предупреждение ошибок с null и undefined

Для предотвращения неожиданных сценариев с null или undefined можно применить тернарный оператор или оператор опционального последовательного вызова:

const observedURL = someConfig?.url || 'defaultUrl.com';
const completeURL = observedURL && `${observedURL}/endpoint`;

Управление условиями перед switch

Рекомендуется проанализировать начальные предпосылки перед использованием switch:

const responseMsg = playerHasLives(player) ? 'Продолжаем игру' : 'Игра окончена';
if (responseMsg === 'Игра окончена') {
  return showMessage(responseMsg);
}
// Продолжение игры, определение действий игрока
switch (player.move) {
  // здесь указываются условия ходов
}

Отладка внутри switch для нахождения ответов

Для глубокого понимания шаблонов регулярных выражений используйте console.log или дайте подробную информацию о regex в комментариях:

const pattern = /(\d{3})-(\d{2})-(\d{4})/;
console.log('Группы в шаблоне: код города, код оператора, номер абонента');

Визуализация

Представьте, что корректно построенный оператор switch в JavaScript — это эксклюзивное мероприятие 🎉, где гостями представлены строки:

Проверка на входе:

Switch (attendee) {
  Case "Alice":
    Откройте доступ в VIP-зону
    break
  Case "Bob":
    Отправьте к бару
    break
  Case "Charlie":
    Подведите к сцене для выступлений
    break
  Default:
    Вежливо покажите дверь
}

Каждый case — это охранник, который определяет соответствующий уровень доступа для каждого гостя:

"Alice" пришла: Добро пожаловать в VIP 🌟
"Bob" пришел: Потрясающе повеселиться у барной стойки 🍹
"Charlie" пришел: Сцена тебе во власти 🎤
Пришел неизвестный гость: Кажется, сегодня вечер не твой 🚫

Таким образом, с помощью конструкции оператора switch, каждый гость — будь то "Alice", "Bob" или неизвестный гость — получит уникальный опыт.

Правила и ограничения при использовании switch

Выбор между switch и if/else

Если необходимо учесть большое количество условий, предпочтительнее использовать if/else. Но для простого и ясного сравнения строк вполне подойдет switch.

Сравнение производительности switch и if/else

Switch часто работает быстрее if/else благодаря оптимизации процесса обработки движками JavaScript с помощью специальных таблиц переходов.

Использование Regex внутри switch

Regex идеально подходит для работы с различными форматами URL или шаблонами токенов:

switch (true) {
  case /admin/.test(urlPath):
    authenticateAdmin();
    break;
  case /user/.test(urlPath):
    authenticateUser();
    break;
  // И так далее
}

Полезные материалы

1. switch – JavaScript | MDN — Описание оператора switch в JavaScript на MDN.
2. JavaScript Switch Statement — Введение и особенности использования switch на W3Schools.
3. The "switch" statement — Детальный разбор оператора switch на JavaScript.info.
4. Mastering the JavaScript switch Statement — SitePoint — Полезные советы по эффективному использованию switch на SitePoint.
5. Program Structure :: Eloquent JavaScript — Обсуждение структуры программ и оператора switch на Eloquent JavaScript.