在TypeScript中如何将字符串转换为数字？

技术背景

在TypeScript开发中，我们常常会遇到需要将字符串转换为数字的场景，比如处理用户输入、解析数据等。TypeScript作为JavaScript的超集，继承了JavaScript的类型转换方法，同时也有自身的特点。下面将详细介绍几种常见的字符串转数字的方法。

实现步骤

1. 使用parseInt()函数

parseInt()函数接收两个参数，第一个是要解析的字符串，第二个是基数（数学数字系统中的基数，例如十进制为10，二进制为2）。它会返回一个整数，如果第一个字符不能转换为数字，则返回NaN。

2. 使用parseFloat()函数

parseFloat()函数接收一个要解析的值作为参数，并返回一个浮点数。如果该值不能转换为数字，则返回NaN。

3. 使用一元+运算符

一元+运算符可以将字符串值强制转换为数字。

4. 使用Number()构造函数

Number()构造函数可以将其参数转换为数字，它比一元+运算符更显式，并且可以处理不同类型的输入，不仅仅是字符串。

核心代码

// parseInt()示例
console.log(parseInt('51.023124')); // 51
console.log(parseInt('5adfe1234')); // 5
console.log(parseInt('z123')); // NaN

// parseFloat()示例
console.log(typeof parseFloat('1.12321423')); // 'number'
console.log(parseFloat('5.5abc')); // 5.5

// 一元 + 运算符示例
let myString = '12345';
console.log(typeof +myString); // 'number'
let myOtherString = '10ab';
console.log(+myOtherString); // NaN

// Number()构造函数示例
console.log(Number('123')); // 123
console.log(Number('9BX9')); // NaN

最佳实践

• 当需要将字符串转换为整数，并且需要指定解析数字的基数时，使用parseInt()函数，并始终传递基数参数，例如十进制使用10。

parseInt('123', 10); // 123
parseInt('1101', 2); // 13
parseInt('0xfae3', 16); // 64227

• 当需要将字符串解析为浮点数时，使用parseFloat()函数。

parseFloat('123.45'); // 123.45

• 当需要简洁地将字符串强制转换为数字时，使用一元+运算符。

let num = +'123'; // 123

• 当需要更显式地将不同类型的输入转换为数字时，使用Number()构造函数。

Number('123'); // 123

常见问题

1. parseInt()函数的基数问题

在某些JS实现中，parseInt()函数如果不指定基数，会将以零开头的数字字符串解析为八进制。为了避免这种不可靠的行为，始终指定基数。

parseInt('010'); // 不同环境可能结果不同
parseInt('010', 10); // 10

2. 一元+运算符和Number()构造函数的区别

一元+运算符只能将字符串转换为数字，而Number()构造函数可以处理不同类型的输入。

+ '123'; // 123
Number('123'); // 123
Number(null); // 0
+ null; // 0

3. 在Angular模板中的转换问题

在Angular模板中，Number(x)和parseInt(x)会抛出错误，+x没有效果，有效的转换方法是x * 1或x / 1。

<!-- 在Angular模板中 -->
{{ '123' * 1 }} <!-- 123 -->