Урок: проверить типы значений в dataset

Назначение

Data-атрибуты удобно связывают разметку с небольшими настройками интерфейса. В этом уроке вы проверите, почему число и логический признак из dataset сначала оказываются строками.

Как это работает

Пример создаёт элемент в памяти, не добавляя его на страницу. Имена с дефисами переходят в camelCase. Преобразование числа и проверка значения выполняются явно, прежде чем оно станет частью вычисления.

Пример

const card = document.createElement("div");
card.setAttribute("data-lesson-count", "3");
card.setAttribute("data-enabled", "false");
console.log(card.dataset.lessonCount, typeof card.dataset.lessonCount);
const count = Number(card.dataset.lessonCount);
console.log(Number.isInteger(count) && count >= 0);
console.log(Boolean(card.dataset.enabled));
console.log(card.dataset.enabled === "true");

Что должно получиться

Количество сначала имеет тип string, затем явно преобразуется в число. Boolean от непустой строки false возвращает true, а сравнение с разрешённым текстом true даёт ожидаемый отдельный результат.

Граница применения и частая ошибка

Dataset не является защищённым хранилищем: пользователь и скрипты могут изменить атрибуты. Number от пустой строки даёт ноль, поэтому обязательность и допустимый формат нужно проверять отдельно. Не помещайте в HTML секретные настройки.

Самостоятельная проверка

Проверьте отсутствующий атрибут, пустую строку и значение three. Запишите результаты преобразования и сформулируйте правила отказа. Затем измените dataset.lessonCount и посмотрите, как обновляется исходный data-атрибут.

Связанные материалы

• Локальный просмотр
• Регрессионная проверка
• Панель Network