JavaScript 中将字符串转为数字的 5 种方法

JavaScript 中的类型转换，也称为类型转换，是将一种类型（字符串）的值转换为另一种类型（数字）的过程。

1.parseInt()
句法：parseInt(string, radix)

  1. string：需要解析或转换为数字的字符串值。该函数期望该值是一个字符串，如果它不是字符串，那么它会使用该toString()方法自动转换为字符串
  2. radix2 到 36 之间的可选整数，表示数字系统的根或基数。如果未提供任何内容，则默认使用 10。

parseInt()当您想要解析字符串并将其转换为整数时非常有用。当您想要转换具有不同基数（例如二进制、八进制或十六进制）的字符串时，它更有用

let input = "100px";
let number = parseInt(inputString, 10); // number will be 100

处理空白、字符和特殊情况

  • 空白：忽略字符串中的前导空白
  • 字符：如果字符串的第一个字符不能转换成数字，函数 parseInt() 将返回 NaN，之后如果有字符串不能转换成数字，则忽略字符串的其余部分

2.ParseFloat(string)
语法 parseFloat(string)

参数

字符串：要解析的数值。如果数值不是字符串，将自动转换为字符串

let inputString = "100Something";
let number = parseFloat(inputString); // number will be 100

处理空白、字符和特殊情况

  • 空白：忽略前导空格
  • 字符继续解析，直到函数解析到一个无法转换成数字的字符。如果是第一个字符，函数将返回 NaN
  • 特殊情况：没有 redix 参数。

3. + 运算符
这是一种在 javascript 中将字符串转换为数字的速记方法

具体方法如下

let stringNumber = "123";
let convertedNumber = +stringNumber; // convertedNumber is now the number 123

虽然这是一种将字符串转换为数字的简便方法，但也存在一些缺陷，以下是其中一些

  • 前导零：不同于 parseInt()，如果你赋予它整数以外的内容，它可能无法正常工作。
  • 非数字字符串：如果字符串不是数字，结果将是 NaN
  • 隐式强制风险：当不清楚操作是否需要类型转换时，一元加法经常会导致错误。在使用显式类型转换方法时，这些类型的操作和风险可以得到缓解


从字符串到数字的现代类型转换技术
在新的 ECMAScript 语言标准中发布了 number 函数，它提供了比 parseInt() 或 parseFloat() 函数更通用的转换功能

4.Number(value)
值：需要转换为数字类型的值。该值可以是布尔、字符串或对象

函数 number() 返回转换为整数或浮点数的原始值。

以下是一些使用 Number() 函数将字符串转换为数字的实际示例

Number('123');          // 123
Number('12.3');         // 12.3
Number('123e-1');       // 12.3, exponential notation
Number('');             // 0, empty string
Number('0x11');         // 17, hexadecimal
Number('0b11');         // 3, binary
Number('0o11');         // 9, octal
Number('foo');          // NaN, non-numeric string
Number('100a');         // NaN, invalid numeric string
Number(true);           // 1
Number(false);          // 0
Number(null);           // 0
Number(undefined);      // NaN
Number({ valueOf: () => '123' }); // 123, object with valueOf method

详细解释：

  • 布尔：true 转换为 1，false 转换为 0
  • 空值：空：转换为 0
  • undefined：undefined 转换为 NaN
  • 字符串
  • 空格：字符串开头和结尾的空格将被忽略。
  • 如果字符串为空，返回值为 0
  • 支持二进制和八进制类型的字符串
  • 如果字符串不代表有效数字，函数将返回 NaN
  • Object对象：Number() 函数首先调用 valueOf() 方法，如果返回一个值，则将其转换为数字。如果没有，Number 函数会尝试调用 toString() 方法将对象转换为字符串，然后尝试将字符串转换为数字。

5.Math.floor() 和 Math.round()
Javascript 提供各种数学函数，这些函数可用于将浮点数转换为整数，也可用于类型转换

让我们来看看一些数学函数以及它们如何用于类型转换

// Convert string to number and round down
const stringInput = '5.8';
const numericFloor = Math.floor(stringInput); // Converts '5.8' to 5
console.log(numericFloor); // Outputs: 5

不过，不建议使用数学函数将字符串转换为数字，因为数学函数希望使用 Number 类型，而 JavaScript 会先尝试隐式地将字符串转换为数字，然后再将数值传递给数学函数。

额外收获：使用库进行类型转换
你还可以使用库来进行类型转换。这种方法有多种用途，例如

  • 一致性：公司政策规定使用库功能以保持一致性
  • 简单：许多开发人员习惯于使用特定库，因此会使用该库
  • 增强功能：与传统 JavaScript 函数相比，库可能支持更强的功能和错误处理

实例：Lodash
Lodash 是一个流行的 JavaScript 工具库，与传统的 JS 相比，它能提供一致的行为和性能改进。

以下是如何使用 Lodash 进行字符串到数字的转换

const _ = require('lodash');

let aNumber = _.toNumber('43'); // 将字符串转换为数字，结果为 43
let floatNumber = _.toNumber('3.1'); // 将字符串转换为浮点数，结果为 3.1
let notANumber = _.toNumber('abc'); // 无法转换，结果为 NaN

Angular
在 Angular 中，过滤器用于格式化数据。对于字符串到数字的转换，通常在组件或服务中使用类型脚本处理逻辑，类型脚本提供了一个强大的类型系统

让我们看一个例子

// Using a Angular service or component
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NumberConversionService {
  constructor() { }

  convertToNumber(value: string): number | null {
    let parsed = parseFloat(value);
    return isNaN(parsed) ? null : parsed;
  }


最佳实践和常见陷阱
错误处理和验证

try/catch：

在处理可能会出错的高风险转换时，使用 try/catch 命令。具体做法如下

try {
  let parsedNumber = JSON.parse(someInput);
} catch (error) {
  console.error('Parsing error:', error);
}

isNaN
检查数值是否为 NaN，这是转换失败时可能出现的结果。

let num = Number(someString);
if (isNaN(num)) {
  console.log('The NaN is a result of the conversion');
}

isFinite:
此函数检查数字是否有限。如果数字不是有限的，则返回无穷大或 NaN

let num = Number(someString);
if (!isFinite(num)) {
  console.log('The number is infinite');
}

实例和用例
在本节中，我们将了解不同用例的互动示例

1.简单转换

let someValue = "234"；
console.log(Number(someValue)); // 结果：234
console.log(+someValue); // 结果：234
console.log(parseInt(someValue)); // 结果：234

2.浮点转换：

let floatingPointString = "678.2343"；
console.log(parseFloat(floatingPointString)); // 结果：678.2343

3.二进制、十六进制和八进制转换：

let binaryString = "1010"；
let hexString = "1F"；
let octalString = "10"；
console.log(parseInt(binaryString, 2)); // 结果：10
console.log(parseInt(hexString, 16)); // 结果：31
console.log(parseInt(octalString, 8)); // 结果：8

4.表单输入解析

在创建Web表单时，输入内容很多时候是以字符串形式接收的，如果需要进行计算，则需要将其转换为数字

function calculateTotal(price, quantity) {
  return Number(price) * Number(quantity);
}

let priceInput = "12.99";
let quantityInput = "6";
console.log(calculateTotal(priceInput, quantityInput)); // result: 77.94


5.查询字符串解析

URL 参数是字符串，但在许多情况下，你可能需要将其转换为整数

可以这样做

function getQueryParam(param) {
  let params = new URLSearchParams(window.location.search);
  return params.get(param);
}

let page = getQueryParam("page");
console.log(typeof page); // result: "string"
page = parseInt(page) || 1;
console.log(typeof page); // result: "number"