Проверка числа в диапазоне JavaScript: размер окна 500-600px

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

Для определения, принадлежит ли число x отрезку [a, b], достаточно проверить утверждение: a <= x && x <= b. Если x располагается в заданном диапазоне или совпадает с его границами, вычисление вернёт true.

Пример:

let isBetween = (x, a, b) => a <= x && x <= b; // Применение: isBetween(2, 1, 3) -> true (2 расположен между 1 и 3)

Расширяем основной подход

Проверка вхождения числа в числовой интервал является распространённой задачей в JavaScript. Базовая проверка достаточно прямолинейна, но существуют способы улучшить и расширить функциональность этой операции.

Добавление удобства через прототипирование

Для улучшения возможностей переиспользования кода мы можем добавить метод в прототип Number:

Number.prototype.isBetween = function (a, b) {
  return a <= this && this <= b;
};

// Пример использования
(10).isBetween(5, 15); // true (10 располагается между 5 и 15)

Однако необходимо помнить, что модифицировать прототипы нужно с умом, чтобы не вызвать непредсказуемое поведение в других местах кода.

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

Выявление границ с помощью методов Math

Если вы не уверены, какой из параметров является верхней или нижней границей, примените Math.min() и Math.max():

let isBetween = (x, a, b) => {
  const lowerBound = Math.min(a, b);  // Нижняя граница
  const upperBound = Math.max(a, b);  // Верхняя граница
  return lowerBound <= x && x <= upperBound;
};

Инкапсуляция проверки интервала в функции

Для упрощения поддержки кода рекомендуется заключить логику проверки диапазона в отдельную функцию:

function checkRange(x, lowerLimit, upperLimit, inclusive = true) {
  return inclusive
    ? lowerLimit <= x && x <= upperLimit // Если интервал включительный, допустимо совпадение с границами
    : lowerLimit < x && x < upperLimit;  // Если интервал исключительный, совпадение с границами не допускается
}

Учёт включительных и исключительных интервалов

Выбор между включительным или исключительным интервалом может быть критичным в зависимости от поставленной задачи. Важно предоставить этот выбор в функции проверки диапазона.

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

Представим автомобиль 🚗, движущийся в пределах разрешённого диапазона скоростей:

Ограничение скорости: |←--- 30км/ч 🚦 50км/ч ---→|
Скорость автомобиля:     40км/ч

Находится ли 40км/ч между 30 и 50км/ч?

Результат: 🚗 безопасно движется по дороге, соответствуя заданным скоростным ограничениям!

Показания спидометра:
| Мин. скорость 🚦 | Скорость авто 🚗 | Макс. скорость 🚦 |
| ---------------- | ---------------- | ---------------- |
|       30км/ч     |      40км/ч      |      50км/ч      |

🎯 Принцип проверки: Мин. скорость 🚦 < Скорость авто 🚗 < Макс. скорость 🚦

Все возможные подходы к проверке диапазона

Использование библиотеки lodash

Метод _.inRange из библиотеки 'lodash' облегчает реализацию проверки диапазона:

// Пример использования 
_.inRange(myNumber, 500, 601); // 600 включается в диапазон

Рекомендуется детально изучить особенности работы сторонних библиотек в соответствующей документации.

Проверка диапазона с валидацией

Проверьте, является ли переменная числом, прежде чем двигаться к проверке диапазона:

function isNumber(value) {
  return typeof value === 'number' && isFinite(value);
}

Такая валидация поможет исключить ошибки, особенно при работе с внешними данными или пользовательским вводом.

Применение if-конструкций

Включите функцию проверки диапазона в условные конструкции, подобранные под логику вашего приложения:

if (isBetween(window.innerWidth, 1024, 1280)) {
  console.log('Окно идеального размера для данного дизайна.'); // Выводится, если размеры окна соответствуют требованиям
}

Подстраивайте проверку диапазона под специфические задачи, для улучшения качества кода и удобства работы с ним.

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

1. Выражения и операторы – JavaScript | MDN — подробный гайд по операторам сравнения в JavaScript.
2. javascript – Определение всех версий Firefox в JS – Stack Overflow — обсуждения работы с интервалами в контексте определения версий браузера.
3. JavaScript Comparison and Logical Operators — наглядные примеры использования сравнительных операторов в JavaScript.
4. Сравнения — погружение в тему сравнений и проверок интервалов в JavaScript.
5. Спецификация языка ECMAScript – ECMA-262 Edition 5.1 — технические спецификации для алгоритма сравнения в JavaScript.
6. JavaScript: Проверка, является ли переменная числом — методы проверки переменных на числовой тип перед сравнительными проверками.
7. Базовые операторы, математика — введение в базовые операторы, необходимые для работы с диапазонами в JavaScript.