В 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 "строку в число" существует в значительно более широком контексте.
Арсенал методов для преобразования строк в числа не велик, но достаточен во всех простых случаях. Здесь JavaScript (для начинающих особенно) - это путь от от простому к сложному на практичных примерах.
Вам будет интересно:
В примере описаны четыре разных строки. В первом блоке вывода тип каждой переменных функция typeof определяется как string. Затем каждая строка очень просто преобразуется в число. Во втором блоке вывода видны изменения в переменных после преобразования, их тип стал числом. Пример преобразования JavaScript parseFloat особенно показателен: было "12e+3", стало "12000".
Изменения при преобразования строки в число могут быть существенны! Но имеют значение только первые символы: они должны быть цифровыми. Если нет ни одного цифрового символа, результат будет NaN.
Обратное преобразование строки, «ставшей» числом, не всегда такая же строка. Этот момент можно использовать для проверки корректности ввода численной информации.
Здравствуйте, дорогие читатели. Сегодня я напишу, как преобразовывается в javascript
строка в число. Это делается с помощью функции Number , сейчас я покажу ее использование на примере.
Также предлагаю посмотреть видео-версию этой статьи:
Как вы знаете, в javascript есть числовой и строковый тип данных. Давайте попробуем создать две переменных, в которые сохраним числа, а потом выведем результат на экран.
Var a = 5; var b = 12; document.write(a + b);
Каким будет результат? 17, что и вывел нам браузер. Итак, это числовые данные, поэтому браузер успешно их сложил. А теперь давайте создадим другие две переменные, в которые положим такие же значения, но в кавычках. Я напомню, все строки в javascript пишутся именно в кавычках.
Var c = "5";
var d = "12";
document.write("
" + c + d);
Теперь браузер считает наши данные строками и если мы их сложим, то просто будут сложены две строки и мы получим 512, что не есть правильным результатом если бы складывались числа, но является правильным, если поставить вместе две строки.
Тут все просто, создадим очередные две переменные, в которые запишем то же значение, что задано переменным c и d , но пропустив их через метод Number:
Var e = Number(c); var f = Number(d); document.write(e + f);
Если вы теперь попробуете вывести результат от этого сложения на экран, то выведется 17. Все потому, что наш метод успешно отработал и преобразовал строку в число. Хочу отметить, что если вы напишите так:
Document.write("
" + e + f);
То на экран выведется 512, потому что при сложении строк и чисел ВСЕГДА результат преобразовывается в строку. Если вы хотите добавить перенос строки и при этом сохранить правильный результат, можно записать все в две строку или в одно следующим образом:
Document.write("
" + (e + f));
Если взять числа в скобки, то они не будут преобразованы в строки и успешно сохранят свои свойства. Вот такая вот короткая статья у меня сегодня. Надеюсь, javascript стал для вас чуточку понятней.
The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
An integer parsed from the given string .
If the radix is smaller than 11 , and the first non-whitespace character cannot be converted to a number, NaN is returned.
The parseInt function converts its first argument to a string, parses that string, then returns an integer or NaN .
If not NaN , the return value will be the integer that is the first argument taken as a number in the specified radix . (For example, a radix of 10 converts from a decimal number, 8 converts from octal, 16 from hexadecimal, and so on.)
For radices above 10 , letters of the English alphabet indicate numerals greater than 9 . For example, for hexadecimal numbers (base 16), A through F are used.
If parseInt encounters a character that is not a numeral in the specified radix , it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt truncates numbers to integer values. Leading and trailing spaces are allowed.
Because some numbers use the e character in their string representation (e.g. 6.022e23 for 6.022 × 10 23), using parseInt to truncate numbers will produce unexpected results when used on very large or very small numbers. parseInt should not be used as a substitute for Math.floor() .
parseInt understands exactly two signs: + for positive, and - for negative (since ECMAScript 1). It is done as an initial step in the parsing after whitespace is removed. If no signs are found, the algorithm moves to the following step; otherwise, it removes the sign and runs the number-parsing on the rest of the string.
If radix is undefined , 0 , or unspecified, JavaScript assumes the following:
If the first character cannot be converted to a number, parseInt returns NaN unless the radix is bigger than 10 .
For arithmetic purposes, the NaN value is not a number in any radix. You can call the isNaN function to determine if the result of parseInt is NaN . If NaN is passed on to arithmetic operations, the operation result will also be NaN .
To convert a number to its string literal in a particular radix, use thatNumber .toString(radix) .
The following examples all return 15:
ParseInt("0xF", 16) parseInt("F", 16) parseInt("17", 8) parseInt(021, 8) parseInt("015", 10) // but `parseInt(015, 10)` will return 13 parseInt(15.99, 10) parseInt("15,123", 10) parseInt("FXX123", 16) parseInt("1111", 2) parseInt("15 * 3", 10) parseInt("15e2", 10) parseInt("15px", 10) parseInt("12", 13)
The following examples all return NaN:
ParseInt("Hello", 8) // Not a number at all parseInt("546", 2) // Digits other than 0 or 1 are invalid for binary radix
The following examples all return -15:
ParseInt("-F", 16) parseInt("-0F", 16) parseInt("-0XF", 16) parseInt(-15.1, 10) parseInt("-17", 8) parseInt("-15", 10) parseInt("-1111", 2) parseInt("-15e1", 10) parseInt("-12", 13)
The following examples all return 4:
ParseInt(4.7, 10) parseInt(4.7 * 1e22, 10) // Very large number becomes 4 parseInt(0.00000000000434, 10) // Very small number becomes 4
The following example returns 224:
ParseInt("0e0", 16) parseInt("123_456") // 123
Although discouraged by ECMAScript 3 and forbidden by ECMAScript 5, many implementations interpret a numeric string beginning with a leading 0 as octal. The following may have an octal result, or it may have a decimal result. Always specify a radix to avoid this unreliable behavior.
ParseInt("0e0") // 0 parseInt("08") // 0, because "8" is not an octal digit.
The ECMAScript 5 specification of the function parseInt no longer allows implementations to treat Strings beginning with a 0 character as octal values. ECMAScript 5 states:
The parseInt function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. Leading white space in string is ignored. If radix is undefined or 0 , it is assumed to be 10 except when the number begins with the character pairs 0x or 0X , in which case a radix of 16 is assumed.
This differs from ECMAScript 3, which discouraged but allowed octal interpretation.
Many implementations have not adopted this behavior as of 2013, and because older browsers must be supported, always specify a radix .
It is sometimes useful to have a stricter way to parse integers.
Regular expressions can help:
Function filterInt(value) { if (/^[-+]?(\d+|Infinity)$/.test(value)) { return Number(value) } else { return NaN } } console.log(filterInt("421")) // 421 console.log(filterInt("-421")) // -421 console.log(filterInt("+421")) // 421 console.log(filterInt("Infinity")) // Infinity console.log(filterInt("421e+0")) // NaN console.log(filterInt("421hop")) // NaN console.log(filterInt("hop1.61803398875")) // NaN console.log(filterInt("1.61803398875")) // NaN
| Specification | Status | Comment |
|---|---|---|
| ECMAScript 1st Edition (ECMA-262) | Standard | Initial definition. |
| ECMAScript 5.1 (ECMA-262) |
Standard | |
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of "parseInt" in that specification. |
Standard | |
| ECMAScript Latest Draft (ECMA-262) The definition of "parseInt" in that specification. |
Draft |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | Node.js | |
| parseInt | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes | |
| Parses leading-zero strings are decimal, not octal | Chrome Full support 23 | Edge Full support 12 | Firefox Full support 21 | IE Full support 9 | Opera Full support Yes | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 25 | Firefox Android Full support 21 | Opera Android Full support Yes | Safari iOS Full support 6 | Samsung Internet Android Full support Yes | nodejs Full support Yes |
JavaScript - язык с динамической типизацией данных. Это значит, что в одну и ту же переменную можно записывать значения различных типов, при этом тип самой переменной будет меняться. Подобное поведение часто позволяет забыть о различном поведении переменных с разным типом, но помнить об этой особенности всё же необходимо. Покажем это на следующем примере.
console.log(sum(1, 2)); // 3 (тут всё ок) console.log(sum(1, "2")); // 12 (а тут не очень)
Как видно из примера функция sum некорректно себя ведёт, если в качестве хотя бы одного её аргумента передать не число. Дело в том, что при «сложении» числа со строкой, число преобразуется к строке и происходит его конкатенация (склеивание) со вторым операндом.
Чтобы избежать подобных осложнений, можно узнавать тип переменной во время выполнения скрипта и корректировать его поведение, или внимательно следить за типами переменных.
Этот унарный оператор принимает в качестве операнда абсолютно любое значение и возвращает его тип в строковой переменной.
В 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 .
На этом всё. Как всегда, успехов вам!
