Проверка Hex строк

Hex-строки и их разновидности

Hex-строки (шестнадцатеричные строки) представляют собой последовательности символов, основанные на системе счисления с основанием 16. В JavaScript и веб-разработке они встречаются в нескольких ключевых формах:

  • Чистые hex-значения: 4fa3b2, 00ffcc, a1b2c3d4
  • Цветовые hex-коды: #fff, #ffffff, #0a1b2c
  • Hex-представления бинарных данных: часто без префиксов и разделителей

Основу таких строк составляют символы:

0–9, a–f, A–F

Validator.js предоставляет специализированные функции для проверки подобных значений, ориентируясь на наиболее распространённые сценарии использования.

Функция isHexadecimal

Функция isHexadecimal проверяет, состоит ли строка исключительно из допустимых hex-символов.

Сигнатура:

validator.isHexadecimal(str)

Поведение:

  • Допускаются только символы 0-9, a-f, A-F
  • Не допускается наличие префиксов (0x, #)
  • Не допускаются пробелы, разделители и любые дополнительные символы

Примеры:

validator.isHexadecimal('1a2b3c'); // true
validator.isHexadecimal('AABBCC'); // true
validator.isHexadecimal('0x1a2b'); // false
validator.isHexadecimal('abc def'); // false
validator.isHexadecimal('#aabbcc'); // false

Данная функция используется в задачах, где hex-строка рассматривается как абстрактное значение (например, идентификаторы, хеши, бинарные данные в текстовом виде).

Функция isHexColor

Функция isHexColor ориентирована на проверку цветовых значений в hex-формате.

Сигнатура:

validator.isHexColor(str)

Поддерживаемые форматы:

  • #RGB
  • #RRGGBB

Особенности:

  • Обязательный символ # в начале строки
  • Поддержка сокращённой формы (#fff)
  • Поддержка полной формы (#ffffff)
  • Проверка регистронезависима

Примеры:

validator.isHexColor('#fff');     // true
validator.isHexColor('#ffffff');  // true
validator.isHexColor('fff');      // false
validator.isHexColor('#ggg');     // false
validator.isHexColor('#123abz');  // false

Данная функция строго ограничена цветовыми значениями и не предназначена для общих hex-строк.

Сравнение isHexadecimal и isHexColor

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

Характеристика isHexadecimal isHexColor
Префикс # не допускается обязателен
Диапазон символов 0-9, a-f, A-F 0-9, a-f, A-F
Формат произвольная строка строго цвет
Короткая форма не поддерживается поддерживается (#RGB)
Область применения данные, идентификаторы UI, цвета CSS

Практические примеры использования

Валидация пользовательского ввода цвета:

function validateColor(input) {
  return validator.isHexColor(input);
}

Проверка hex-идентификаторов в API:

function validateId(id) {
  return validator.isHexadecimal(id);
}

Фильтрация массива значений:

const values = ['a1b2c3', '#fff', '123xyz', '00ff00'];

const hexOnly = values.filter(validator.isHexadecimal);
// ['a1b2c3', '00ff00']

Интеграция в схемы валидации

В реальных приложениях проверки hex-строк часто комбинируются с другими правилами.

Пример схемы валидации объекта:

const schema = {
  color: (value) => validator.isHexColor(value),
  hash: (value) => validator.isHexadecimal(value),
};

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

function validatePayload(payload) {
  return (
    validator.isHexColor(payload.themeColor) &&
    validator.isHexadecimal(payload.userHash)
  );
}

Типичные ошибки и пограничные случаи

1. Использование # в isHexadecimal

validator.isHexadecimal('#abc'); // false

2. Передача пустой строки

validator.isHexColor(''); // false
validator.isHexadecimal(''); // false

3. Некорректные символы

validator.isHexadecimal('12xz'); // false

4. Попытка использовать RGB или HEX вместе

validator.isHexColor('rgb(255,255,255)'); // false

5. Пробелы и скрытые символы

validator.isHexadecimal('a1 b2'); // false

Производительность и альтернативы

Функции Validator.js для hex-проверок основаны на регулярных выражениях и выполняются за линейное время относительно длины строки.

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

Альтернативный подход — использование собственных регулярных выражений:

Hexadecimal:

/^[0-9a-fA-F]+$/

Hex color:

/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/

Однако использование Validator.js предпочтительнее в крупных проектах из-за унификации правил валидации и уменьшения дублирования логики.

Оглавление