目錄
十六、八、二進位
toString(base)
舍入
精度
偏差
偏差现象
偏差原因
解决方法
Infinity、NaN
Object.is
parseInt、parseFloat
Math对象
首頁 web前端 js教程 一文掌握JavaScript數字類型

一文掌握JavaScript數字類型

May 30, 2022 pm 07:03 PM
javascript

本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了關於數字類型的相關內容,JavaScript中存在兩種表示數字的類型:Number和BigInt類型,下面一起來看一下,希望對大家有幫助。

一文掌握JavaScript數字類型

【相關推薦:javascript影片教學web前端

##JavaScript中存在兩種表示數字的類型:

  1. Number類型,也就是常規意義上的數字類型,以64位元的 IEEE-754格式存儲,屬於“雙精度浮點數”,截至目前,我們接觸到的數字全部都是Number類型;
  2. BigInt類型,表示任意長度的整數,通常情況下我們用不到它們,除非表示253 至-253之外的數字,此類專業資料類型我們會在後面的章節詳細介紹;
數字的寫法

數字的寫法本身很簡單,但是

JavaScrpt有很多方便快速的語法糖供我們使用,好好學習這些文法糖不僅能夠提升我們的程式碼閱讀能力,同時也能提升我們程式碼的高階感(逼格)。

分隔符號

十進位的數字最簡單了,幾乎每篇文章我們都多多少少會使用,例如我們建立一個變量,並儲存

100億:

let tenbillion = 10000000000;
登入後複製
雖然操作起來非常簡單,但是存在一個問題:很難數清楚

1後面到底有幾個0,如果我們寫的是轉帳程式碼,錯個0可能會傾家蕩產。

此時,我們可以使用

_作為分隔符,如下:

let tenbillion = 10_000_000_000;
登入後複製
上述程式碼就可以非常明白的數清

0的個數,顯然是最優解!

這裡的底線

_就是JavaScript的一個語法糖,在執行過程中會被引擎忽略,以上兩種寫法效果完全相同,但是閱讀體驗相差很大。

清奇腦迴路

有些童鞋就要問了,我從小都是

40一組的,為啥非要30分一組呢?所以,我們可以寫成下面的方式,同樣沒有問題:

let tenbillion = 100_0000_0000;
登入後複製
亦或者寫成這樣:

let tenbillion = 1_0000_0000_00;
登入後複製
這裡我想表達的是,不論你採用哪種分割方式,都是不影響數字本身的大小的,快想一個逼格最高的方式吧!

省略的0

雖然使用

_可以優雅的分割很多0,但是在實際生活中,我們一般不這麼寫,例如我們常常將10000000000寫成“100億”,這樣就可以省略很多0,從而降低犯錯的可能性。

JavaScript同樣提供了一個省略0的寫法,我們可以使用字母e後面跟個數字表示0的個數,舉個栗子:

let tenbillion = 1e10;//100亿,1后面10个0console.log(3.14e9);//3140000000,后面7个0,此处疑惑可往下看
登入後複製
上述程式碼的理解非常簡單,

e10可以理解為1_0000_0000_001#後面100,所以我們可以認為:

1e10 === 1 * 1_0000_0000_00;//e10表示1后面10个03.14e9 === 3.14 * 1_000_000_000;//e9表示1后面9个0
登入後複製

我們也可以用這個方法表示非常小的數字,例如1奈米:

let nm = 0.000000001;//单位(米)
登入後複製

由於0的個數過多,我們也可以使用_分割:

let nm = 0.000_000_001;
登入後複製

當然,也可以使用e的方式省略掉所有的0,如下:

let nm = 1e-9;//1的左边9个0,包括小数点前面的那个
登入後複製

換句話說,e-9的意思就是1-9,也就是1/1000_000_000,所以下面的等式是成立的:

1e-9 === 1 / 1_000_000_000;3.14e-8 === 3.14 / 1_000_000_00;
登入後複製

十六、八、二進位

十六進位是程式設計中常用到的格式,例如表示顏色、編碼等,我們可以在普通數字前面加上0x表示十六進位數字:

let hex = 0xff;//255,不区分大小写,0xFF是一样的
登入後複製

二進位數字使用0b開頭:

let bin = 0b1011;//11
登入後複製

八進位數字使用0o開頭:

let oct = 0o777;//511
登入後複製

這種簡單的寫法只支援這三種特殊類型,至於其他進位的數字可以使用特殊的函數產生(parseInt)。

toString(base)

toString方法可以把數字轉為對應進位base的字串形式。

舉個栗子:

let num = 996;
console.log(num.toString(8));//转为8进制字符串
console.log(num.toString(16));//转为16进制字符串
console.log(num.toString(32));//转为32进制字符串
登入後複製

程式碼執行結果如下:

一文掌握JavaScript數字類型

#的範圍可以從236,如果不填預設為10

注意,如果使用數字直接呼叫toString方法,在有些情況下需要是應用兩個.,舉例如下:

console.log(123.toString(8));//Error,语法错误console.log(123..toString(8));//正确,173
登入後複製

数字后面有两个.,这是因为在JavaScript中数字后面的第一个.被认为是小数点,第二个点才是调用函数的.

如果是小数就不存在这个问题,举个栗子:

console.log(3.14.toString(8));
登入後複製

亦或者,我们使用小括号可以避免使用两个点,举个栗子:

console.log((123).toString(8));//'173
登入後複製

舍入

舍入是数字最常用的操作之一,通常包括:

  1. 向下取整,Math.floor(num)

    console.log(Math.floor(3.14));//3
    console.log(Math.floor(9.99));//9
    console.log(Math.floor(-3.14));//-4
    console.log(Math.floor(-9.99));//-10
    登入後複製

    不遵循四舍五入原则,直接取小于等于当前数值的最近整数。

  2. 向上取整,Math.ceil(num)

    console.log(Math.ceil(3.14));//4
    console.log(Math.ceil(9.99));//10
    console.log(Math.ceil(-3.14));//-3
    console.log(Math.ceil(-9.99));//-9
    登入後複製

    不遵循四舍五入原则,直接取大于等于当前数字的最近整数。

  3. 就近取整,Math.round(num)

    console.log(Math.round(3.14));//3
    console.log(Math.round(9.99));//10
    console.log(Math.round(-3.14));//-3
    console.log(Math.round(-9.99));//-10
    登入後複製

    遵循四舍五入原则,取距离当前数字最近的整数。

  4. 移除小数,Math.trunc(num)

    console.log(Math.trunc(3.14));//3
    console.log(Math.trunc(9.99));//9
    console.log(Math.trunc(-3.14));//-3
    console.log(Math.trunc(-9.99));//-9
    登入後複製

    直接移除小数点后面的数字,取整数位。IE浏览器不支持这个方法

对比以上四种方法:


Math.floor Math.ceil Math.round Math.trunc
3.14 3 4 3 3
9.99 9 10 10 9
-3.14 -4 -3 -3 -3
-9.99 -10 -9 -10 -9

精度

上述方法只是简单的把小数舍入成了整数,在有些情况下,我们需要特定精度的小数,例如取圆周率后4位应该怎么办呢?

有两种方法:

  1. 数学乘除计数

    let pi = 3.1415926;console.log(Math.round(pi * 10000) / 10000);//3.1416
    登入後複製

    上述代码先将pi乘以10000,然后取整,再除以10000,从而得到了符合精度要求的结果。但是,这么做看起啦呆呆的,JavaScript为我们提供了更简单的方法。

  2. toFixed(n)

    let pi = 3.1415926;console.log(pi.toFixed(4));//3.1416
    登入後複製

    以上代码看起来输出上没有什么问题,实际上,toFixed返回的是一个字符串,如果我们需要一个数字类型,要转换一下才行,可以使用单目运算符+ pi.toFixed(4)

    此外,如果小数的尾数长度不够,toFixed会在后面补上'0':

    let num = 3.1;console.log(num.toFixed(9));
    登入後複製

    代码执行结果如下:
    一文掌握JavaScript數字類型
    这也侧面证明了toFixed的返回值是一个字符串,否则0会被省略。

偏差

浮点数表示在很多情况下总是存在偏差

在计算机内部,浮点数根据IEEE-754标准进行表示,其中单精度浮点数32位,双精度浮点数64位。在双精度浮点数中,1位用于表示符号,52位用于存储有效数字,11位存储小数点的位置。

偏差现象

虽然64位已经可以表示非常大的数字了,但是仍然存在越界的可能,例如:

let bigNum = 1e999;console.log(bigNum);//Infinity
登入後複製

越过做最大值的数字将变为Infinity(无穷),这样就丢失了原有数字的大小,属于偏差的一种。

还有一种偏差,需要我们学习:

console.log(0.1+0.2 === 0.3);//falseconsole.log(0.1 + 0.2);
登入後複製

代码执行结果如下:

一文掌握JavaScript數字類型

没错,0.1 + 0.2的结果并不是0.3,而是一堆0后面加个4

这种偏差是非常致命的,尤其在商城、银行工作场景中,即使是一个非常小的偏差,在高流水场景下都会丢失无尽的财富。

曾经听说过一个银行员工通过克扣工人工资,盗取百万财富的故事,每个员工的工资只克扣2毛!

我想这种事情发生在我身上,我肯定发现不了,所以无时无刻的精确是多么的重要。

这个故事不知真假~~

偏差原因

先以我们常见的十进制为例,我们都知道,小数中存在两个奇葩,一个叫无限循环小数,另一个叫无限不循环小数,例如1/3就是一个无限循环小数0.3333333(3),而圆周率就是一个无限不循环小数。无限就意味着无法用数字清楚的描述这个数字的大小,我们能写出来的都是不精确的。

二进制同样存在一些无限循环的数字,不同的是在十进制中0.1这种看起啦很简单的数字,在二进制中却是无限循环小数。

举个例子:

let x = 0.1;console.log(x.toFixed(20));
登入後複製

代码执行结果如下:

一文掌握JavaScript數字類型

是不是觉得不可思议呢?我们只是简单的创建了一个变量并赋值0.1,然后取小数点后20位,却得到了一个匪夷所思的结果。

如果我们换一个角度或许会更容易理解这种现象,在十进制中,任何整数除以10或者10整数次幂都是正常的精确的数字,例如1/10或者996/1000。但是,如果以3为除数,就会得到循环的结果,例如1/3

这种描述如果换到二进制上,同样是成立的。

在二进制中,任何整数除以2或者2的整数次幂都是正常的精确的数字,但是,如果以10为除数,就会得到无限循环的二进制数。

所以,我们就可以得出结论,二进制数字无法精确表示0.10.2就像十进制没有办法描述1/3一样。

注意:

这种数据上的偏差并非JavaScript的缺陷,像PHP、Java、C、Perl、Ruby都是同样的结果。

解决方法

  1. 舍入

    在展示一个无限循环小数的时候,我们可以直接使用toFixed方法对小数进行舍入,该方法直接返回字符串,非常方便用于展示价格。

    0.3.toFixed(2);//0.30
    登入後複製
  2. 使用小单位

    另外一种方式是,我们可以使用较小的单位计算诸如价格、距离,例如采用分而不是元计算总价,实际上很多交易网站都是这么做的。但是这种方法只是降低小数出现的次数,并没有办法完全避免小数的出现。

Infinity、NaN

JavaScript数字中有两个特殊值:InfinityNaN

如何判断一个数字是不是正常数字呢?

我们可以使用两个方法:

  1. isFinite(val)
    该函数会将参数val转为数字类型,然后判断这个数字是否是有穷的,当数字不是NaNInfinity-Infinity时返回true
    console.log(isFinite(NaN));//falseconsole.log(isFinite(Infinity));//falseconsole.log(isFinite(3));//trueconsole.log(isFinite('12'));//true
    登入後複製
    代码执行结果如下:
    一文掌握JavaScript數字類型
    由于无法转为数字的字符串会被转为NaN,所以我们可以使用isFinite方法判断字符串是不是数字串:
    console.log(isFinite('xxxx'));//falseconsole.log(isFinite('Infinite'));//falseconsole.log(isFinite(' '));//true,空串转为0
    登入後複製
    代码执行结果如下:

一文掌握JavaScript數字類型

  1. isNaN(val)
    valNaN或者无法转为数字的其他值时,返回true
    console.log(isNaN(NaN));//trueconsole.log(isNaN('Infinite'));//true
    登入後複製
    代码执行结果:
    一文掌握JavaScript數字類型
    为什么要使用isNaN函数而不是直接判读呢?
    例如:
    console.log(NaN === NaN);//false
    登入後複製
    代码执行结果如下:
    一文掌握JavaScript數字類型
    这是因为NaN不等于任何数,包括自身。

Object.is

Object.is(a,b)可以判断参数ab是否相等,若相等返回true,否则返回false,它的结果只有三种情况:

  1. 可以比较NaN

    console.log(Object.is(NaN,NaN));//true
    登入後複製

    代码执行结果:

    一文掌握JavaScript數字類型

  2. 0 和 -0

    console.log(Object.is(0,-0));//false
    登入後複製

    代码执行结果:

    一文掌握JavaScript數字類型

    在计算机内部,正负使用01表示,由于符号不同,导致0-0实际上是不同的,二者的表示方式也不一样。

  3. 其他
     其他比较情况和a === b完全相同。

parseInt、parseFloat

parseIntparseFloat可以把字符串转为数字,与+Number不同的是,二者的限制更为松散。例如,像"100¥"这样的字符串使用+Number必然返回NaN,而parseIntparseFloat却能轻松应对。

举个例子:

console.log(+"100¥");console.log(parseInt("100¥"));console.log(parseFloat("12.5¥"));
登入後複製

代码执行结果:

一文掌握JavaScript數字類型

parseIntparseFloat会从字符串中读取数字,直到无法读取为止。二者特别适合处理像"99px""11.4em"这种数字开头的字符串情况,但是对于其他字符开头的字符串则返回NaN

console.log(parseInt('ff2000'));//NaN
登入後複製

但是,我们发现ff2000实际上是一个十六进制的数字字符串,parseInt同样可以处理这种情况,不过需要添加一个进制参数。

举个例子:

console.log(parseInt('FF2000',16));
//16719872
console.log(parseInt('0xFF2000',16));
//16719872
console.log(parseInt('nnnnnn',36));
//1430456963
登入後複製

代码执行结果:

一文掌握JavaScript數字類型

Math对象

内置的Math对象中包含了许多我们经常用到的常量和方法,以下仅举例介绍常用的几个:

  1. Math.PI

    圆周率Π是一个无限不循环的常量,我们可以使用Math.PI代替:

    console.log(Math.PI);
    登入後複製

    一文掌握JavaScript數字類型

  2. Math.random()
    生成一个位于区间[0,1)的随机数:

    console.log(Math.random());console.log(Math.random());
    登入後複製

一文掌握JavaScript數字類型
如果我们需要一个特定区间内的随机数,可以乘以特定的值,然后取整哦。

  1. Math.pow(a,b)

    计算ab,举例如下:

    console.log(Math.pow(2,3));//8
    登入後複製
  2. Math.max()/Math.min()

    从任意数量的参数中选出一个最大/最小值:

    console.log(Math.max(1,2,3,4,5));//5console.log(Math.min(1,2,3,4,5));//1
    登入後複製

一文掌握JavaScript數字類型

【相关推荐:javascript视频教程web前端

以上是一文掌握JavaScript數字類型的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript與WebSocket:打造高效率的即時影像處理系統 JavaScript與WebSocket:打造高效率的即時影像處理系統 Dec 17, 2023 am 08:41 AM

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數

See all articles