JavaScript: Преобразование типов данных. Как преобразовывается в javascript строка в число? Javascript приведение к строке

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

Обратите внимание, что 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

Обратите внимание, что в строке может находиться любое литеральное числовое значение, в том числе в шестнадцатеричном, восьмеричном или экспоненциальном виде.

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

В случае если значение стоящие в строке, которую функции 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

В JavaScript значение любого типа можно привести к строке. Выше уже говорилось о том, что при конкатенации строки с числом, число приводится к строке, и лишь затем происходит конкатенация. Так будет происходить со значением любого типа.

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 = .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 = ; 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 .

На этом всё. Как всегда, успехов вам!

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

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

Последнее обновление: 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. Один из способов - проанализировать его, а другой способ - изменить его тип на число. Все трюки в других ответах (например, унарный плюс) подразумевают неявное принуждение типа строки к числу. Вы также можете сделать то же самое с функцией Number.

Синтаксический

Var parsed = parseInt("97", 10);

ParseInt и parseFloat являются две функции, которые используются для разбора строк в числа. Синтаксический анализ остановится молча, если он попадет в символ, который он не распознает, что может быть полезно для синтаксического анализа строк, например «92px», но это также несколько опасно, поскольку оно не даст вам никакой ошибки при плохом вводе, вместо этого вы "вернем NaN, если строка не начинается с числа. Пробел в начале строки игнорируется. Вот пример того, что делает что-то другое, что вы хотите, и не давая никаких указаний, что все пошло не так:

Var widgetsSold = parseInt("97,800", 10); // widgetsSold is now 97

Это хорошая практика, чтобы всегда указывать десятичную в качестве второго аргумента. В старых браузерах, если строка начиналась с 0, она была бы интерпретирована как восьмеричная, если бы не было указано значение radix, которое привлекло много людей врасплох. Поведение для шестнадцатеричного запуска запускается, если строка начинается с 0x, если не указано значение radix. 0xff . Стандарт фактически изменился с помощью ecmascript 5, поэтому современные браузеры больше не запускают восьмеричные, когда есть ведущее 0, если не указано никаких оснований. parseInt понимает радики до основания 36, и в этом случае как верхние, так и строчные буквы обрабатываются как эквивалентные.

Изменение типа струны на номер

Всех других приемов, упомянутых выше, которые не используют ParseInt, вовлекает неявно принуждать строку в число. Я предпочитаю делать это явно,

Var cast = Number("97");

Это отличается от методов анализа (хотя он по-прежнему игнорирует пробелы). Это более строгий: если он не понимает всю строку, чем возвращает NaN , поэтому вы не можете использовать ее для строк, таких как 97px . Поскольку вам требуется примитивное число, а не объект обертки Number, убедитесь, что перед функцией Number не ставьте new .

Очевидно, что преобразование в число дает значение, которое может быть float, а не целое число, поэтому, если вы хотите целое число, вам нужно его изменить. Есть несколько способов сделать это:

Var rounded = Math.floor(Number("97.654")); // other options are Math.ceil, Math.round var fixed = Number("97.654").toFixed(0); // rounded rather than truncated var bitwised = Number("97.654")|0; // do not use for large numbers

Любого оператор побитового (здесь я сделал побитовую или, но вы можете также сделать двойное отрицание, как в предыдущем ответе или Bitshift) преобразует значение 32-битное целое число, и большинство из них преобразуется в целое число со знаком. Обратите внимание, что это не будет хотеть, чтобы вы искали большие целые числа . Если целое число не может быть представлено в 32 битах, оно будет завершено.

~~"3000000000.654" === -1294967296 // This is the same as Number("3000000000.654")|0 "3000000000.654" >>> 0 === 3000000000 // unsigned right shift gives you an extra bit "300000000000.654" >>> 0 === 3647256576 // but still fails with larger numbers

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

Math.floor("3000000000.654") === 3000000000 // This is the same as Math.floor(Number("3000000000.654"))

Имейте в виду, что все эти методы понимают экспоненциальной нотации, так 2e2 является 200 , а не NaN. Кроме того, Number понимает «Бесконечность», в то время как методы анализа не делают этого.

Пользовательские

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

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