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

您所在的位置：网站首页 › 西门子字符串转换成数字 › JavaScript 中将字符串转为数字的 5 种方法

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

2024-07-17 07:52| 来源: 网络整理| 查看: 265

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

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

string：需要解析或转换为数字的字符串值。该函数期望该值是一个字符串，如果它不是字符串，那么它会使用该toString()方法自动转换为字符串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'); // 123Number('12.3'); // 12.3Number('123e-1'); // 12.3, exponential notationNumber(''); // 0, empty stringNumber('0x11'); // 17, hexadecimalNumber('0b11'); // 3, binaryNumber('0o11'); // 9, octalNumber('foo'); // NaN, non-numeric stringNumber('100a'); // NaN, invalid numeric stringNumber(true); // 1Number(false); // 0Number(null); // 0Number(undefined); // NaNNumber({ 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 downconst stringInput = '5.8';const numericFloor = Math.floor(stringInput); // Converts '5.8' to 5console.log(numericFloor); // Outputs: 5

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

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

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

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

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

const _ = require('lodash');

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

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

让我们看一个例子

// Using a Angular service or componentimport { 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)); // 结果：234console.log(+someValue); // 结果：234console.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)); // 结果：10console.log(parseInt(hexString, 16)); // 结果：31console.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"

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章