ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

JavaScript Учебник

JavaScript Старт Введение в JavaScript Справочники Редакторы кода Консоль разработчика Привет, Мир! Структура кода Строгий режим Переменные Типы данных Alert. Prompt. Confirm Преобразование типов Базовые Операторы Операторы сравнения If... Else Логические операторы Оператор объединения Циклы While и For Switch Базовые функции Функции-выражения Функции-стрелки Особенности JavaScript Дебаггинг в Chrome Стиль кода Комментарии Ниндзя-код Тестирование с Mocha Полифилы Объекты Копирование объектов Уборка мусора Методы объекта Конструктор, New Опциональная цепочка Тип данных Symbol Преобразование объектов Методы примитивов Числа Строки Массивы Методы массивов Перебираемые объекты Map и Set WeakMap и WeakSet Object.keys, values, entries Деструктурирующее присваивание Дата и время Формат JSON Рекурсия и стек Остаточные параметры и оператор расширения Замыкание Ключевое слово var Глобальный объект Объект функции, NFE Синтаксис "new Function" Планирование: setTimeout и setInterval Декораторы и переадресация вызова, call/apply Привязка контекста к функции Повторяем стрелочные функции Флаги и дескрипторы свойств Свойства - геттеры и сеттеры Прототипное наследование F.prototype Встроенные прототипы Методы прототипов Класс: базовый синтаксис Наследование классов Статические свойства и методы Приватные и защищённые методы и свойства Расширение встроенных классов Проверка класса: "instanceof" Примеси Обработка ошибок, "try..catch" Пользовательские ошибки Введение: кэлбэки Промисы Цепочка промисов Промисы: обработка ошибок Promise API Промисификация Микрозадачи Async/await Генераторы Асинхронные итераторы и генераторы Модули. Введение Экспорт и импорт Динамические импорты Proxy и Reflect Eval: выполнение строки кода Каррирование Побитовые операторы BigInt Intl: интернационализация в JavaScript

Браузер: документ, события, интерфейсы

Браузерное окружение, спецификации DOM-дерево Навигация по DOM-элементам Поиск: getElement*, querySelector* Свойства узлов: тип, тег и содержимое Атрибуты и свойства Изменение документа Стили и классы Размеры и прокрутка элементов Размеры и прокрутка окна Координаты Введение в браузерные события Всплытие и погружение Делегирование событий Действия браузера по умолчанию Генерация пользовательских событий Основы событий мыши Движение мыши: mouseover/out, mouseenter/leave Drag'n'Drop с событиями мыши Клавиатура: keydown и keyup События указателя Прокрутка Свойства и методы формы Фокусировка: focus/blur События: change, input, cut, copy, paste Отправка формы: событие и метод submit Страница: DOMContentLoaded, load, beforeunload, unload Скрипты: async, defer Загрузка ресурсов: onload и onerror MutationObserver: наблюдатель за изменениями Selection и Range Событийный цикл: микрозадачи и макрозадачи

JavaScript. Уроки для начинающих

JavaScript Преобразование типов


Чаще всего операторы и функции автоматически приводят переданные им значения к нужному типу.

Например, alert автоматически преобразует любое значение к строке. Математические операторы преобразуют значения к числам.

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

Пока что мы не говорим об объектах

В этой главе мы не касаемся объектов. Сначала мы разберём преобразование примитивных значений. Мы разберём преобразование объектов позже, в главе Преобразование объектов в примитивы.


Строковое преобразование

Строковое преобразование происходит, когда требуется представление чего-либо в виде строки.

Например, alert(value) преобразует значение к строке.

Также мы можем использовать функцию String(value), чтобы преобразовать значение к строке:

let value = true;
alert(typeof value); // boolean

value = String(value); // теперь value это строка "true"
alert(typeof value); // string

Преобразование происходит очевидным образом. false становится "false", null становится "null" и т.п.


Численное преобразование

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

Например, когда операция деления / применяется не к числу:

alert( "6" / "2" ); // 3, строки преобразуются в числа

Можно использовать функцию Number(value), чтобы явно преобразовать value к числу:

let str = "123";
alert(typeof str); // string

let num = Number(str); // становится числом 123

alert(typeof num); // number

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

Если строка не может быть явно приведена к числу, то результатом преобразования будет NaN.

Например:

let age = Number("Любая строка вместо числа");

alert(age); // NaN, преобразование не удалось

Правила численного преобразования:

Значение Преобразуется в…
undefined NaN
null 0
true / false 1 / 0
string Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0, иначе из непустой строки «считывается» число. При ошибке результат NaN.

Примеры:

alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN (ошибка чтения числа на месте символа "z")
alert( Number(true) ); // 1
alert( Number(false) ); // 0

Учтите, что null и undefined ведут себя по-разному. Так, null становится нулём, тогда как undefined приводится к NaN.

Большинство математических операторов также производит данное преобразование, как мы увидим в следующей главе.


Логическое преобразование

Логическое преобразование самое простое.

Происходит в логических операциях (позже мы познакомимся с условными проверками и подобными конструкциями), но также может быть выполнено явно с помощью функции Boolean(value).

Правило преобразования:

  • Значения, которые интуитивно «пустые», вроде 0, пустой строки, null, undefined и NaN, становятся false.
  • Все остальные значения становятся true.

Например:

alert( Boolean(1) ); // true
alert( Boolean(0) ); // false

alert( Boolean("Привет!") ); // true
alert( Boolean("") ); // false

Заметим, что строчка с нулём "0" — это true

Некоторые языки (к примеру, PHP) воспринимают строку "0" как false. Но в JavaScript, если строка не пустая, то она всегда true.

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // пробел это тоже true (любая непустая строка это true)

Резюме

Существует 3 наиболее широко используемых преобразования: строковое, численное и логическое.

1. Строковое преобразование – происходит, когда нам нужно что-то вывести. Может быть вызвано с помощью String(value). Для примитивных значений работает очевидным образом.

2. Численное преобразование – происходит в математических операциях. Может быть вызвано с помощью Number(value).

Преобразование подчиняется правилам:

Значение Становится…
undefined NaN
null 0
true / false 1 / 0
string Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0, иначе из непустой строки «считывается» число. При ошибке результат NaN.

3. Логическое преобразование – происходит в логических операциях. Может быть вызвано с помощью Boolean(value).

Подчиняется правилам:

Значение Становится…
0, null, undefined, NaN, "" false
любое другое значение true

Большую часть из этих правил легко понять и запомнить. Особые случаи, в которых часто допускаются ошибки:

  • undefined при численном преобразовании становится NaN, не 0.
  • "0" и строки из одних пробелов типа " " при логическом преобразовании всегда true.

В этой главе мы не говорили об объектах. Мы вернёмся к ним позже, в главе Преобразование объектов в примитивы, посвящённой только объектам, сразу после того, как узнаем больше про основы JavaScript.