typeScript 之 Number

工具: PlayeGround

源码: GitHub TypeScript

简介

数字的基本类型是number,它是双精度64位浮点数,在TypeScript和JavaScript中没有整数。

但是他们支持使用Number对象,它是对原始数值的包装对象。

typescript 复制代码
const value = new Number(param);

注意参数类型为any类型,如果不能够转换为数字,将返回Nan(非数字值)null

复制代码
const data = new Number("Hello");
console.log(data);									// Number: null 

对于Number的属性相关如下:

属性名 返回类型 描述
MAX_VALUE number 可表示的最大数值,1.79E+308
MIN_VALUE number 可表示的最小数值 5.00E-324
NaN number 非数字数值, 即使在相等比较中,它不等于自己
NEGATIVE_INFINITY number 负无穷大,溢出时返回该值。该值小于 MIN_VALUE
POSITIVE_INFINITY number 正无穷大,溢出时返回该值。该值大于 MAX_VALUE
toString string 使用指定的基数转换为字符串,基数是2,36之间的整数,默认为10
toLocaleString string 把数字转换为字符串
toFixed string 将数字转换为字符串,并设置小数点后的位数,范围在0,20之间, 存在四舍五入的问题
toExponential string 将数字转换为指数计数的字符串,小数点后的位数范围在0, 20之间, 存在四舍五入的问题
toPrecision string 将数字转换为指定长度的字符串,有效数字个数在1,21之间, 不存在四舍五入的问题
valueOf number 返回Number对象的原始数字值

属性变量

源码相关:

typescript 复制代码
interface NumberConstructor {
  	// 创建Number对象, 参数为any类型
    new(value?: any): Number;
    (value?: any): number;
    readonly prototype: Number;

  	// 可表示的最大数值 1.79E+308
    readonly MAX_VALUE: number;
  	// 可表示的最小数值 5.00E-324
    readonly MIN_VALUE: number;
    // 非数字数值, 即使在相等比较中,它不等于自己
    readonly NaN: number;
    // 负无穷大,溢出时返回该值。该值小于 MIN_VALUE
    readonly NEGATIVE_INFINITY: number;
		// 正无穷大,溢出时返回该值。该值大于 MAX_VALUE。
    readonly POSITIVE_INFINITY: number;
}
declare var Number: NumberConstructor;

简单的实例:

typescript 复制代码
console.log("最大值为: " + Number.MAX_VALUE); 
console.log("最小值为: " + Number.MIN_VALUE); 
console.log("负无穷大: " + Number.NEGATIVE_INFINITY); 
console.log("正无穷大:" + Number.POSITIVE_INFINITY);
console.log(Number.NEGATIVE_INFINITY < Number.MIN_VALUE);       // true 
console.log(Number.POSITIVE_INFINITY > Number.MAX_VALUE);       // true 

针对于正负无穷大 ,它返回的数据为Infinity:

typescript 复制代码
const minValue = Number.NEGATIVE_INFINITY;
const maxValue = Number.POSITIVE_INFINITY;
console.log(minValue);			// -Infinity 
console.log(maxValue);			// Infinity

针对于Nan,要注意,它不等于任何值,包括它自己

typescript 复制代码
console.log(10 !== NaN);            // true
console.log(NaN == NaN);            // false 

方法

源码相关

typescript 复制代码
interface Number {
  // 使用指定的基数转换为字符串,基数是[2,36]之间的整数,默认为10
  toString(radix?: number): string;
  // 将数字转换为字符串,并设置小数点后的位数,范围在[0,20]之间
  toFixed(fractionDigits?: number): string;
  // 将数字转换为指数计数的字符串,小数点后的位数范围在[0, 20]之间
  toExponential(fractionDigits?: number): string;
  // 将数字转换为指定长度的字符串,有效数字个数在[1,21]之间
  toPrecision(precision?: number): string;
  // 返回Number对象的原始数字值
  valueOf(): number;
}

interface Number {
    // 把数字转换为字符串,使用本地数字格式顺序
    toLocaleString(locales?: string | string[], options?: Intl.NumberFormatOptions): string;
}
  • toString 转换为指定进制字符串, 基数范围2, 36
typescript 复制代码
const value = new Number(10);
// 没有基数,则默认十进制
console.log(value.toString());      // 10
// 二进制
console.log(value.toString(2));     // 1010

注意: 进制的范围2, 36之间,否则报错: toString() radix argument must be between 2 and 36

  • toLocaleStringtoString相比较,在数字四位数的时候比较明显
typescript 复制代码
const value = new Number(1234.56789);
// 直接转换
console.log(value.toString());				// 1234.56789
// 每三位会有逗号间隔
console.log(value.toLocaleString());	// 1,234.568
  • toFixed 转换为保留指定位数小数,小数位数范围在0,20
typescript 复制代码
const value = new Number(1.567123);
// 不保留小数
console.log(value.toFixed());           // 2
// 保留两位小数
console.log(value.toFixed(2));          // 1.57

注意: 会存在四舍五入的情况

  • toExponential 转换为指数字符串, 小数位数范围在0, 20
typescript 复制代码
const value = new Number(12375.73);
// 未设定,则保留所有
console.log(value.toExponential());           // 1.237573e+4
// 保留两位小数, 会存在四舍五入
console.log(value.toExponential(2));          // 1.24e+4

注意: 会存在四舍五入的情况

  • toPrecision 转换为指定长度的字符串,有效数字个数范围1,21
typescript 复制代码
const value = new Number(1.5367);
// 未设定,则保留所有
console.log(value.toPrecision());           // 1.5367
// 保留两位小数, 不会四舍五入
console.log(value.toPrecision(2));          // 1.5

如果对精度要求比较高,推荐使用该方法。

  • valueOf 获取原型的number数据
typescript 复制代码
const value = new Number(1234);
console.log(typeof(value));     // "object" 

const num:any = value.valueOf();    
console.log(num, typeof(num));  // 1234,  "number"
相关推荐
gis开发之家6 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
退休倒计时13 小时前
【每日一题】LeetCode 131. 分割回文串 TypeScript
算法·leetcode·typescript
橘子星1 天前
在浏览器里跑大模型!用 WebGPU 零成本部署 DeepSeek-R1
前端·typescript
bonechips1 天前
React + WebGPU:在浏览器里跑一个 DeepSeek 推理模型
react.js·typescript
触底反弹2 天前
🔥 React 零基础入门(上):环境搭建 + JSX 深度解析
前端·react.js·typescript
谷哥的小弟2 天前
TypeScript对象类型
javascript·typescript
大家的林语冰2 天前
🫡 见证历史,TypeScript 7 重写成功,VS Code 原地起飞,GitHub 第一语言联手 Go 破而后立!
前端·javascript·typescript
濮水大叔4 天前
在 DTO 中使用 Form Layout 配置复杂表单,支持 Tabs/Groups/Sections
vue.js·typescript·node.js
用户0934077735145 天前
HarmonyOS WPS Open SDK 实践:用能力分层重构 OpenFileRequest
typescript·harmonyos
gis开发之家6 天前
vue3直击架构痛点 依赖倒置与接口隔离——打造坚如磐石的插件与高阶组件(HOC)模式
javascript·架构·typescript·前端框架·vue3