iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

我的JavaScript日常系列 第 4

JavaScript Day 4. ParseInt / ToString

ParseInt()

直到我在寫這篇之前,parseInt 在我心中都還是一個很簡單的概念,一個可以把字串變成數字的函數。

// 把字串轉成數字的型別
let a = "1";
a = parseInt("1");
console.log(a+1); // 1

一直沒有好好思考 parseInt 由字串轉成數字的原理是什麼,我把這個轉型的過程想得很簡單,反正我不論輸入什麼字串,它就是照本宣科的轉成數字,沒有想到那如果我輸入的是文字字串呢,它又會怎麼幫我轉成數字或會變成什麼?

於是我決定好好的把 parseInt 筆記下來,也希望自己以後學到任何一個函式,都能夠更多的去思考他們的原理。

parseInt() 函數解析一個字串並回傳一個整數。

一般來說,只要是數字都能轉型,不過要透過 parseInt 轉型,即使是數字仍然是有規則的。

parseInt(string, radix);

參考 MDN 的說法,簡單解釋這規則裡面 string 以及 radix 的意思:

  • string

    將要轉成數字的字串。例外的情況是,如果此時 string 不是字串,就會先經過 ToString 再執行 parseInt,如果是空白值則會被忽略。

  • radix (基數)

    代入數字為 2 到 36,代表二進位、八進位、十進位或十六進位,譬如指定 10 就代表十進位,一定要定義這個參數,避免給出的結果因實做不同而產生變化,通常預設不是 10 進位,因此如果 radix 為 0 或沒有設置參數的時候則會根據 string 做判斷。

以下範例作參考:

parseInt("10"); // 10
parseInt("19",10); // 19 (10+9)
parseInt("11",2); // 3 (2+1)
parseInt("17",8); // 15 (8+7)
parseInt("1f",16); // 31 (16+15)
parseInt("010"); // 10

此外,如果字串第一個字不能轉換成數字,那麼會直接出現NaN的結果。

parseInt("Hello", 8); // NaN

ToString()

ToString() 函數解析一個數字並回傳一個字串。

上面我們提到 parseInt 將字串轉成數字並回傳,那麼如何再把數字轉回字串?底下一樣提供一個簡單的範例:

// 數字改成字串的型別
let b = 1;
b = b.toString();
console.log(typeof b); // 即顯示string
console.log(b+1);

ToString 的轉型規則

number.toString(radix)

radix 代入的數字介於 2-36 的整數,代表進位,預設為10。

參考的範例,大蓋可以了解到 ToString 將數字轉回字串同樣使用進位的方式。

let count = 10;
count.toString()  // '10' 預設
(17).toString()   // '17'
(17.2).toString() // '17.2'

let x = 6;

x.toString(2)      // '110' 二進位表示法
(254).toString(16) // 'fe' 十六進位表示法

(-10).toString(2)   // '-1010'
(-0xff).toString(2) // '-11111111'

要注意,當對象不是數字的時候會拋出 Error。

參考 ToString 各個使用方法 (返回物件的字串表示):

  • Array - 將 Array 的元素轉換為字串。

  • Boolean - 如果 Boolean 值是 true,則回傳 true,否則回傳 false。

  • Date - 返回日期的文字表示法。

  • Error - 將包含相關錯誤訊息的數字轉為字串。

  • Function - 返回如下格式的字串。

    // unctionname 是被呼叫 toString 方法函式
    function functionname( ) { [native code] }
    
  • Number - 將數字回傳字串。

  • String - 返回 String 物件的值。

    String 為字串,規則為:

    // thing 為任何要轉字串的物件
    String(thing)
    

上一篇
JavaScript Day 3. 變數:布林、undefined、null
下一篇
JavaScript Day 5. 型別辨識 typeof
系列文
我的JavaScript日常31

尚未有邦友留言

立即登入留言