Разница ParseInt, ParseFloat и Number

1,00
р.
Всем привет! Скажите, в чём разница между функциями ParseFloat, ParseInt и Number? В результате этих функций строка преобразуется в число.


alert('3' + 2)
//--------------------------//
alert(parseFloat('3') + 2)
alert(parseInt('3') + 2)
alert(Number('3') + 2)


Ответ
В двух словах:
parseFloat и parseInt преобразуют в число максимальную соответствующую подстроку, с начала строки, отбросив предварительно пробельные символы.
Number - целую строку, так же отбросив предварительно пробельные символы.
Различие можно увидеть на примере


//--------------------------//
console.log(parseFloat('3a'))
console.log(parseInt('3a'))
console.log(Number('3a'))


Развернутый ответ
Для более полного понимания различий можно обратиться к спецификации
Начать можно с конструктора Number
Если данная функция вызывается без new, то
Если не передали параметров результат будет +0 Если параметр (value) передан, то будет возвращен результат вызова ToNumber(value)
Где ToNumber(value) - это абстрактная функция, вызываемая, когда необходимо получить числовое значение.
Стоит обратить внимание, что, в отличие от рассмотренных ниже функций, параметр value будет приведен к строке только в некоторых случаях.
В случае, если value был приведен к строке, эта строка должна удовлетворять грамматике для StringNumericLiteral. Отличие данной грамматики от обычного NumericLiteral, который определяет правила для литералов чисел, в том, что:
StringNumericLiteral может включать в себя лидирующие и/или оконечные пробелы и/или разделители строк. StringNumericLiteral в десятичном виде может иметь любое количество лидирующих нулей. StringNumericLiteral в десятичном виде может включать + или - для указания знака числа. StringNumericLiteral с пустой строкой, либо содержащий только пробельный символы будет конвертирован в +0. Infinity и -Infinity будут распознаны как StringNumericLiteral, но не как NumericLiteral.

Функция parseInt
Отличительной особенностью данной функции является возможность передать вторым параметром основание системы счисления, в которой находится число в строке. По умолчанию данный параметр имеет значение: 10.
Стоит отметить, что первый аргумент всегда приводится к строке.
Алгоритм работы данной функции весьма прост:
Отбрасываются пробельные символы с начала строки Определяется знак числа Выставляет флаг нужно ли отбрасывать префикс, в том случае, если основание равно 16 или не передано. Если нужно отбрасывать префикс:
отбрасываются первые два символа, если они равны 0x или 0X основанию устанавливается значение 16
Если в строке присутствуют символы не соответствующие основанию, то выбирается подстрока, перед первым таким символом. Вычисляется математическое целочисленное значение, соответствующее выбранной подстроке. Символы A-Z и a-z используются для представления значений от 10 до 35 в соответствующих системах счисления. полученный результат умножается на знак и возвращается.
Как можно заметить, в отличие от описанной выше функции Number, для разбора используется не вся строка, распознается только префикс для шестнадцатеричных чисел, но при этом добавляется возможность указать основание системы счисления от 2 до 36

Функция parseFloat
Как и в parseInt, в данной функции всегда идет приведение аргумента к строке.
Алгоритм схож с работой функции parseInt
Отбрасываются пробельные символы с начала строки Определяется удовлетворяет ли оставшаяся строка или любой из ее префиксов синтаксису StrDecimalLiteral
если нет, возвращается NaN если да - берется максимальный префикс.
Возвращается соответствующее число.
Как можно заметить, по сравнению с Number, для разбора используется часть строки, не допустимы никакие префиксы вроде 0x, 0b, 0o. В отличие от parseInt допустима e-нотация

Больше примеров


function showOutput(str, base) {
console.log('строка:"' + str + '"', 'Number:', Number(str), 'parseInt:', parseInt(str, base), 'base:', base || 10, 'parseFloat:', parseFloat(str))
}

showOutput(' ')
showOutput('10')
showOutput('3a')
showOutput('0x10')
showOutput('0x10s')
showOutput('0o10')
showOutput('1e2')
showOutput('1e2', 16) .as-console-wrapper {
max-height: 100% !important
top: 0
}