在 TypeScript 中将字符串转换为数字

目录

Convert a String to a Number in TypeScript

1. 在 TypeScript 中将字符串转换为数字
2. 使用 parseInt 或 parseFloat 将字符串转换为数字
3. 从 TypeScript 中的字符串中提取数字

在 TypeScript 中将字符串转换为数字

使用该Number()对象将字符串转换为 TypeScript 中的数字，例如
const num1 = Number(str). 当用作函数时，Number(value)将字符串或其他值转换为数字。如果无法转换该值，则返回
NaN（不是数字）。

const str = '1234';

// 👇️ const num1: number
const num1 = Number(str);
console.log(num1); // 👉️ 1234

// 👇️ const num2: number
const num2 = +str;
console.log(num2); // 👉️ 1234

我们使用
Number
函数将字符串转换为数字。

您可能还会看到开发人员使用
一元加号 (+)
运算符将字符串转换为数字。

const str = '1234';

const num2 = +str;
console.log(num2); // 👉️ 1234

它实现与函数相同的目标Number，但可能会让不熟悉一元加号 (+) 运算符的代码读者感到困惑。

添加数字时应避免使用一元加号 (+) 运算符，因为它会使您的代码看起来很奇怪。

const str = '1234';

const num2 = 6 + +str;
console.log(num2); // 👉️ 1240

第一个加号是加法运算符，第二个加号用于将字符串转换为数字。

即使您将未存储有效数字的字符串传递给Number
函数，您也会得到NaN（不是数字）值，该值也是 type
number。

console.log(typeof NaN); // 👉️ "number"

如果您尝试使用
Number函数或一元加号 (+) 运算符将不是有效数字的字符串转换为数字，您将得到一个NaN（不是数字）值。

const str = '1234test';

const num1 = Number(str);
console.log(num1); // 👉️ NaN

const num2 = +str;
console.log(num2); // 👉️ NaN

在这种情况下，您应该使用parseInt()或parseFloat()
函数。

正如函数名称所暗示的那样，parseInt将字符串转换为整数，而parseFloat转换为浮点数。

使用 parseInt 或 parseFloat 将字符串转换为数字

使用该parseInt()函数将字符串转换为数字，例如
const num1 = parseInt(str). 该parseInt函数将要解析的值作为参数，并返回从提供的字符串解析的整数。

const str = '1234.5test';

// 👇️ const num1: number
const num1 = parseInt(str);
console.log(num1); // 👉️ 1234

// 👇️ const num2: number
const num2 = parseFloat(str);
console.log(num2); // 👉️ 1234.5

我们传递给
parseInt
函数的唯一参数是我们要转换为整数的字符串。

第二个示例使用
parseFloat
函数将字符串转换为浮点数。

TypeScript 能够将变量的类型推断为数字，因为即使NaN是number.

需要注意的是，如果字符串的第一个非空白字符无法转换为数字，则parseInt()andparseFloat()函数将返回NaN（不是数字）。

const str = 'test1234.5test';

const num1 = parseInt(str);
console.log(num1); // 👉️ NaN

const num2 = parseFloat(str);
console.log(num2); // 👉️ NaN

如果字符串以有效数字开头，则parseInt()和parseFloat()函数能够从字符串中解析数字，但是如果字符串的第一个非空白字符无法转换为数字，则方法短路返回NaN.

如果这是您所处的情况，您需要使用该replace()方法从字符串中提取数字。

在 TypeScript 中从字符串中提取数字

要从 TypeScript 中的字符串中提取数字，请调用replace()方法，例如str.replace(/\D/g, '')并将结果传递给Number()函数。该replace方法将用空字符串替换所有非数字字符并返回结果。

const str = 'hello 1234 world';

// 👇️ const replaced: string
const replaced = str.replace(/\D/g, '');
console.log(replaced); // 👉️ "1234"

let num: number | undefined;

if (replaced !== '') {
  num = Number(replaced);
}

// 👇️ let num: number | undefined
console.log(num); // 👉️ 1234

该示例使用
String.replace
方法将字符串中的所有非数字字符替换为空字符串。

这有效地从字符串中删除了所有非数字字符。

将空字符串转换为数字会返回0，这可能不是您想要的。

// 👇️ 0
console.log(Number(''));

这就是为什么我们将变量的类型num设置为，如果变量不存储空字符串number | undefined，我们只将变量设置为数字。replaced

如果您确定应用程序中的字符串将至少包含一个数字，或者您的用例可以将空字符串转换为0，则可以稍微简化一下。

const str = 'hello 1234 world';

// 👇️ const replaced: string
const replaced = str.replace(/\D/g, '');
console.log(replaced); // 👉️ "1234"

// 👇️ const num: number
const num = Number(replaced);

console.log(num); // 👉️ 1234

我们传递给该replace()方法的第一个参数是我们要在字符串中匹配的正则表达式，第二个参数是每个匹配项的替换（空字符串）。

该\D字符匹配一个不是数字的字符。

我们添加了g(global) 标志来匹配所有非数字字符并将它们替换为空字符串。

parseInt()如果和功能不足，您应该只使用这种方法，parseFloat()
因为尽可能利用内置功能总是更好。