Как преобразовать строку в число в JavaScript?

В JavaScript существует множество способов преобразования типов данных. Мы уже рассмотрели, как преобразовать число в строку. В этом коротком руководстве мы рассмотрим, как можно преобразовать строку в число в JavaScript.

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

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

В этом кратком совете мы рассмотрим три способа преобразования строки в число.

Преобразование строки в число с помощью числа

Самый прямой способ преобразовать строку в число в JavaScript — использовать встроенную Numberфункцию-конструктор. Например:

const str = "10"
console.log(str); // "10"
console.log(typeof str); // "string"

const number = Number(str);
console.log(number); // 10
console.log(typeof number); // "number"

При регистрации значения str и его типа в консоли результат будет 10 в виде строки и string соответственно. После его преобразования результат 10 в виде числа и number соответственно.

Вы можете увидеть пример в действии в следующей демонстрации CodePen.

document.getElementById("variableValue").textContent = str;
document.getElementById("originalType").textContent = typeof str;
const number = Number(str);
document.getElementById("afterConvertValue").textContent = number;
document.getElementById("afterConvert").textContent = typeof number;
})

Обратите внимание, что если вы передадите нечисловую строку в число, будет возвращено NaN.

Преобразование строки в число с помощью parseInt() и parseFloat()

Другой подход заключается в использовании parseInt()и parseFloat(). Как вы можете сказать, parseInt()анализирует строку до целого числа, тогда как parseFloat()анализирует строку до числа с десятичными точками.

Например:

const str = "10.9"
console.log(str); // "10.9"
console.log(typeof str); // "string"

const intNumber = parseInt(str);
console.log(intNumber); // 10
console.log(typeof intNumber); // "number"

const floatNumber = parseFloat(str);
console.log(floatNumber); // 10.9
console.log(typeof floatNumber); // "number"

Аналогично первому подходу, при логировании значения strи его типа в консоли результат будет 10.1в виде строки и stringсоответственно. Однако при синтаксическом анализе strс использованием parseIntзначение intNumberстановится 10и его тип равен number.

С другой стороны, при синтаксическом анализе strс использованием parseFloatзначение floatNumberстановится 10.1числом, а его тип — number.

Вы можете увидеть пример в действии в следующей демонстрации CodePen.

const str = "10.1";
document.getElementById("variableValue").textContent = str;
document.getElementById("originalType").textContent = typeof str;

const intNumber = parseInt(str, 10);
document.getElementById("afterConvertValue").textContent = intNumber;
document.getElementById("afterConvert").textContent = typeof intNumber;

const floatNumber = parseFloat(str);
document.getElementById("afterConvertValueFloat").textContent = floatNumber;
document.getElementById("afterConvertFloat").textContent = typeof floatNumber;

Второй аргумент parseInt’s

parseInt()принимает второй аргумент, указывающий основание числа, которое нужно проанализировать из строки. Этот аргумент на самом деле является необязательным, но настоятельно рекомендуется всегда указывать его.

Без этого второго аргумента parseIntвыполняет автоматическое определение системы счисления. То есть он определяет основание числа по его формату в строке. Число, начинающееся с 0xили 0X, считается шестнадцатеричным (основание 16), а все остальные числа считаются десятичными.

Так, например, если бы вы вызвали parseInt(«08«), входное значение считалось бы восьмеричным числом; но 8 не является восьмеричной цифрой (поскольку восьмеричная нумерация 0–7), поэтому функция вернет значение ноль, а не восемь.

Во избежание путаницы всегда указывайте базу при использовании parseInt().

Преобразование строки в число с помощью Unary Plus

Третий способ преобразовать строку в число — использовать унарный плюс ( +). Если унарный плюс используется перед операндом, он пытается преобразовать его в число. Таким образом, если операнд представляет собой строку, содержащую число, унарный плюс преобразует его в число.

Например:

const str = "10";
console.log(typeof str); // "string"
console.log(+str); // 10
console.log(typeof +str); // "number"

Когда вы регистрируете тип str, как и ожидалось, это string. Тем не менее, когда вы регистрируете значение +strи его тип, 10и numberвы регистрируетесь в консоли соответственно.

Вы можете увидеть пример в действии в следующей демонстрации CodePen.

const valueElm = document.querySelector("#value");
const typeElm = document.querySelector("#type");
const convertedValueElm = document.querySelector("#convertedValue");
const convertedTypeElm = document.querySelector("#convertedType");

const value = "10";
const convertedValue = +value;

valueElm.textContent = value;
typeElm.textContent = typeof value;
convertedValueElm.textContent = convertedValue;
convertedTypeElm.textContent = typeof convertedValue;

Как обрабатывать нечисловые символы в строках

Важно учитывать случаи, когда строка может содержать символы, отличные от цифр, и то, как каждый подход обрабатывает это.

При использовании Number(), если строка содержит символы, отличные от чисел, знаков плюс (+) и минус (-) в начале или десятичных точек, возвращаемое значение является специальным значением NaN (не число). NaN — это глобальное свойство, представляющее Not-a-Number. Он возвращается некоторыми числовыми операциями, когда операнды или параметры этих операций либо не являются числами, либо не могут использоваться для этой конкретной математической операции.

С другой стороны, parseInt()и parseFloat()проанализируйте строку, если число находится в начале строки. Он отбрасывает остальные символы и берет число, встречающееся в начале строки. Однако если строка начинается с символов, отличных от чисел, знаков плюс (+) и минус (-) в начале или десятичных точек, возвращаемое значение является специальным значением NaN (не число).

Вы можете увидеть это в действии в следующей демонстрации CodePen.

const str = "10px";
document.getElementById("variableValue").textContent = str;
document.getElementById("originalType").textContent = typeof str;

const number = Number(str);
document.getElementById("afterConvertValueNumber").textContent = number;
document.getElementById("afterConvertNumber").textContent = typeof number;

const intNumber = parseInt(str, 10);
document.getElementById("afterConvertValue").textContent = intNumber;
document.getElementById("afterConvert").textContent = typeof intNumber;

Как видите, Number()возвращает NaN, так как строка содержит px. Однако parseInt()возвращается, 10поскольку находится в начале строки.

Вы можете проверить, является ли значение NaN, используя глобальную функцию isNaN().

Заключение

В этом кратком руководстве были рассмотрены три способа преобразования строки в число в JavaScript. Number()может преобразовать строку в число, будь то число с плавающей запятой или целое число. Однако, если строка содержит другие символы, она возвращает NaN. Это полезно, если вы хотите обеспечить строгое преобразование строки.

С другой стороны, есть parseInt()и parseFloat()более гибкие подходы в плане обработки других символов в номере. Однако в некоторых случаях эти две функции нельзя использовать взаимозаменяемо. Например, если число в строке является числом с плавающей запятой и вы используете parseInt(), вы получите неверное значение по сравнению со строкой.

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