如何在typescript中把数字转换成字符串/从字符串转换为数字?

2,680 阅读5分钟

你是否遇到过这样的情况:你想在typescript中把数字解析成字符串或者把字符串解析成数字?

在开发基于angular/typescript的项目时,我遇到了很多情况,这也是写这篇博文的原因。

Number 和 是String typescript编程语言基本的内建原始数据类型

每个开发人员都已经知道这些类型。

数字用于保存数值,字符串用于保存用双引号或单引号括起来的一组字符。

这些类型的变量持有不同的值。

数字类型不会自动转换为字符串类型,因此,开发者必须编写代码来进行手动转换。

数字到字符串字符串到数字的转换是 typescript 开发者的简单任务之一。对于转换为数字,字符串必须只包含数字。

数字到字符串的转换实例。

在javascript或typescript中,我们有多种方法可以将Number转换为String:

  • 用一个空字符串进行追加。
  • toString()方法
  • 字符串构造函数

用一个空字符串追加数字。

这是一个简单易行的方法,可以将数字解析为字符串。例如,给定的数字值是11,13,添加一个空字符串并返回一个字符串对象。

在这种情况下,typeof 方法检查值的类型并返回原始类型为字符串。

在typescript中,+ 是一个用来追加字符串的操作符。

下面的例子将有效和无效的值转换为字符串

下面的例子中,数字是有效的数值,即12。

var a: number = 12
var str: string = a + '';
console.log(typeof (a)) // outpus number  as output
console.log(typeof (str)) // outpus string as output
console.log(str) //outputs 12 as string value
var a: number = null
var str: string = a + '';
console.log(typeof (str)) // outpus string as output
console.log(str) //outputs null in the form of string
var a: number = undefined
var str: string = a + '';
console.log(typeof (str)) // outpus string as output
console.log(str) //outputs undefined in the form of string

toString()方法

toString() 方法是每个数据类型都有的一个内置方法。它返回一个对象的字符串版本。

在任何数据类型上调用toString()方法都会返回字符串对象。

var a: number = 17
var str: string = a .toString()
console.log(typeof (str)) // outpus string as output
console.log(a) //outputs 12 as string value

如果我们在toString()方法中使用null和undefined,编译器会通过Cannot read property 'toString' of null 错误。

字符串构造函数

字符串构造函数接受任何值并返回一个字符串。

这种方法在你创建字符串时很有用。而且它是将数字转换为字符串类型的最简单的方法。

下面是一个例子

var a: number = 12
var stringValue = String(a);
console.log(typeof(stringValue) // outpus string  as output

将字符串转换为数字的例子

本节解决了以下一些问题:

  • 如何将字符串转换为整数?
  • 如何将字符串解析为具有小数精度的浮点数。

字符串可以通过多种方式转换为数字。

首先,字符串必须包含以单数或双数编码的数值,输入是有效的字符串数值,例如:123 ,输出总是返回123的数字类型。

如果字符串不是数字值,所有这些转换方式都会返回NAN

有多种简单易行的方法可以将字符串解析为数字值

  • parseInt方法
  • parseFloat方法
  • Number()构造函数
  • 加法运算

parseInt()本地方法

这将用于将字符串解析为小数位的数字

parseInt 是一个内置的方法,它以字符串的形式接收输入的数字并返回数字。

语法

parseInt(string, radix)

字符串是一个用单引号或双引号括起来的数字字符串。弧度是一个可选的参数,可能的值是

  • 16 -hexa number
  • 8 -Octa number
  • 2-Binary number
  • 10 -Decimal number ie default

可能的输出是

  • 有效数字 - 如果字符串是有效的数字,用单引号或双引号括起来。
  • NAN - 输入的字符串不是有效的数字,就是空的或未定义的。
console.log(parseInt('32', 10)) // outpus 32 as output
console.log(parseInt('45')) // outpus 45 as output
console.log(parseInt('45abc')) // outpus 45 as output
console.log(parseInt('null')) // outpus NaN as output
console.log(parseInt('45')) // outpus 45 as output

parseFloat()方法

parseFloat 这是一个内置的方法,接受一个字符串格式的数字,并转换为浮点数格式的数字。

可能的输出是

  • 有效的浮动数 - 如果字符串是用单引号或双引号括起来的有效数字值
  • NAN - 输入的字符串不是有效的数值,或为空或未定义。

语法是

parseFloat(string, radix)

console.log(parseFloat('32.32')) // outpus 32.32 as output

这个方法对于转换含有小数位的浮动数字非常有用。

Number()方法

Number() 构造函数接受一个字符串作为参数,并返回数字作为输出。

console.log(Number('12')) // outpus 12 as output
console.log(Number('null')) // outpus NaN as output
console.log(Number('undefined')) // outpus NaN as output

加号单项运算符

这是一个单项运算符,只接受一个操作数。它接受字符串、布尔值和所有类型的数字并转换为数字。

语法

+string/boolean/number

输入是

  • 字符串
  • 布尔值
  • 所有数字类型 - Hexa, octal, floating numbers

可能的输出是

  • 有效数字 - 如果字符串是有效的数字值,用单引号或双引号括起来
  • NAN - 输入的字符串不是有效的数字值或空或未定义。
console.log(+'44') // outputs 44
console.log(+'44.23') // outputs 44.23
console.log(+true) // outputs 1
console.log(+false) // outputs 0
console.log(+undefined) // outputs 0
console.log(+null) // outputs 0

总结

学习用原始类型进行类型转换的可能方法是非常重要的。上面的大多数例子在javascript中都可以使用,因为typescript是javascript的一个超集。

我希望你学到了许多在typescript中从字符串到/到数字的方法。此外,请确保你发送的是带有数字的有效字符串,这样一来,解析到数字的方法就非常简单了。