JavaScript – язык с динамической типизацией данных. Это значит, что в одну и ту же переменную можно записывать значения различных типов, при этом тип самой переменной будет меняться.
Автоматическое преобразование типов является одной из самых мощных возможностей JavaScript, но и самой потенциально опасной для начинающего программиста.
В этом уроке научимся преобразовать примитивные типы данных JavaScript, включая числа, строки и логические элементы.

Преобразование типов данных может быть явным и неявным. Так как JavaScript – это слабо типизированный или динамический язык программирования, значения могут быть конвертированы между различными типами автоматически. Это называют неявным приведением типов. Обычно неявное преобразование происходит, когда в выражениях используют значения различных типов.

Явное преобразование – это когда преобразование типов данных выполняет сам программист. Явное преобразование иначе называют приведением типов:

Выполнить код »

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

Вместо функций для явного преобразования типов данных можно использовать операторы. Например, если один из операндов оператора сложения + является строкой, то другой операнд также преобразуется в строку. Операции инкремента -- или декремента ++ над строкой приведут её к числу. Унарный оператор плюс + преобразует свой операнд в число, а унарный оператор отрицания ! преобразует операнд в логическое значение и инвертирует его:

Выполнить код »

Для того чтобы явно преобразовать значение в строку, можно воспользоваться функцией String(). Для неявного преобразования применяется оператор +, у которого один из аргументов строка. В этом случае + приводит к строке и другой аргумент:

Выполнить код »

В Javascript явное преобразование примитивных значений к числу (не обязательно целому, может быть и дробное) осуществляется c помощью функции Number():

Выполнить код »

Преобразование значений с помощью функции Number() осуществляется по следующим правилам:

  • Числа возвращаются без каких либо изменений.
  • true преобразуется в 1.
  • b>false преобразуется в 0.
  • Значение null преобразуется в 0.
  • Значение undefined преобразуется в NaN.

Преобразование строк также осуществляется по своим правилам:

  • При преобразовании строк в числа интерпретатор обрезает пробелы, а также управляющие символы (перенос строки \n, табуляция \t, вертикальная табуляция \v и др.), которые находятся в начале или в конце строки.
  • Если строка содержит только цифры с унарным оператором - или + либо без знака, она всегда преобразуется в целое десятичное число (отрицательное или положительное). Начальные нули игнорируются, например "007" преобразуется в 7.
  • Если строка представляет собой число в шестнадцатеричном формате, она преобразуется в соответствующее целое десятичное число.
  • Пустая строка преобразуется в 0.
  • Если строка содержит что-то отличное от предыдущих вариантов, например инкремент (декремент), она преобразуется в NaN.

Неявное приведение значения к числовому типу в JavaScript применяется, чаще чем преобразование в строку или в логическое значение. Преобразование к типу Number выполняют следующие операторы:

  • Операторы сравнения <, >, <=, >=.
  • Арифметические операторы +, -, *, /, %.
  • Унарный оператор +.
  • Побитовые операторы ^, |, &, ~.
  • Операторы нестрогого равенства == и неравенства !=.

Выполнить код »

Обратите внимание: Оператор + с двумя операндами не вызывает неявное преобразование к числовому типу, если хотя бы один оператор является строкой.
Оператор == не производит неявного преобразования в число, если оба операнда являются строками.

Для того, чтобы явно преобразовать значение к логическому типу, используют функцию Boolean():

  • Следующие значения в результате преобразования дают логическое false: undefined, null, 0, -0, NaN, "".
  • Значение false возвращается без изменений.
  • Все остальные значения в результате преобразования дают логическое true (включая объекты, функции, массивы, даты, значения типа Symbol, пустые объекты и пустые массивы).

Выполнить код »

Неявное преобразование происходит в логическом контексте либо вызывается логическими операторами ||, &&, !:

Выполнить код »
  • Первая особенность работы с типами в JavaScript, заключается в том, что существует три вида преобразований:
    1. В строку: String(значение) – в строковом контексте или при сложении со строкой.
    2. В число: Number(значение) – в численном контексте, включая унарный плюс +значение.
    3. В логическое значение: Boolean(значение) – в логическом контексте, можно также преобразовать двойным отрицанием: !!значение.
  • Любое значение, не входящее в этот список: false, undefined, null, 0, -0, NaN, "", преобразуется в true.
  • Оператор == не производит неявного преобразования в число, если оба операнда являются строками.
  • Оператор + с двумя операндами не вызывает неявное преобразование к числовому типу, если хотя бы один оператор является строкой.
  • При применении оператора == к null или undefined преобразования в число не производится. Значение null равно только null или undefined и не равно ничему больше.
  • При преобразовании в числа значений null и undefined: null преобразуется в число 0, в то время как undefined – в NaN (не число).

  • Какой результат будет в следующем списке выражений? Проверьте ваши знания о том, как работает приведение типов в JavaScript.

    true + false
    8 / "2"
    "number" + 5 + 1
    5 + 1 + "number"
    7 && 2
    2 && 7
    null + 1
    undefined + 1
    "five" + + "two"
    'true' == true
    false == 'false'
    null == ''
    !!"false" == !!"true"
    "4" - 3
    "4px" - 3
    0 || "0" && 1
    
    
    Показать решение

    Решение:

    К выражениям добавлены соответствующие комментарии. Последнее выражение рассмотрим отдельно: 0 || "0" && 1. Логические операторы || и && приводят значения операндов к логическому типу, но при этом возвращают исходные операнды, которые имеют тип, отличный от логического. Значение 0 ложно, а '0' – истинно, т. к. является строкой. 1 так же преобразуется в true:

    0 || "0" && 1  
    =>  (0 || "0") && 1
    => (false || true) && true  
    => "0" && 1
    => true && true             
    => 1

    Выполнить код »

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).