Последнее обновление: 1.11.2015
Нередко возникает необходимость преобразовать одни данные в другие. Например:
Var number1 = "46"; var number2 = "4"; var result = number1 + number2; console.log(result); //464
Обе переменных представляют строки, а точнее строковые представления чисел. И в итоге мы получим не число 50, а строку 464. Но было бы неплохо, если бы их тоже можно было бы складывать, вычитать, в общем работать как с обычными числами.
В этом случае мы можем использовать операции преобразования. Для преобразования строки в число применяется функция parseInt() :
Var number1 = "46"; var number2 = "4"; var result = parseInt(number1) + parseInt(number2); console.log(result); // 50
Для преобразования строк в дробные числа применяется функция parseFloat() :
Var number1 = "46.07"; var number2 = "4.98"; var result = parseFloat(number1) + parseFloat(number2); console.log(result); //51.05
При этом строка может иметь смешанное содержимое, например, "123hello", то есть в данном случае есть цифры, но есть и обычные символы. Но метод parseInt() все равно попытается выполнить преобразование:
Var num1 = "123hello"; var num2 = parseInt(num1); console.log(num2); // 123
Если методу не удастся выполнить преобразование, то он возвращает значение NaN (Not a Number), которое говорит о том, что строка не представляет число и не может быть преобразована.
С помощью специальной функции isNaN() можно проверить, представляет ли строка число. Если строка не является числом, то функция возвращает true, если это число - то false:
Var num1 = "javascript"; var num2 = "22"; var result = isNaN(num1); console.log(result); // true - num1 не является числом result = isNaN(num2); console.log(result); // false - num2 - это число
Выше мы рассматривали перевод строк в числа в десятичной системе. Однако мы можем переводить числа в любую систему. По умолчанию интерпретатор JavaScript сам отгадывает, в число из какой системы исчисления мы хотим преобразовать строку (как правило, выбирается десятичная система). Но мы можем с помощью второго параметра явно указать, что хотим преобразовать строку в число в определенной системе. Например, преобразование в число в двоичной системе:
Var num1 = "110"; var num2 = parseInt(num1, 2); console.log(num2); // 6
Результатом будет 6, так как 110 в двоичной системе - это число 6 в десятичной.
Теперь напишем небольшую программу, в которой используем операции с переменными:
JavaScript var strSum = prompt("Введите сумму вклада", 1000); var strPercent = prompt("Введите процентную ставку", 10); var sum = parseInt(strSum); var procent = parseInt(strPercent); sum = sum + sum * procent / 100; alert("После начисления процентов сумма вклада составит: " + sum);
С помощью функции prompt() в браузере выводится диалоговое окно с предложением ввести некоторое значение. Второй аргумент в этой функции указывает на значение, которое будет использоваться по умолчанию.
Однако функция prompt() возвращает строку. Поэтому эту строку нам надо преобразовать в число, чтобы выполнить с ней операции.
После открытия страницы в браузере мы увидим приглашение к вводу суммы вклада:
Затем подобное сообщение отобразится и для ввода процента. И в конце программа получит данные, преобразует их в числа и выполнит подсчет.
В JavaScript существуют 2 встроенные функции для преобразования строк в числа: parseFloat() и parseInt() .
parseFloat() принимает аргументом строку, которую необходимо привести к численному типу, и возвращает число типа float. Число должно содержаться в начале строки. Если после числа в строке идут ещё какие-то символы, то они отсекаются. Дробная часть числа должна быть записана через точку (запятая не воспринимается как разделитель). В случае, если parseFloat() не может преобразовать строку, то она возвращает NaN.
Также функция может обработать «число n, умноженное на 10 в степени x», которое в программировании принято записывать через букву E, например: 0.5E6 или 0.5E+6. Степень может быть также отрицательная: 0.5E-6, что равно 0.5*10^-6 или 0.5/1000000.
ParseFloat(""3.78kg"") // 3.78 parseFloat(""kg33"") // NaN parseFloat(""0004.111"") // 4.111 parseFloat(""0x66"") // 0 parseFloat("".5"") // 0.5 parseFloat(""-.5"") // -0.5 parseFloat(""0.5e6"") // 500000 parseFloat(""0.03E+2"") // 3 parseFloat(""3E-4"") // 0.0003 parseFloat(""-3E-4"") // -0.0003
Функция parseInt(string[, radix]) принимает в качестве первого аргумента строку, анализирует её и возвращает целое число (тип integer). Функция пытается анализировать систему счисления, в которой записано число в исходной строке (например, десятичная, восьмеричная или шестнадцатеричная — но не только эти). Также систему счисления можно указать явно, передав её вторым параметром radix. Параметр radix может принимать любое число от 2 до 36 (в системах выше 10-й используются буквы английского алфавита, от A до Z).
Числа типа 1.5e6 функция не обрабатывает так, как parseFloat() .
Ознакомьтесь, пожалуйста, с примерами ниже, чтобы не наколоться на подводные камни, запрятаны в работе функции parseInt() .
ParseInt(""25"") // 25 parseInt(""-25"") // -25 parseInt(""45.12"") // 45 parseInt(""045"",10) // 45 parseInt(""70"",8) // 56 (70 в восьмеричной системе это 56 в десятичной) parseInt(""070"") // 56 (ВАЖНО!!! нуль вначале заставит функцию проанализировать строку как восьмеричное число) parseInt(""88"",8) // NaN (в восьмеричной системе нет цифры 8) parseInt(""a1"") // NaN (ВАЖНО!!! Функция по умолчанию не воспринимает число как 16-ричное, если не дописать в начале строки 0x) parseInt(""a1"",16) // 161 (здесь явно указана система счисления) parseInt(""0xa1"") // 161 (правильный формат 16-ричного числа, можно не указывать второй параметр) parseInt(""099"") // 0 (ВАЖНО!!! Число воспринимается как восьмеричное, но содержащее недопустимые символы) parseInt(""0.5e6"") // 0 (ВАЖНО!!! не работает как parseFloat) parseInt(""ZZ"",36) // 1295 parseInt(""-FF"") // NaN parseInt(""-FF"",16) // -255
Если Вы обрабатываете данные из текстового поля, которые вводит пользователь, всегда используйте parseInt() вместе со вторым параметром radix, это обезопасит Ваш код от неожиданных результатов.
JavaScript - язык с динамической типизацией данных. Это значит, что в одну и ту же переменную можно записывать значения различных типов, при этом тип самой переменной будет меняться. Подобное поведение часто позволяет забыть о различном поведении переменных с разным типом, но помнить об этой особенности всё же необходимо. Покажем это на следующем примере.
console.log(sum(1, 2)); // 3 (тут всё ок) console.log(sum(1, "2")); // 12 (а тут не очень)
Как видно из примера функция sum некорректно себя ведёт, если в качестве хотя бы одного её аргумента передать не число. Дело в том, что при «сложении» числа со строкой, число преобразуется к строке и происходит его конкатенация (склеивание) со вторым операндом.
Чтобы избежать подобных осложнений, можно узнавать тип переменной во время выполнения скрипта и корректировать его поведение, или внимательно следить за типами переменных.
Оператор typeofЭтот унарный оператор принимает в качестве операнда абсолютно любое значение и возвращает его тип в строковой переменной.
В JavaScript существуют следующие типы данных:
| // 1.) object console.log (typeof { } ) ; // object var p = { x: 1 , y: 3 } ; console.log (typeof p) ; // object // 2.) function function sayHello() { console.log ("Hello!" ) ; } console.log (typeof sayHello) ; // function // 3.) string console.log (typeof "JavaScript" ) ; // string // 4.) number console.log (typeof 3.1415 ) ; // number // 5.) boolean console.log (typeof true ) ; // boolean // 6.) undefined var notExistsOne; console.log (typeof notExistsOne) ; // undefined console.log (typeof notExistsTwo) ; // undefined |
// 1.) object console.log(typeof {}); // object var p = {x: 1, y: 3}; console.log(typeof p); // object // 2.) function function sayHello() { console.log("Hello!"); } console.log(typeof sayHello); // function // 3.) string console.log(typeof "JavaScript"); // string // 4.) number console.log(typeof 3.1415); // number // 5.) boolean console.log(typeof true); // boolean // 6.) undefined var notExistsOne; console.log(typeof notExistsOne); // undefined console.log(typeof notExistsTwo); // undefined
Обратите внимание, что undefined это тоже тип данных, который состоит из одного значения.
Приведение типовПод приведением типов в программировании понимают преобразование значения переменной одного типа в значение другого типа.
Часто такое преобразование происходит без контроля со стороны программиста. Это можно было видеть в примере с функцией sum
. Изменение типа происходит, если результат выполнения операции с переменной исходного типа неясен. Например, нельзя точно сказать, что получиться в результате сложения строки с числом, но операция сложения двух чисел очевидна, и в этом случае логично привести число к строке.
Иногда сам программист может изменить тип переменной, применив к ней некоторые операции. Например, операции инкремента или декремента над строкой приведут её к числу.
var c = "not-a-number"; ++c; console.log(typeof c); // NaN
Стоит заметить, что не нужно прибегать к такому способу приведения строки к числу из-за его плохой читабельности и неочевидности. Для этой задачи в js существуют встроенные функции parseInt и parseFloat . В качестве первого аргумента они принимают строку, которую необходимо привести к числу, а в качестве второго необязательного – основание системы счисления, в которой записано число в строке, передаваемой в качестве первого аргумента. Если второй аргумент не указан, то будет считаться, что в строке записано число в десятичной системе счисления.
Функция parseInt используется для преобразования строки в целое число, а функция parseFloat для преобразования в дробное.
| var a = parseInt("10" ) ; console.log ([ "a = " , a, "; typeof a:" , typeof a] .join (" " ) ) ; // a = 10 ; typeof a: number var pi = parseInt("3.1415" ) ; console.log ("pi = " + pi) ; // pi = 3 pi = parseFloat("3.1415" ) ; console.log ("pi = " + pi) ; // pi = 3.1415 |
var a = parseInt("10"); console.log(["a = ", a, "; typeof a:", typeof a].join(" ")); // a = 10 ; typeof a: number var pi = parseInt("3.1415"); console.log("pi = " + pi); // pi = 3 pi = parseFloat("3.1415"); console.log("pi = " + pi); // pi = 3.1415
Обратите внимание, что в строке может находиться любое литеральное числовое значение, в том числе в шестнадцатеричном, восьмеричном или экспоненциальном виде.
| a = parseInt("010" ) ; console.log ("a = " + a) ; // a = 8 a = parseInt("0xAA" ) ; console.log ("a = " + a) ; // a = 170 a = parseFloat("1e-10" ) ; console.log ("a = " + a) ; // a = 1e-10 (1e-10 = 1 * 10 ^ -10 = 0.0000000001) |
a = parseInt("010"); console.log("a = " + a); // a = 8 a = parseInt("0xAA"); console.log("a = " + a); // a = 170 a = parseFloat("1e-10"); console.log("a = " + a); // a = 1e-10 (1e-10 = 1 * 10 ^ -10 = 0.0000000001)
В качестве второго параметра функций parseInt и parseFloat можно указать основание системы счисления.
| a = parseInt("10" , 8 ) ; console.log ("a = " + a) ; // a = 8 a = parseInt("010" , 10 ) ; console.log ("a = " + a) ; // a = 10 a = parseInt("ff" , 16 ) ; console.log ("a = " + a) ; // a = 255 |
a = parseInt("10", 8); console.log("a = " + a); // a = 8 a = parseInt("010", 10); console.log("a = " + a); // a = 10 a = parseInt("ff", 16); console.log("a = " + a); // a = 255
В случае если значение стоящие в строке, которую функции parseInt и parseFloat принимают в качестве первого параметра, не представляет собой числовой литерал, то результатом выполнения этих функций будет значение NaN .
| a = parseInt("not a number" ) ; console.log ("a = " + a) ; // a = NaN a = parseFloat("not a number" ) ; console.log ("a = " + a) ; // a = NaN |
a = parseInt("not a number"); console.log("a = " + a); // a = NaN a = parseFloat("not a number"); console.log("a = " + a); // a = NaN
Строковое преобразованиеВ JavaScript значение любого типа можно привести к строке. Выше уже говорилось о том, что при конкатенации строки с числом, число приводится к строке, и лишь затем происходит конкатенация. Так будет происходить со значением любого типа.
| var str = "Object: " + { } ; console.log (str) ; // Object: str = "Array: " + [ 1 , 2 , 3 ] ; console.log (str) ; // Array: 1,2,3 function sum(a, b) { return a + b; } str = "Function: " + sum; console.log (str) ; /* Function: function sum(a, b) { return a + b; } */ |
var str = "Object: " + {}; console.log(str); // Object: str = "Array: " + ; console.log(str); // Array: 1,2,3 function sum(a, b) { return a + b; } str = "Function: " + sum; console.log(str); /* Function: function sum(a, b) { return a + b; } */
Фактически при приведении объекта к строке неявным образом вызывается метод toString , который так же можно вызвать явно.
| var p = { x: 2 , y: 4 } , str; str = p.toString () ; console.log (typeof str) ; // string console.log (str) ; // str = [ 1 , 2 , 3 ] .toString () ; console.log (typeof str) ; // string console.log (str) ; // 1,2,3 |
var p = {x: 2, y: 4}, str; str = p.toString(); console.log(typeof str); // string console.log(str); // str = .toString(); console.log(typeof str); // string console.log(str); // 1,2,3
Числовое преобразованиеПреобразование в число происходит при выполнении математических операций и при выполнении операции сравнения с приведением типа (==, !=), при этом значение false и пустой массив преобразуются в значение 0 типа number .
var a = true + true + true; // 1 + 1 + 1 console.log(a); // 3
Непустой массив, объект и функция при использовании в арифметических выражениях приводятся к строке.
| var arr = [ 1 , 2 , 3 ] ; console.log (arr + 4 ) ; // 1,2,34 function sum(a, b) { return a + b; } console.log (sum + 5 ) ; // function sum(a, b){return a + b;}5 |
var arr = ; console.log(arr + 4); // 1,2,34 function sum(a, b){return a + b;} console.log(sum + 5); // function sum(a, b){return a + b;}5
Как видно, неявное преобразование типов в js далеко не всегда очевидно, поэтому стоит его избегать, используя функции для явного приведения типов, такие как parseInt , parseFloat и toString .
На этом всё. Как всегда, успехов вам!
