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

В JavaScript, есть множество вариантов того как превратить строку в число.

А этой записи, я расскажу про целые и дробные числа.

Строка в цельное число

Я приведу два примера того, как преобразовать строку в целое число. Первый — это с использованием стандартной JavaScript функции — parseInt(). Второй — это с использованием регулярного выражения.

Первый вариант — parseInt()

var val = "445"; // Распознается как строка 
console.log(typeof(val)); // результат будет "string", что означает строка  

val = Number.parseInt(val); // Теперь будет числом
console.log(typeof(val)); // Результат будет "number", что означает число 
    

// Если прописать "typeof()" для "val" снизу, то выведет "string"
val = "Hello"; // Распознается как строка
val = Number.parseInt(val); // Результат будет "NaN", так как значение "val" полностью строка
console.log(typeof(val)); // Результат "NaN будет "number"

Второй вариант — регулярное значение

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

filterInt = function (value) {
  if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
    return Number(value);
  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

Строка в дробное число

Я приведу два примера того, как преобразовать строку в дробное число. Первый — это с использованием стандартной JavaScript функции — parseFloat(). Второй — это с использованием регулярного выражения.

Первый вариант — parseFloat()

Все примеры ниже вернут правильное дробное число.

parseFloat("3.14");
parseFloat("314e-2");
parseFloat("0.0314E+2");
parseFloat("3.14more non-digit characters");

PS. Последняя строка в примере выше — вернет число, так как первые символы строки являются цифирными.

Значения из примера ниже вернут «NaN» как результат:

parseFloat("FF2");
parseFloat("Hello world");
parseFloat("_2_NA_22");

Второй вариант — регулярное значение

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

var filterFloat = function (value) {
    if(/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
      .test(value))
      return Number(value);
  return NaN;
}

// Примеры 
console.log(filterFloat('421'));               // Возвращает: 421
console.log(filterFloat('-421'));              // Возвращает: -421
console.log(filterFloat('+421'));              // Возвращает: 421
console.log(filterFloat('Infinity'));          // Возвращает: Infinity
console.log(filterFloat('1.61803398875'));     // Возвращает: 1.61803398875
console.log(filterFloat('421e+0'));            // Возвращает: NaN
console.log(filterFloat('421hop'));            // Возвращает: NaN
console.log(filterFloat('hop1.61803398875'));  // Возвращает: NaN