基于Split分割技術的計算器系統的設計與實現

趙素萍，胡雪鋒,賀 強

（晉中信息學院大數據信息工程學院，晉中 030800）

0 引言

傳統的計算器項目中，表達式計算一般采用棧的數據結構來實現，即當用戶輸入一個數、輸入一個運算符，輸入的數壓入num棧，輸入的運算符壓入op棧。每次輸入的運算符在壓棧之前，都需要判斷op棧是否為空，為空則入棧，不為空則進行如下操作：

（1）判斷棧頂元素與當前運算符的優先級，若棧頂元素的優先級高，則進行（2），否則執行步驟3。

（2）需要先從num棧彈出兩個元素，從op棧彈出一個元素進行計算，后將計算結果壓入num棧，轉入（1）繼續循環判斷。

（3）運算符壓棧，繼續后續操作。

符號棧為空時，num棧只有一個元素，即為運算結果，直接輸出即可。

該方法的局限性是要求操作數只能是一位，若要實現多位數的運算需要找到上一個輸入的字符是否為數值型數據，且將num出棧并將棧頂元素乘10，加上當前輸入的數再次入棧。本來使用棧就比較復雜，現又需要不停的進行壓棧和出棧操作，同時需要將表達式作為字符串存起來。刪除操作也較復雜，需要判斷當前刪的是運算符還是數，運算符可以直接刪除，數的話需要判斷數是幾位數，多位數需要出棧，除10取整后再入棧。

若直接對字符串進行操作，就可以省去很多入棧出棧的操作。

1 微信小程序

微信小程序是2017年才開始運行的，并以飛快的速度發展壯大。微信小程序有手機原生APP所不具備的優點，即無需安裝、無需升級、無需卸載、不占手機存儲空間、用完即走。在一些用戶使用頻率很少的場合，微信小程序發揮了他的巨大作用。據不完全統計，僅2020年一年，微信小程序中健康碼的服務用戶超過8億，其中用戶累計出示健康碼的次數則超過了200億次。正是由于微信小程序用完即走的這一特點，用戶才在僅需要出示健康碼這種低頻事件中使用了微信小程序。而計算器也是低頻事件，人們僅在很少的時候需要計算，完全可以將原生APP替換。

2 表達式計算

向字符串每輸入一個數字，或刪除字符串的最后一個字符時，都會將表達式進行分割并計算。

2.1 表達式分割

JavaScript的Split（參數1，參數2）函數會實現字符串的分割，參數1可以是字符串也可以是正則表達式，由于我們要用的分割字符不是一個，如要求得數字數組，分割字符分別是‘+’，‘-’，‘*’，‘/’，為了實現小數的精準操作，分割字符還加入了‘.’，當用戶輸入的是‘1.+’時，需要將字符串修改為‘1.0+’或‘1+’。所以此處的參數1只能是正則表達式。JavaScript正則表達式的語法為‘/’開始‘/’結束。由此可見，將字符串表達式分割為數值型數組的語法為numbers=express.split（/[+-÷×.]/），分割后的結果會存到num數組中。將表達式分割為運算符數組的語法為options=express.split（/[d]/），正則表達式中‘d’表示的是所有的數字型字符，即0到9，分割后的結果會存到運算符數組op?tions數組中。

分割后的數組中會有很多的空字符串的數組元素，針對多位數的分割操作，options數組中有很多的空格。如數字12按正則表達式“/［d］/”分割，因為“_1_2_”中的“_”即為空格，所以options有3個元素，都為空格，即[‘’，‘’，‘’]。舉例說明：如12+34×56，numbers數組為[‘’，‘12’，‘34’，‘56’，‘’]，options數組為[‘’，‘’，‘+’‘’‘×’，‘’，‘’]。由此可見，Numbers數組只需要將首尾的空格去掉即可，而options數組不僅要刪除首尾的空格，還需要遍歷數組所有內容，將每一個空字符串都刪除。

2.2 刪除多余空字符串

刪除數組中空字符串使用Array.splice（參數1，參數2，參數3…n）函數，參數1為數組中的數組元素的index值，參數2為刪除的數組元素的個數，剩下的參數為新插入的數組元素。

由于numbers數組好操作，只需要刪除首尾的兩個空字符串即可。

Options數組中會有多個空字符串，按數字分割則為_1_2_3_4+3_3_。字符串中的_即為so數組中的空字符串，so為[’，‘’，‘*’，‘+’，‘’]，需要去除字符串數組中的空字符串，需要注意的是，當數組去掉一個元素以后，相當于后面的內容已經全部往前移了一個位置，如果此時仍讓循環變量+1，則下一次的循環項相對于本次循環項則前進了兩個位置。舉例說明，若so為[‘’，‘’，‘*’，‘+’，‘’]，第一次循環so變為[‘’，‘*’，‘+’，‘’]，循環變量的值變為1，直接對‘*’這一項進行操作，導致so的第一項‘’漏掉了，所以每次刪除掉一個空字符串數組項后，循環變量需要自減1，具體代碼如下：

2.3 運算符優先級計算

得到數組后即可進行計算了。先取兩個數字與一個運算符進行計算，即數字numbers[i]和numbers[i+1]和options[i]，計算完需要刪除num?bers[i+1]和options[i]。舉例說明“3+2*6”，初始值為sn[3，2，6]，options[+，*]。首先需要計算的是乘除運算，乘除運算需要從左往右計算，所以使用循環從左往右判斷，是乘法則先乘，否則先除，取數字2和6，取運算符*進行計算，2變為12，刪除6，刪除*，運算結果應為num?bers[3，12]，options[+]。同前所述，每次在循環體中刪除元素后，都需要將循環變量自減1。

其中n1和n2為取出的兩個數。當運算符為‘×’，計算時需要使用計算機編程語言使用的乘號‘*’。為了實現從左到右計算，并實現優先級，所以需要從左到右判斷每一個字符，先進行乘除運算，后再進行加減運算。代碼與乘除相識，只是運算符不同而已。

最后當numbers數組只有一個數組元素時，只需要將該元素顯示在顯示屏上即可。

為了更好的觀察計算機的計算過程，在每次計算時都在console控制臺將數組顯示出來，如表達式“2-3×5÷8”，先計算3×5，刪除5和運算符×，將3修改為15。再計算15÷8，刪除8與運算符÷，修改15為1.875。最后計算2-1.875，最后結果為0.125。刪除運算符-。當options數組為空即可停止運算輸出顯示結果。

3 數據綁定

該功能的實現應用的主要技術是數據綁定，在微信小程序中，數據綁定的語法是{{ex?press}}，其中express可以是普通的變量，可以是條件、屬性、關鍵字等。數據綁定常用的場合主要分為顯示結果和改變樣式兩種：

3.1 表達式與計算結果的顯示

如表達式的顯示效果，用戶每單擊一個按鈕都會改變表達式的值。index.wxml文件中在需要顯示的地方添加代碼{{express}}。index.js文件中在data的屬性值區域添加變量express，并賦初始值。當用戶單擊按鈕時修改該變量的值，需要注意的是，若要實現數據綁定，不能通過簡單的賦值表達式達到想要的效果，需要使用setData（參數）函數實現，其中參數為json格式的對象類型，即鍵值對。具體代碼為：this.set?Data（{express：之前的表達式+n}），其中n為用戶當前按鈕傳遞給后臺的值。

3.2 放大處理改變樣式

數據綁定的內容可采用三元表達式，index.wxml文件中在需要顯示的組件中添加style的屬性值，通過用戶在后臺給isequal變量賦的值來決定顯示結果的字體大小，具體代碼如下：style=“font-size:{{isequal?60:(result.length＞10?30:50)}}px;”＞。其中當isequal為真時，字體設置為60 px，否則如果字符串長度大，則字體小。同上所述，data中添加isequal變量，并賦初值為false，當用戶單擊等于操作時，通過setdata方法將該變量賦值為true。需要注意的是，當用戶單擊除了等于號外的任何按鈕時，都需要將該值修改為false，否則容易出現字體一直變大的狀態。

4 測試與維護

通過不斷的測試、調試與維護。計算器在手機上運行界面如圖1所示。

圖1 微信小程序計算器

為了讓讀者更好的看到計算機的工作流程，特意將數組內容在控制臺輸出，如圖2所示。

圖2 console控制臺實時監測運算過程

為了讓讀者更好的體驗該小程序的運行效果，同時針對小程序中存在的不足，也歡迎讀者提出您的寶貴意見。讀者可以使用微信掃一掃功能運行計算器小程序。二維碼如圖3所示。

圖3 計算器小程序的二維碼

5 結語

經過一周的編程與不斷的測試調試，目前該項目已經是2.1版本，所有微信用戶可以掃碼使用，實現可以處理字符串表達式的，具有優先級處理功能的計算器。不論是頁面的美觀度、用戶的體驗度，還是功能的正確性、完善性與代碼的健壯性，都能滿足專業的要求。