[JavaScriptDungeon]LV.3 計算機

預覽圖

本層 BOSS 弱點

• 【特定技術】數字位數過多時，不能因此而破版，計算機功能皆須齊全
• 【自我學習】請在此關卡中「自學一個你原本不太會的技巧」，投稿時分享你透過哪些資源學習，並寫範例程式碼講解該技巧，以及你如何應用在此關卡上。

使用技術

• Vue.js
• SCSS

心得

這一層樓的網頁切版相對的簡單很多，困難的點在於程式邏輯上

• 要怎麼處理計算機的每一個小細節，像是 0.1 + 0.2 會跑出 0.3000000004 的問題，諸如此類。
• JavaScript 中字串與數字間的轉換。

然而在這一次的地下城中，學到了 eval() 與 正規表達式的用法：

• eval() 在本次地下城中，主要用來處理已經轉換成字串的算式部分，舉例來說像是這樣：

  var str = '100 - 50';  
  console.log(eval(str)) // 50

• 正規表達式主要用於加入千分號、驗證上，本次只有知道該如何使用正規表達式在程式上，至於規則的撰寫並沒有太過深入，可以像這樣用在需要驗證的地方：

  let key = '00';  
  let key1 = '.';  
  let key2 = '1';  
  let reg = /^\\.|00/;  
  console.log(reg.test(key)); // true  
  console.log(reg.test(key1)); // true  
  console.log(reg.test(key2)); // false

像這樣，我寫了一個規則，檢查字串開頭是否包含「00」或「.」，對於正規表達式可以使用 .test() 來驗證，還有更多使用方式可以參考 MDN

然後還有計算機上方那一排小字，就是記錄著已經輸入哪些算式的地方，有些人的做法是「如果過長就刪節號省略」、有些人的做法是「客制化 Scroll bar 使之可滾動」。

但我的做法是參考 win7 內的小算盤，電腦內的小算盤再算式過長時，會有一 種被往前推的效果 (請原諒我不會描述) ，一開始我也不知道這是什麼效果、要怎麼寫，但後來我是使用 substring () 達成。

我設定了固定的字元數，如果公式長度超出了字元數，那麼就兩者相減，多出來的字元數就填入 substring () 當成起點。

不足的部分

• 正規表達式真的很反人類，困難指數破表…。
• 計算機需要注意的細節很多，還有一些可以使用正規表達式處理好的細節沒有做好。

作品

• 線上DEMO
• 程式碼