Поскольку в JavaScript нет строгой типизации данных, как в С++, например, или в ActionScript, который работает во Flash на основе той же спецификации ECMAScript, что и JavaScript, в последнем любая переменная в любой момент времени может получить новое значение, которое может отличаться не только по сути, но и по типу данных.
В этой статье мы рассмотрим наиболее часто используемые явные преобразования строк в числа и чисел в строки.
Преобразование строки в число
Чаще всего приходится преобразовывать строки в числа. Происходит это потому, что все, что вводит пользователь в формах, например, или в диалоговом окне prompt()
- это строка по типу данных. Но значение этой строки может быть числовым. И операции, которые производятся со значением переменной, будут относится к арифметическим:
- сложение
- вычитание
- умножение
- деление
- остаток от деления
При использовании последних 4 операций вступает в действие механизм автоматического преобразования типов данных, а вот в случае со сложением срабатывает конкатенация - склеивание строк.
Рассмотрим пример: в поля формы нужно ввести числа и получить результат при клике на кнопку "Сумма".
Сумма чисел
Должно быть, вы заметили, что числовые значения из 2-х полей соединились и , например, при сложении чисел 12 и 65 получилось 1265, а не 77, как ожидалось. Все это произошло потому, что оператор сложения находился между строками "12" и "65". Он и соединил эти 2 значения. И получилось "1265" - вполне ожидаемое с точки зрения JavaScript. Самое интересное, что, если мы рассмотрим другие операции, то арифметические действия с ними будут происходить в JavaScript по правилам математики.
Действия над числами
Чтобы строки, которые "выглядят", как числа, преобразовать в числовой тип, существует несколько возможностей. Проверять их будем на примере суммы 2-х чисел и с помощью оператора typeof
.
Способ 1. Конструктор Number()
1 2 3 4 5 6 7 | 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).
1 2 3 4 5 6 7 8 | 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.Унарный плюс
Очень простой способ преобразовать строку в число. Нужно просто добавить знак "+" перед переменной строкового типа, которая содержит в себе цифры (но не буквы!).
1 2 3 | var myNum = "10"; myNum = +myNum; alert(typeof myNum); |
Способ 4. Побитовые операторы.
Двойная тильда ~~. Побитовое НЕ
С помощью этого способа можно не только преобразовать строку в число, но и отделить целую часть от дробной. Т.е. он работает так же, как и parseInt(). Но, в отличие от этого метода, строку, которая начинается с числа, а заканчивается буквами двойная тильда преобразовывает в 0 (ноль), а не отсекает строковую часть, как parseInt(). Можно сказать, что это аналог округления в меньшую сторону, или замена методу Math.floor()
.
1 2 3 4 5 | var myNum = "385.984", myNumStr = "129.34ssd"; alert("Тип переменной в начале: " + typeof myNum + "\nТип переменной после преобразования: " + typeof(~~myNum)); alert("myNum = "+~~myNum); alert("myNumStr = "+~~myNumStr); |
Побитовое ИЛИ |
Так же, как и двойная тильда может использоваться для округления числа в меньшую сторону, или, что то же самое, отделения целой части от дробной. Превращает строку в число. Если в строке, кроме цифр, встречаются буквы, преобразует значение переменной в 0 (ноль).
1 2 3 | 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 кавычки рядом:
1 2 3 | var num = 12.5; var str = ''+12.5; alert(str+', typeof '+(typeof str)); |
В принципе, при добавлении любой строки к числу с помощью оператора "+" превратит число в строку, но в этом случае вы увидите символы до или после числа.
Способ 2. Использование объекта String()
Как и в случае с объектом Number, число или переменную, в которую оно было занесено, нужно поместить внутрь скобок конструктора String:
1 | console.log(typeof String(745.34)); |
Способ 3. Использование метода toString()
У числового класса Number
есть метод toString()
, который позволяет преобразовать число в строку. При использовании метода toString()
без параметра в скобках число будет преобразовано в строку, как есть. Если же вы укажите параметр в виде целого числа от 2 до 36, то метод вернет строку в соответствующей системе счисления.
Код ниже представляет число 255 в 10-тичной, 16-ричной и двоичной системах счисления.
1 2 3 4 5 6 7 8 9 10 11 | 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()
вернет в результате строку. Это может быть удобным при перерасчете каких-либо сумм в корзине и выводе конечного значения.
1 2 3 4 5 6 7 8 9 10 | 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 |
Способ 5. Использование метода toExponential()
Для больших цифр можно использовать метод toExponential()
, который возвращает строку в экспоненциальной записи. Этот метод также способен округлять числа до ближайшего большего.
1 2 3 4 5 6 7 8 9 10 11 | 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()
возвращает строку, представляющую число с указанной в скобках точностью.
1 2 3 4 5 6 7 8 9 10 11 | 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-х знаков "равно" (==) , когда сравниваются данные без учете их типов и происходит преобразование данных для сравнения их значений. Можно посмотреть таблицу по ссылке или ниже:
Еще как вариант для преобразования из строки в числовое значение можно умножить строку на 1:
str=str*1;
Но этот метод стоит проверить)
Сколько, оказывается, есть способов для преобразования.
Не знал про тильду.
И toFixed() не использовал.