迹忆客 专注技术分享

在 TypeScript 中使用 Number() 对象将字符串转换为数字，例如 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

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

这两种方法都有正确的类型，并允许 TypeScript 推断变量存储了一个数字。

即使我们将不存储有效数字的字符串传递给 Number 函数，我们也会得到 NaN（不是数字）值，它也是数字类型。

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 的类型也是数字。

需要注意的是，如果字符串的第一个非空白字符不能转换为数字，则 parseInt() 和 parseFloat() 函数将返回 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 并且如果被替换的变量不存储空字符串，我们只会将变量设置为数字。

如果我们确定应用程序中的字符串将包含至少一个数字，或者wine 吧的用例可以将空字符串转换为 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（全局）标志来匹配所有非数字字符并将它们替换为空字符串。

这意味着如果字符串只包含非数字字符，我们会将它们全部替换为空字符串，并且 String.replace 方法将返回一个空字符串。

请注意，String.replace 方法返回一个新字符串，它不会改变原始字符串。 字符串在 JavaScript 中是不可变的。

仅当 parseInt() 和 parseFloat() 函数不足时才应使用此方法，因为尽可能利用内置函数总是更好。