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

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

В этой статье мы рассмотрим наиболее часто используемые явные преобразования строк в числа и чисел в строки.

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

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

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

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

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

Сумма чисел

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

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

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

Способ 1. Конструктор Number()

var someNumber1 = "53",
    someNumber2 = "14";
someNumber1  = Number(someNumber1);
someNumber2  = Number(someNumber2);
alert( someNumber1   + someNumber2 + "\n\ntypeof someNumber1 -  "
 +typeof(someNumber1) +  "\ntypeof someNumber2 -  "
 +typeof(someNumber2) );

var someNumber1 = "53",

someNumber2 = "14";

someNumber1 = Number(someNumber1);

someNumber2 = Number(someNumber2);

alert( someNumber1 + someNumber2 + "\n\ntypeof someNumber1 - "

+typeof(someNumber1) + "\ntypeof someNumber2 - "

+typeof(someNumber2) );

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

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

var ch1 ="123.67", ch2="768.24abc", strNum = "abc564.29";
alert(parseInt(ch1)); //выведет 123
alert(parseInt(ch2)); //выведет 768
alert(parseInt(strNum)); //выведет NaN

//выведет сh1 = 123.67, ch2 = 768.24
alert("ch1 = "+parseFloat(ch1)+", ch2 = "+parseFloat(ch2));
alert("strNum = "+parseFloat()); //выведет strNum = NaN

var ch1 ="123.67", ch2="768.24abc", strNum = "abc564.29";

alert(parseInt(ch1)); //выведет 123

alert(parseInt(ch2)); //выведет 768

alert(parseInt(strNum)); //выведет NaN

//выведет сh1 = 123.67, ch2 = 768.24

alert("ch1 = "+parseFloat(ch1)+", ch2 = "+parseFloat(ch2));

alert("strNum = "+parseFloat()); //выведет strNum = NaN

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

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

var myNum = "10";
myNum = +myNum;
alert(typeof myNum);

var myNum = "10";

myNum = +myNum;

alert(typeof myNum);

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

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

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

var myNum = "385.984",
    myNumStr = "129.34ssd";
alert("Тип переменной в начале: " + typeof myNum + "\nТип переменной после преобразования: " + typeof(~~myNum));
alert("myNum = "+~~myNum);
alert("myNumStr = "+~~myNumStr);

var myNum = "385.984",

myNumStr = "129.34ssd";

alert("Тип переменной в начале: " + typeof myNum + "\nТип переменной после преобразования: " + typeof(~~myNum));

alert("myNum = "+~~myNum);

alert("myNumStr = "+~~myNumStr);

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

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

var len1 = "120.5mm", len2 = "40.7";
alert( typeof len1 + "\nlen1 = " + (len1|0) + typeof ( len1|0) );
alert( typeof len2 + "\nlen2 = " + (len2|0) + typeof ( len2|0) );

var len1 = "120.5mm", len2 = "40.7";

alert( typeof len1 + "\nlen1 = " + (len1|0) + typeof ( len1|0) );

alert( typeof len2 + "\nlen2 = " + (len2|0) + typeof ( len2|0) );

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

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

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

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

var num = 12.5;
var str = ''+12.5;
alert(str+', typeof '+(typeof str));

var num = 12.5;

var str = ''+12.5;

alert(str+', typeof '+(typeof str));

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

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

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

console.log(typeof String(745.34));

1	console.log(typeof String(745.34));

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

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

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

var num = 255;
var str = num.toString();
var str16 = num.toString(16);
var str2 = num.toString(2);
alert("str = "+str+", typeof "+(typeof str)+
"\nstr16 = "+str16+", typeof "+(typeof str16)+
"\nstr2 = "+str2+", typeof "+(typeof str2));
//выведет
// 255 typeof string
// ff typeof string
// 11111111 typeof string

var num = 255;

var str = num.toString();

var str16 = num.toString(16);

var str2 = num.toString(2);

alert("str = "+str+", typeof "+(typeof str)+

"\nstr16 = "+str16+", typeof "+(typeof str16)+

"\nstr2 = "+str2+", typeof "+(typeof str2));

//выведет

// 255 typeof string

// ff typeof string

// 11111111 typeof string

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

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

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

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

var num = 67.893704;
var num1 = num.toFixed();
var num2 = num.toFixed(1);
var num3 = num.toFixed(2);
alert("num1 = "+num1+", typeof "+(typeof num1)+"\nnum2 = "+num2+
", typeof "+(typeof num2)+"\nnum3 = "+num3+", typeof "+(typeof num3));
//выведет
//68 typeof string
//67.89 typeof string
//67.89 typeof string

var num = 67.893704;

var num1 = num.toFixed();

var num2 = num.toFixed(1);

var num3 = num.toFixed(2);

alert("num1 = "+num1+", typeof "+(typeof num1)+"\nnum2 = "+num2+

", typeof "+(typeof num2)+"\nnum3 = "+num3+", typeof "+(typeof num3));

//выведет

//68 typeof string

//67.89 typeof string

Еще примеры

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

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

var num = 9067983000;
var num1 = num.toExponential();
var num2= num.toExponential(2);
var num3 = num.toExponential(4);
alert("num1 = "+num1+", typeof "+(typeof num1)+
"\nnum2 = "+num2+", typeof "+(typeof num2)+
"\nnum3 = "+num3+", typeof "+(typeof num3));
//выведет 
//9.067983e+9 typeof string
//9.07e+9 typeof string
//9.0680e+9 typeof string

var num = 9067983000;

var num1 = num.toExponential();

var num2= num.toExponential(2);

var num3 = num.toExponential(4);

alert("num1 = "+num1+", typeof "+(typeof num1)+

"\nnum2 = "+num2+", typeof "+(typeof num2)+

"\nnum3 = "+num3+", typeof "+(typeof num3));

//выведет

//9.067983e+9 typeof string

//9.07e+9 typeof string

//9.0680e+9 typeof string

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

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

var num = 0.041754;
var num1 = num.toPrecision();
var num2= num.toPrecision(2);
var num3 = num.toPrecision(3);
alert("num1 = "+num1+", typeof "+(typeof num1)+
"\nnum2 = "+num2+", typeof "+(typeof num2)+"\nnum3 = "+
num3+", typeof "+(typeof num3));
//выведет
//0.041754, typeof string
//0.042, typeof string
//0.0418, typeof string

var num = 0.041754;

var num1 = num.toPrecision();

var num2= num.toPrecision(2);

var num3 = num.toPrecision(3);

alert("num1 = "+num1+", typeof "+(typeof num1)+

"\nnum2 = "+num2+", typeof "+(typeof num2)+"\nnum3 = "+

num3+", typeof "+(typeof num3));

//выведет

//0.041754, typeof string

//0.042, typeof string

//0.0418, typeof string

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

В этой статье рассмотрены варианты явного преобразования типов данных (или type casting), когда вы специально предпринимаете некие действия, чтобы сделать строку числом или наоборот. Однако в JavaScript есть еще неявное преобразование, когда вы используете оператор сравнения в виде 2-х знаков "равно" (==) , когда сравниваются данные без учете их типов и происходит преобразование данных для сравнения их значений. Можно посмотреть таблицу по ссылке или ниже:
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="lazy lazy-hidden mce_SELRES_start"></span>

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

Павлюченко Сергей 13 октября, 2019
Еще как вариант для преобразования из строки в числовое значение можно умножить строку на 1:
str=str*1;
Но этот метод стоит проверить)
Ответить
Игорь 29 декабря, 2018
Сколько, оказывается, есть способов для преобразования.
Не знал про тильду.
И toFixed() не использовал.
Ответить

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

Сумма чисел

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

Способ 1. Конструктор Number()

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

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

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

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

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

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

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

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

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

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

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

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

Вам может понравиться

Замена галереи Fancybox на чистом JavaScript

Использование в JavaScript методов bind(), call(), apply()

Способы добавления плавной прокрутки страницы в CSS и JavaScript

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

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