前言

今天來到Number的筆記錦集，一樣是筆者我常用的幾個方法，number看似簡單(?)卻暗藏玄機，以下會一一實驗~

今日筆記會提到：Number()、parseInt()、toFixed()。

Number()

其實我最常用的Number是把字串變成Number，取string資料出來可能要跑迴圈時，直接拿Number來用很方便(也非常好記)。

使用方法

請注意N要是大寫喔！

Number使用時，依目標不同，就算不是字串可能也能產出代表其值的數字(例如布靈和null值)，以下用實驗來展示。

實驗方法

1. 文字轉數字

完全是沒問題。

let testWord = '056460'
let testNum = Number(testWord)
console.log(testNum)
console.log(typeof(testNum))

>> 56460
>> number

typeof()是檢驗型態的方法

2. 試試 string、boolean、undefined、null、arr、obj 會有什麼結果

經測試 string、boolean、null 可以順利地被轉為數字，undefined、arr、obj 則會是 NaN 的結果。

let testWord = Number('056460')
let testBoolean = Number(true)
let testUndefined = Number(undefined)
let testNull = Number(null)
let testArr =  Number(['056', 560])
let testObj =  Number({1: '111', 2: '222'})
console.log('testWord:'+ testWord)
console.log('testBoolean:'+ testBoolean)
console.log('testUndefined:'+ testUndefined)
console.log('testNull:'+ testNull)
console.log('testArr:'+ testArr)

>> testWord:56460
>> testBoolean:1
>> testUndefined:NaN
>> testNull:0
>> testArr:NaN
>> testObj:NaN

大雜燴測試

Number.parseInt()

將傳入值變成數字形式或是變為整數形式的工具。

使用方法

parseInt(string, radix) ⇒ string 經 radix 的方法解析後，會得到一個整數或是 NaN ；如果 string 含小數點，string的小數點會被無條件捨去。

string 是傳入的字串。radix 是基數，判斷/解析string的方法。

MDN：parseInt(string, radix)
parseInt 函式會把第一個參數變成字串、解析它、再回傳整數或是 NaN 。 如果不是 NaN ，回傳值會把第一個參數，參照指定的radix 後，以十進位表示。 例如，radix 指定為10 的話，它會以十進位為單位轉換、8 是八進位、16 是十六進位，依此類推。

讀了又讀，還是覺得官網寫得是最清楚XD，貼上來給各位參考。⬆️from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

實驗方法

筆者我發現自己似乎沒辦法將 radix 這部分解釋得太清楚，只能純實驗+看結論。

關於 parseInt()、Number() 的比較，各位也可以看 這個網站，有完整的示例和解釋！

實驗開始~~

1. 字串

如果傳入符合 parseInt 解析條件的字串，也可以得到整數。

嘗試使用 Number 來翻譯帶 "-" 的字串，Number 無法解析它，但 parseInt 可以。

另外跟上方 Number 一樣實驗 boolean、undefined、null 的結果，都是輸出 NaN 的。

let testWord1 = '123.54658768'
let testWord2 = '00123568'
let testWord3 = '001235-68'
let testWord4 = '001235-68'
let testWord5 = true
let testWord6 = undefined
let testWord7 = null
console.log(parseInt(testWord1))
console.log(parseInt(testWord2))
console.log(parseInt(testWord3))
console.log(Number(testWord4))
console.log(parseInt(testWord5))
console.log(parseInt(testWord6))
console.log(parseInt(testWord7))
>> 123
>> 123568
>> 1235
>> NaN
>> NaN
>> NaN
>> NaN

2. 陣列

陣列會被解析為第一個項目的值，但如果給陣列值為物件，praseInt 就無法解析了。

let testArr1 = [1, 2, 3]
let testArr2 = ['100', '2', '3']
let testArr3 = [{1:'100'}, {2: '200'}, {3: '300'}]
console.log(parseInt(testArr1))
console.log(parseInt(testArr2))
console.log(parseInt(testArr3))

>> 1
>> 100
>> NaN

Number.prototype.toFixed()

四捨五入的好工具。

使用方法

number.toFixed(num) ⇒ number 如果是個有小數點位的數，會四捨五入到小數點第 num 位

實驗方法

(直接上code)

let testNum = 55.35454605
console.log(testNum.toFixed())
>> 55

let testNum = 55.35454605
console.log(testNum.toFixed(2))
>> 55.35

let testNum = 55.35454605
console.log(testNum.toFixed(1))
>> 55.4

今日結語

今天演示了 Number()、parseInt()、toFixed()，明天將會是常用的 Array 方法。

如有說明不周或錯誤的地方，還請多留言討論(鞠躬)。