![](https://i.imgur.com/UfVZH4o.png) # JavaScript隨手筆記(一)數字篇 ## 1.值轉數字和判斷 ### Base 10 十進位 > 不會有 10 的出現,因為碰到 10 就要進位。 > ``` > 0 1 2 3 4 5 6 7 8 9 > ``` <br> ### Base 2 十進位 > 不會有 2 的出現,因為碰到 2 就要進位。 > ``` > 0 1 > ``` <br> ### Number() > Number() 在JavaScript 物件是允許你操作數值的包覆物件. Number 物件是以 Number() 建構子來建立的。 > > Nuamber() 物件也就是數值型態的物件,如整數 (integer) 或帶有小數點的浮點數 (floating point) 都是 Number。 > > 注意:即便物件當下是字串,套上Nuamber()都會轉為數字,前提是數字在前,執行到文字結束,文字之後的數字也不會顯示。 >> **用法:** >> console.log(Number(<font color="red">'23'</font>)); >> <font color="#D94DFF">//23</font> >> console.log(Number.parseInt(<font color="red">'30px'</font>)) >> <font color="#D94DFF">//30</font> >> console.log(<font color="red">'e23'</font>) >> <font color="#D94DFF">//NaN</font> <br> ### parseInt() > parseInt() 將字串轉換為以十進位表示的整數,parseInt() 接受兩個參數,會忽略前後空白。 > > parseInt(string, radix) > string > 欲轉換的值。若第一個參數值的類型不是 String,會先使用 ToString > 轉換成字串。 > radix > 代表進位系統。依照實作不同可能有不同的預設值,因此建議設定該值,避免造成錯誤。 >> **用法:** >> console.log(Number.parseInt(<font color="red">'30px'</font>, 10)); >> <font color="#D94DFF">//30</font> >> console.log(parseInt(<font color="red">'30px'</font>, 10)); >> <font color="#D94DFF">//30</font> >> console.log(Number.parseInt(<font color="red">'&nbsp;&nbsp;&nbsp;&nbsp;2.5rem&nbsp;&nbsp;&nbsp;&nbsp;'</font>)); >> <font color="#D94DFF">//2</font> >> console.log(Number.parseInt(<font color="red">'e23'</font>, 10)); >> <font color="#D94DFF">//NaN</font> <br> ### parseFloat() > parseFloat() 將字串轉換為以十進位表示的浮點數,parseFloat() 僅接受一個參數。 > > 與 parseInt() 相同,會忽略前後空白。當遇到無法解析的字元,會忽略該字元及其後的所有字元,停止解析於此字元,並回傳目前為止的結果。若第一個字元就無法被解析,會回傳 NaN。 > > 與 parseInt() 不同的是,parseFloat() 用以解析浮點數,因此會接受第一個小數點。且僅能分析 10 進位制。 >> **用法:** >> console.log(Number.parseFloat(<font color="red">' 2.5rem '</font>)); >> //2.5 >> console.log(parseFloat(<font color="red">'2.5rem'</font>)); >> //2.5 >> console.log(Number.parseFloat(<font color="red">'&nbsp;&nbsp;&nbsp;&nbsp;2.5rem&nbsp;&nbsp;&nbsp;&nbsp;'</font>)); >> <font color="#D94DFF">//2.5</font> >> console.log(Number.parseFloat(<font color="red">'e23'</font>, 10)); >> <font color="#D94DFF">//NaN</font> <br> ### isNaN() > isNaN() 函數用於檢查其參數是否是非數值。 > > .isNaN(x) : 判斷 x 是不是 NaN 的函式 會先將 x 轉換成數字類型 → .isNaN(Number(x)),再進行比對是否為 NaN 所以造成了許多光怪陸離的結果… > Number.isNaN(x) : 同樣也是判斷 x 是不是 NaN 的函式 ES6 出的新語法,又比 .isNaN() 可靠又嚴格一點 只有傳入 型態為 number 的 NaN 才回傳 true( 意思是 'NaN' 不行喔!) 其於皆為 false >> **用法:** >> console.log(Number.isNaN(<font color="#B8860B">20</font>)); >> <font color="#D94DFF">//false</font> >> console.log(Number.isNaN(<font color="red">'20'</font>)); >> <font color="#D94DFF">//false</font> >> console.log(Number.isNaN(+<font color="red">'20px'</font>)); >> <font color="#D94DFF">//true</font> >> console.log(Number.isNaN(<font color="#B8860B">23</font>/<font color="#B8860B">0</font>)); >> <font color="#D94DFF">//false</font> >> >> 只有這三種例子會回傳 true >> Number.isNaN(NaN); >> <font color="#D94DFF">//true</font> >> Number.isNaN(Number.NaN); >> <font color="#D94DFF">//true</font> >> Number.isNaN(<font color="#B8860B">0</font> / <font color="#B8860B">0</font>); >> <font color="#D94DFF">//true</font> >> >> 以下會回傳 false Number.isNaN(true); >> <font color="#D94DFF">//false</font> Number.isNaN(null); >> <font color="#D94DFF">//false</font> Number.isNaN(<font color="#B8860B">37</font>); >> <font color="#D94DFF">//false</font> Number.isNaN(<font color="red">'37'</font>); >> <font color="#D94DFF">//false</font> Number.isNaN(<font color="red">'37.37'</font>); >> <font color="#D94DFF">//false</font> Number.isNaN(''); >> <font color="#D94DFF">//false</font> Number.isNaN(' '); >> <font color="#D94DFF">//false</font> <br> ### isFinite() > Number.isFinite() 方法會判斷傳入的值是否為有限數 > 注意:很適合用來判斷是否為數字。 >> **用法:** >> console.log(Number.isNaN(<font color="#B8860B">20</font>)); >> <font color="#D94DFF">//true</font> >> console.log(Number.isNaN(<font color="red">'20'</font>)); >> <font color="#D94DFF">//false</font> >> console.log(Number.isNaN(+<font color="red">'20px'</font>)); >> <font color="#D94DFF">//false</font> >> console.log(Number.isNaN(<font color="#B8860B">23</font>/<font color="#B8860B">0</font>)); >> <font color="#D94DFF">//false</font> <br> ## 2.數字運算(不包含 加減乘除) ### Math.sqrt() > Math 物件的 Math.sqrt() 方法用來取得傳入參數的平方根 (square root)。 >> **用法:** >> console.log(Math.sqrt(<font color="#B8860B">25</font>)); >> <font color="#D94DFF">//5</font> <br> ### Math.max() > Math 物件的 Math.max() 函式會回傳零或多個數字中的最大值。 >> **用法:** console.log(Math.max(<font color="#B8860B">5</font>, <font color="#B8860B">18</font>, <font color="#B8860B">22</font>, <font color="#B8860B">35</font>, <font color="#B8860B">47</font>)); >> <font color="#D94DFF">//47</font> >> console.log(Math.max(<font color="red">'5'</font>, <font color="red">'18'</font>, <font color="red">'22'</font>, <font color="red">'35'</font>, <font color="red">'47'</font>)); >> <font color="#D94DFF">//47</font> >> console.log(Math.max(<font color="#B8860B">5</font>, <font color="#B8860B">18</font>, <font color="red">'22px'</font>, <font color="#B8860B">35</font>, <font color="#B8860B">47</font>)); >> <font color="#D94DFF">//NaN</font> <br> ### Math.min() > Math 物件的 Math.min() 函式會回傳零或多個數字中的最小值。 >> **用法:** console.log(Math.min(<font color="#B8860B">5</font>, <font color="#B8860B">18</font>, <font color="#B8860B">22</font>, <font color="#B8860B">35</font>, <font color="#B8860B">47</font>)); >> <font color="#D94DFF">//5</font> >> console.log(Math.min(<font color="red">'5'</font>, <font color="red">'18'</font>, <font color="red">'22'</font>, <font color="red">'35'</font>, <font color="red">'47'</font>)); >> <font color="#D94DFF">//5</font> >> console.log(Math.min(<font color="#B8860B">5</font>, <font color="#B8860B">18</font>, <font color="red">'22px'</font>, <font color="#B8860B">35</font>, <font color="#B8860B">47</font>)); >> <font color="#D94DFF">//NaN</font> <br> ### Math.PI > Math 物件的 Math.PI 屬性表示圓周率 π 3.14。 > ``` > 3.141592653589793 > ``` >> **用法:** >> 圓的面積算法 >> console.log(Math.PI * Number.parseFloat(<font color="red">'10px'</font>) ** <font color="#B8860B">2</font>); >> <font color="#D94DFF">//314.1592653589793</font> <br> ### Math.random() > Math 物件的 Math.random() 會回傳一個偽隨機小數 (pseudo-random) 介於 0 到 1 之間(包含 0,不包含 1) ,大致符合數學與統計上的均勻分佈 (uniform distribution) ,您可以選定想要的數字區間,它會透過演算法被產生並且不允許使用者自行跳選或重設成特定數字。 >> **用法1:** >> 1到6的隨機整數 >> console.log(Math.trunc(Math.random()*<font color="#B8860B">6</font> + <font color="#B8860B">1</font>)); >> >> **用法2:** >> <font color="blue">const</font> <font color="#00BFFF">randomInt</font> = (<font color="#00BFFF">min</font>, <font color="#00BFFF">max</font>) =>Math.trunc(Math.random() * (<font color="#00BFFF">max</font> - <font color="#00BFFF">min</font>)+<font color="#B8860B">1</font>) +<font color="#00BFFF">min</font>; console.log(<font color="#00BFFF">randomInt</font>(<font color="#B8860B">10</font>, <font color="#B8860B">20</font>)) <br> ### Math.trunc() > Math 物件的 Math.trunc() 函數回傳整數。 >> **用法:** >> 1到6的隨機整數 >> console.log(Math.trunc(<font color="#B8860B">1.24435</font>)); >> <font color="#D94DFF">//1</font> <br> ### Math.round() > Math 物件的 Math.round() 函數回傳四捨五入後的近似值。 >> **用法:** >> console.log(Math.round(<font color="#B8860B">1.24435</font>)); >> <font color="#D94DFF">//1</font> >> console.log(Math.round(<font color="#B8860B">1.534543</font>)); >> <font color="#D94DFF">//2</font> <br> ### Math.ceil() > Math 物件的 Math.ceil() 函數回傳無條件進位。 >> **用法:** >> console.log(Math.round(<font color="#B8860B">1.24435</font>)); >> <font color="#D94DFF">//2</font> >> console.log(Math.round(<font color="#B8860B">1.534543</font>)); >> <font color="#D94DFF">//2</font> <br> ### toFixed() > toFixed() 方法用來將一個數字轉成固定小數位數的字串,後面有位顯示的數會四捨五入。 > 注意:如果不想為字串,前面需加強制符號(+或-)。 >> **用法:** >> console.log((<font color="#B8860B">2.7</font>.toFixed(0))) >> <font color="#D94DFF">//"3"</font> >> console.log((<font color="#B8860B">2.7</font>).toFixed(3)); >> <font color="#D94DFF">//"2.700"</font> >> console.log(+(<font color="#B8860B">2.345</font>).toFixed(2)); >> <font color="#D94DFF">//2.35</font> ###### tags: `JavaScript` `JS` ---