Вы здесь: Главная » JavaScript » Преобразование типов данных в JavaScript

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

Поскольку в JavaScript нет строгой типизации данных, как в С++, например, или в ActionScript, который работает во Flash на основе той же спецификации ECMAScript, что и JavaScript. Поэтому в JS любая переменная в любой момент времени может получить новое значение, которое может отличаться не только по сути, но и по типу данных.

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

Автоматическое преобразование типов данных в JavaScript

JavaScript может приводить примитивные значения к различным типам данных в зависимости от контекста.

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

Тогда строка '2' будет преобразована в число, а 2 действительно равно 2, и это истина (true).

При использовании строгого равенства мы, напротив, получим false, т.к. JS оценивает в этом случае и тип данных, а не только значение:

Используем операцию сложения числа со строкой (часто бывает при вводе данных в полях формы или в методе prompt()):

В этом случае число 16 будет преобразовано в строку "16", и данная запись вернет "161", а не предполагаемые 17. JavaScript здесь просто выполняет объединение строк. Такая операция называется конкатенация от англ. concatenate - объединять.

Рассмотрим, что будет при вычитании из числа строки:

Операция вернет 0, потому что произойдет автоматическое преобразование строки в число.

Если же мы попытаемся вычесть из числа строку из символов:

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

Если используются логические операции и выражения, то переменные или их значения вычисляются до их истинных или ложных значений. Значения, возвращающие false, включают в себя: 0, null, undefined, '' (пустая строка), false, NaN. Все остальные значения возвращают true.

Допустим, нужно сделать выбор из следующих значений:

Результатом этой записи будет 1. Интерпретатор JavaScript определит все значения, которые возвращают false, и в итоге вернет единственное истинное значение  —  1. Если последовательность будет иной, вернется первое значение, соответствующее истине, т.е. true:

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

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

Преобразование строки в число

Чаще всего приходится преобразовывать строки в числа. Происходит это потому, что все, что вводит пользователь в формах, например, или в диалоговом окне prompt() - это строка по типу данных. Но значение этой строки может быть числовым. И операции, которые производятся со значением переменной, будут относится к арифметическим:

  • сложение
  • вычитание
  • умножение
  • деление
  • остаток от деления

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

Рассмотрим пример: в поля формы нужно ввести числа и получить результат при клике на кнопку "Сумма".

Сумма чисел

Должно быть, вы заметили, что числовые значения из 2-х полей соединились и , например, при сложении чисел 12 и 65 получилось 1265, а не 77, как ожидалось. Все это произошло потому, что оператор сложения находился между строками "12" и "65". Он и соединил эти 2 значения. И получилось "1265" - вполне ожидаемое с точки зрения JavaScript. Самое интересное, что, если мы рассмотрим другие операции, то арифметические действия с ними будут происходить в JavaScript по правилам математики.

Действия над числами

Чтобы строки, которые "выглядят", как числа, преобразовать в числовой тип, существует несколько возможностей. Проверять их будем на примере суммы 2-х чисел и с помощью оператора typeof.

Способ 1. Метод Number()

Способ 2. Методы parseInt() и parseFloat()

Метод parseInt() не только преобразует строку в число, но еще и отделяет целую часть от дробной. Метод parseFloat() преобразует строку в число с плавающей точкой, или дробной частью. Кроме того, эти методы отделяют часть строки от числа, если строка начинается с цифр. Если строка начинается с букв, то оба метода возвращают NaN (Not a Number).

Способ 3. Унарный плюс

Очень простой способ преобразовать строку в число. Нужно просто добавить знак "+" перед переменной строкового типа, которая содержит в себе цифры (но не буквы!).

Способ 4. Умножение/деление на единицу

Как известно из математики, при умножении или делении числа на 1 значение числа не меняется. Поэтому для преобразования строки в число можно записать следующее:

Как видно, во втором и третьем случае мы уже видим числовой, а не строковый тип данных.

Как правило, умножать на 1 используют чаще, т.к. можно сразу записать такое выражение:

Тип нашей переменной nextNum будет number, а вот значением может быть и NaN (Not a Number) в зависимости от того, ввел ли пользователь число или другие символы.

Способ 5. Побитовые операторы.

Двойная тильда ~~. Побитовое НЕ

С помощью этого способа можно не только преобразовать строку в число, но и отделить целую часть от дробной. Т.е. он работает так же, как и parseInt(). Но, в отличие от этого метода, строку, которая начинается с числа, а заканчивается буквами двойная тильда преобразовывает в 0 (ноль), а не отсекает строковую часть, как parseInt(). Можно сказать, что это аналог округления в меньшую сторону, или замена методу Math.floor().

Побитовое ИЛИ |

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

Преобразование любого значения в логическое (Boolean)

1. Классический способ - использовать Boolean():

2. Простой способ - все, что вам нужно сделать для преобразования любого значения в true или false - это использовать двойной восклицательный знак (!!) . Результат будет зависеть от того, какое именно значение будет перед двойным восклицательным знаком.

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

Сложение и вычитание true/ false

Интересный вариант получается в результате сложения или вычитания логических типов true/ false в выражениях:

В большинстве случаев true преобразуется в 1, а false - в 0. Исключение: сложение со строкой приводит к склеиванию строки и соответствующего значения, а вычитание, как и с числами - к результату в виде NaN (Not a Number).

Преобразование числа в строку

Возможно, вам понадобится не только складывать числа, но и превращать их в строки. Самым простым способом является склеивание числа со строкой.

Способ 1. Конкатенация (склеивание) с пустой строкой

Способ в какой-то степени похож на использование унарного плюса для преобразование строки в число. Только теперь вам нужно поставить перед плюсом пустую строку, которая представляет собой 2 кавычки рядом:

В принципе, при добавлении любой строки к числу с помощью оператора "+" превратит число в строку, но в этом случае вы увидите символы до или после числа.

Способ 2. Использование объекта String()

Как и в случае с объектом Number, число или переменную, в которую оно было занесено, нужно поместить внутрь скобок конструктора String:

Способ 3. Использование метода toString()

У числового класса Number есть метод toString(), который позволяет преобразовать число в строку. При использовании метода toString() без параметра в скобках число будет преобразовано в строку, как есть. Если же вы укажите параметр в виде целого числа от 2 до 36, то метод вернет строку в соответствующей системе счисления.

Код ниже представляет число 255 в 10-тичной, 16-ричной и двоичной системах счисления.

Почитать о методе Number.toString()

javascript-convert-typesОбъект (класс) Number имеет еще ряд методов, которые позволяют различным образом выводить числа, округляя их при этом и возвращая строковое значение. Это методы toFixed()toExponential() и toPrecision().

Способ 4. Использование метода toFixed()

Метод toFixed() предназначен для форматирования числа с фиксированной запятой. Т.е. вы можете указать в качестве параметра в круглых скобках количество знаков после запятой. Метод toFixed() не только сократит количество знаков после запятой, но и округлит значение числа. И, поскольку мы рассматриваем перевод числа в строку, метод toFixed() вернет в результате строку. Это может быть удобным при перерасчете каких-либо сумм в корзине и выводе конечного значения.

Еще примеры

Способ 5. Использование метода toExponential()

Для больших цифр можно использовать метод toExponential(), который возвращает строку в экспоненциальной записи. Этот метод также способен округлять числа до ближайшего большего.

Способ 6. Использование метода toPrecision()

Метод toPrecision() возвращает строку, представляющую число с указанной в скобках точностью.

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

В этой статье рассмотрены варианты явного преобразования типов данных  (или type casting), когда вы специально предпринимаете некие действия, чтобы сделать строку числом или наоборот. Однако в JavaScript есть еще неявное преобразование, когда вы используете оператор сравнения в виде 2-х знаков "равно" (==) , когда сравниваются данные без учете их типов и происходит преобразование данных для сравнения их значений. Можно посмотреть таблицу по ссылке  или ниже:

Автор: Админ

3 комментария

  1. Еще как вариант для преобразования из строки в числовое значение можно умножить строку на 1:

    str=str*1;

    Но этот метод стоит проверить)

    • Спасибо. Добавлено в статью.

  2. Сколько, оказывается, есть способов для преобразования.
    Не знал про тильду.
    И toFixed() не использовал.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *