4-2 parseInt、parseFloat 轉換為 Number

Original: https://course.andys.pro/Javascript-Intro/04-2-transform-to-number-using-parseint-parsefloat/

講義

講義

1. 字串轉整數 (parseInt)

• 語法：parseInt(string, radix)
  • string: 要轉換的字串。
  • radix: 進位制 (2~36)，例如 10 代表十進位，16 代表十六進位。若不填寫，通常預設為 10。
• 特性：
  • 容錯性：如果字串開頭是數字，它會抓取前面的數字部分，忽略後面的文字。
    • 範例：parseInt("123ABC") ➝ 123
    • 範例：parseInt("ABC123") ➝ NaN (Not a Number)
  • 進位制支援：
    • 0x 開頭會被視為十六進位。
    • 範例：parseInt("11", 2) (二進位) ➝ 3

2. 字串轉浮點數 (parseFloat)

• 語法：parseFloat(string)
• 特性：
  • 用於處理帶有小數點的數字。
  • 支援科學記號 (Scientific Notation)。
    • 範例：parseFloat("314e-2") ➝ 3.14
  • 與 parseInt 類似，會從頭開始解析，遇到無法解析的字元則停止。

3. 強制轉型 (Number)

• 語法：Number(value)
• 特性：
  • 嚴格轉換：字串中如果包含非數字字元，會直接失敗並回傳 NaN。
    • 範例：Number("123ABC") ➝ NaN (與 parseInt 不同)
  • 特殊規則：
    • 布林值：Number(true) ➝ 1, Number(false) ➝ 0
    • 空字串：Number("") ➝ 0

4. NaN (Not a Number)

• 代表「這不是一個數字」，通常發生在數學運算或轉型失敗時。
• 型別檢查：typeof NaN 仍然是 'number'。

影片逐字稿 (AI 生成)

我們現在講4-24-2主要我們要教的是三個東西一個是ParseInt,ParseFloat跟Number我們可以把這個東西抓成整數我們來抓小數和直接把它轉換成數字我們開始來看它的做法第一個ParseInt我們想要把輸入的字串轉換成整數所以首先呢這是公式就是說前面是先去抓一個字串然後後面這個是我要這個字串原本是幾位數就比如說這是2進位到36進位那參數為0或是沒有設置參數時是用它的數字來進位那String的話呢如果你看到一個數字是0x開頭或是0x開頭代表什麼意思代表它是16進位好那我先來這裡舉例一下16進位先去Google好我們開好我們假如有個數字它是0x33那其實它是51為什麼它是51因為它是16進位16進位代表說是3乘以16再加上3這叫做16進位這叫做16進位那我們現在活在的世界或是我們小時候學的數學都是10進位可是電腦裡面呢它有2進位有4進位有8進位有16進位所以你看到0x什麼什麼就是16進位ok那多講一點你們可以抄一下0b的話binary呃我們寫我們寫一下那個我寫一下字binary不是就是0b就代表它是2進位ok比如說ok嗎binary是嗯2進位那我舊的講義我有放比較多一點這邊只有講到2進位2進位16進位和2進位簡單講一下怕我又脫進度好比如說0b11是什麼0b11是3喔為什麼因為2進位1就是就是1乘以2加乘以2加1是3嘛對不對那111是什麼111是1110b11是7為什麼呢因為1乘以22再加上再加上1乘以2的一次方再加上21乘以2的0次方就是7大家可以理解嗎這是111是0次方一次方二次方的位數好那好那好那那個JavaScript越講越多就是就是次方是用層層表示就幾次方是用層層表示後面會講可是你也是可以寫下層層是次方的意思好那我們開始來看範例首先我有一個字串是9然後我要把它轉換成那個我要把它轉換成數字所以我可以怎麼樣我可以 parseint9然後它就會給你9那你看字串的9跟的差別是這個是數字型態這個是字串型態那我要怎麼知道說就是你其實你這樣子看有時候很難去一秒就知道就是它是什麼型態那最快的就有一個 function叫做typeof所以我想要知道它的型態所以比如說我現在有一個9我把9丟進去它會跟我講它是number如果typeof裡面放的是一個字串9它的它的typeof就是stringok好Typeof大家注意一下ok我這邊寫一下typeof好那我 parseint我去 parse一個10就是代表說它是十進位我把它 parse回來那它還是會就算它是一個字串然後它抓十進位它還是19可是我如果把這個數字去抓 parse然後後面是2的話它代表說它是2進位它是11所以我去抓它的時候它會變什麼它會變3對不對我如果把它變成是16進位它會變17OK所以我去抓它的時候它會變什麼它會變3對不對我如果把它變成是16進位它會變17OK它是不同就是你把它就是比如說11你把它看成不同進位的情況下它抓回來的數字會不一樣那這個 parseInt它預設的parse是parse 10就是它預設我們都是10進位所以原本你後面沒有寫這個的時候它都是抓10進位的值OK好再來我們可以看到第三個例子是它把17是用8進位來看的話那會變什麼這是8的一次方對不對乘以1所以是88加7就等於15好這我就不跑例子了好那這個例子欸怎麼有FF是什麼那因為它是16進位所以我們來看一下F是什麼可以嗎我們來看一下數字我就把這樣所以它的數字會是0123456789555555555555555555555555555555555655555555555555555是12一直到F是15喔okDEF他說 欸 老師那G呢沒有G16 進位沒有G為什麼就像你10進位你寫不出10一樣因為到第10格的時候他就進位了嘛然後就補0了嘛所以你沒辦法把A畫出來嘛如果suppose他是A嘛OK大概知道我的意思嗎所以比如說你16進位你到第16格的時候你就前面補一個1然後後面就補一個0欸 為了證明我說的16進位的16是這樣子是10有沒有因為滿了 這格滿了就是換到0前面多加一個OK這要花一點時間消化一下就是那二進位那二進位就像二進位你永遠看不到2嘛對不對你1滿了會變怎樣這個變成0前面加一個那11再加1欸這個變成0進位一個那1加1又變2對不對然後又變0前面又進位一個就變100OK好的那當我今天我要 parseInt我去抓一個ABC它就看不懂這是什麼它就會出現NAN那NAN是什麼呢Not a number不是一個數字所以它有一個值叫做NANNAN就是NAN number好的好的再來我們抓到看ParseInt123ABC會跑出什麼當你前面有數字的時候它就把前面抓完後面它看不懂它就不理它所以就直接變成123出來可是呢你如果前面是ABC後面是123它就看不懂了嘛當它看不懂的時候它就跟你講拿了NumberOK最後面假如我前面填空白呢我這個字串前面填空白呢裡面有123它跟你講123OK好好再來我們要抓浮點數能輸入的數轉換成浮點數它的浮點數好的我把30抓起來它也會是30那我把10.68抓進來也很自然的就變10.68那這個好奇怪1222232那就抓最前面的OK好那如果378ABC它會抓什麼呢複製複製到複製到複製到兩行它又複製到378ABC那如果是ABC378呢那如果是ABC378呢它NUMBEROK因為最前面是一個所以是字母它看不懂好那再來呢這下面這幾個例子都會回傳3.14那為什麼呢3141大家記得1嗎1-2對不對從小數點往前1-2這樣子那這邊說欸那1其實也可以寫成大寫那這個是加2代表說它是乘以100對不對就是把這一格1-2就變3.14了那這個是它去抓後面這邊因為它看不懂它就省略掉那前面它直接抓3.14不過有時候呢講義這樣寫你還是要自己驗證一下因為可能講義不確定是不是你看像這個我自己自己Copy錯3.14OK好再來我們來講number那這邊就很明顯是講義的錯了因為true呢通常都是非0整數是1所以我們在這邊我們number我們把true丟進去我直接打給大家看numbertrue是1喔不是0喔OK然後這邊是false是0喔OK我不知道這是有的有的或是有的補習班會故意寫錯要你來上課可是我這應該不是這樣啦就是好這邊大家要注意喔這個是相反的true是1false是0那這邊應該這個看一下number我記得我昨天是4然後就有syntax error對啊syntax error啊這個不行這樣啊大家知道就這這個這不行啊他以為他是在寫這個吧這樣可以所以這邊這個也是錯的喔這個會syntax error所以這行就對這行不行這樣寫我沒把它畫掉這個例子不好這不行這樣做好再來我們把number12.3從字串轉換成number直接取他的數就12.3那這邊有個蠻有趣的是如果我今天的字串裡面是空的什麼都沒有然後把它轉換成字串會是什麼呢會是0喔這蠻有趣的吧我一個字串都沒有東西然後轉換成number取值居然會取到0這是一些比較特殊的案例好這裡我們有沒有看到0x對不對0x那16進位16的0次方11乘1116的一次方1616乘11616加1等於1711121311211111111111211112111這Number跟ParseInt就不太一樣了喔它這樣子是沒辦法轉換的喔那Number然後如果這邊是 剛才是TEST是不是也是那Number所以ParseInt跟ParseFloat可以前面有數字的情況下可以抓到東西可是Number就不行喔OK嗎好的 那Lab2就需要大家去試試看OK

影片逐字稿largev2

現在來講四之二四之二主要我們要教的是三個東西一個是ParseInt,ParseFloat,跟Number我們可以來抓這個東西把它抓成整數我們來抓小數和直接把它轉換成數字我們開始來看它的作法第一個ParseInt我們想要把輸入的字串轉換成整數首先這是公式,就是說前面是先去抓一個字串後面這個是我要這個字串原本是幾位數就比如說這是二進位到三十六進位那參數為零或是沒有設置參數時是用它的數字來進位那String的話呢如果你看到一個數字是零X開頭或是零X開頭代表什麼意思?代表它是十六進位那我現在這裡舉例一下十六進位先去Google打開一個好,我們假如有一個數字它是零X三三那其實它是五十一為什麼它是五十一?因為它是十六進位十六進位代表說是三乘以十六再加上三這叫做十六進位那我們現在活在的世界或是我們小時候學的數學都是十進位可是電腦裡面呢,它有二進位有四進位有八進位有十六進位所以你看到零X什麼什麼就是十六進位那多講一點你們可以抄一下零B的話Binary我們寫一下那個我寫一下字Binary或是就是零B就代表它是二進位比如說OK嗎?Binary是二進位那我舊的講義我有放比較多一點這邊只有講到二進位十六進位和二進位簡單講一下怕我又拖進度好,比如說零B十一是什麼?零B十一是三喔為什麼?因為二進位一就是就是一乘以二加一加一是三嘛那一一一是什麼?一一一是一一一零B一一是七,為什麼呢?因為一乘以二的二次方再加上一乘以二的一次方再加上二一乘以二的零次方就是七大家可以理解嗎?這是一一一是零次方一次方二次方的位數那好那個JavascriptJavascript越講越多就是次方是用乘乘表示就幾次方是用乘乘表示後面會講也是可以寫下乘乘是四方的意思好那我們開始來看範例首先我有一個字串是九然後我要把它轉換成那個我要把它轉換成數字所以我可以怎麼樣我可以parseint九然後它就給你九那你看字串的九跟的差別是這個是數字形態這個是字串形態那我要怎麼知道說就是你其實這樣子看有時候很難去一秒就知道它是什麼形態那最快的有一個function叫做typeof就是我想要知道它的形態所以比如說我現在有一個九我把九丟進去它會跟我講它是number如果typeof裡面放的是一個字串九它的typeof就是stringok大家注意一下我這邊寫一下typeof好那我parseint就是代表說它是十進位我把它parse回來那它還是會就算它是一個字串然後抓十進位它還是十九這個數字去抓parse然後後面是二的話它代表說它是二進位喔它是十一喔所以我去抓它的時候它會變什麼它會變三嘛對不對我如果把它變成是十六進位咧它會變十七嘛ok就是比如說十一你把它看成不同進位的情況下它抓回來的數字會不一樣那這個parseint它預設的parse是parse十就是它預設我們都是十進位所以原本你後面沒有寫這個的時候它都是抓十進位的值ok好再來我們可以看到第三個例子是它把十七是用八進位來看的話那會變什麼這是八的一次方嘛對不對乘以一所以是八加七就等於十五好這我就不跑例子了好那這個例子怎麼有F F是什麼那因為它是十六進位所以我們來看一下F是什麼可以嗎我們來看一下數字我就把這樣所以它的數字會是01 2 3 4 56 7 8 9這樣十個字嘛對不對十個然後A B CD E F所以十六進位是這樣因為一格裡面要放十六格那我們只有0 1 2 3 4 5 6 7 8 9後面就補四個A B C DE F好為了確保老師說的是正確的我們試試看比如說我parseint對不對然後我把十六進位喔我打錯了不是place有沒有所以A就是十嘛那B是十一C是十二一直到F我是十五喔DEF老師那G呢沒有G十六進位沒有G為什麼就像你十進位你寫不出十一樣因為到第十個的時候它就進位了嘛然後就補零了嘛所以你沒辦法把A畫出來嘛如果suppose它是A嘛OK大概知道我意思嗎所以比如說你十六進位十六個的時候你就前面補一個一然後後面就補一個零欸為了證明我說的十六進位的十六是這樣子是一零因為滿了這個滿了就是換到零前面多加一個OK這要花一點時間消化一下那二進位就像二進位你永遠看不到二嘛你一滿了會變怎樣這個變成零前面加一個那十一再加一這個變成零進位一個一加一又變二對不對然後又變零前面又進位一個就變一百好的那當我今天我要ParseInt我去抓一個ABC它就看不懂這是什麼它就會出現NANNAN是什麼呢Not a number不是一個數字所以它有一個值叫做NANNOT就是Not a number好的再來我們抓抓看ParseInt123ABC會跑出什麼當你前面有數字的時候就把前面抓完後面它看不懂就不理它所以就直接變成是123出來可是呢你如果前面是ABC後面是123它就看不懂了嘛當它看不懂的時候它就跟你講Not a numberOK最後面假如我前面填空白呢我這個字串前面填空白呢裡面有123123它會跟你講123OK好再來我們要抓浮點數轉換成浮點數好的我把30抓起來它也會是30那我把10.68抓進來也很自然的變成10.68那這個好奇怪12空白2232就抓最前面的OK好那如果378ABC它會抓什麼呢複製到兩行了它會複製到378ABC那如果是ABC378呢Not a numberOK因為最前面是一個是字母它看不懂好那再來呢這幾個例子都會回傳3.14那為什麼呢3141大家記得1嗎1-2就變成3.14了那這邊說那1其實也可以寫成大寫加2代表說它是乘以100那100就是把這個12就變成3.14了那這個呢是它去抓後面這邊因為它看不懂它就省略掉那前面它直接抓3.14不過有時候呢講義這樣寫你還是要自己驗證一下因為可能講義不確定是不是你看像這個copy錯了3.14好再來我們來講number那這邊就很明顯是講義的錯了因為true呢通常都是非0只能說是1所以我們在這邊number我們把true丟進去我直接打給大家看true是1喔不是0喔這邊是false是0喔我不知道有的補習班會故意寫錯要你來上課這應該不是這樣這邊大家要注意喔這個是相反的true是1false是0那這邊應該這個看一下number我記得我昨天試然後就有syntax error對啊syntax error啊這個不行這樣大家知道這個不行他以為他是在寫這個吧number這樣可以所以這邊這個也是錯的喔這個會syntax errorok所以這行就對我們把它劃掉這個例子不好這不行這樣做好我們再來我們把這個12.3從字串轉換成number直接取他的數就12.3那這邊有一個蠻有趣的是如果我今天這個字串裡面是空的什麼都沒有然後我把它轉換成字串會是什麼呢會是0喔這蠻有趣的吧我一個字串都沒有東西然後轉換成number取值居然會取到0這是一些比較特殊的案例好這裡我們有沒有看到0x對不對那16進位16的0次方11乘以116的一次方1616乘以116加1等於17ok怎麼沒有email好煩喔好好再來我們看一下這邊100A嘛number跟parseInt就不太一樣他這樣子是沒辦法轉換的喔拿了number如果這邊是剛剛是test也是拿了numberok所以parseInt跟parseFloat可以前面有數字的情況下可以抓得到東西可是number就不行喔ok嗎好的那lab2就需要大家去試試看ok