1. 顯示變數(shù)和運(yùn)算符

displayValue 變數(shù)儲(chǔ)存螢?zāi)簧弦@示的目前值，確保計(jì)算過程中的準(zhǔn)確更新。 lastOperator 變數(shù)追蹤最後使用的操作符，防止連續(xù)操作符輸入等錯(cuò)誤。此外，console.log 用於調(diào)試目的，特別是記錄CalculatorBtns 節(jié)點(diǎn)列表以供審查。

1. 按鈕點(diǎn)擊事件監(jiān)聽器/循環(huán)每個(gè)按鈕

forEach方法用於循環(huán)遍歷calculatorBtns集合中的每個(gè)按鈕。對(duì)於每個(gè)按鈕，innerText屬性被分配給buttonValue變量，該變量保存按鈕上顯示的文本，例如“AC”，“C”，“9”，“ ”等

然後將 onclick 事件偵聽器新增至每個(gè)按鈕。單擊按鈕時(shí)，將執(zhí)行已指派的功能。此函數(shù)handleButtonAction(buttonValue) 將按鈕的文字(buttonValue) 作為參數(shù)。透過傳遞按鈕的值，該函數(shù)允許計(jì)算器執(zhí)行正確的操作，例如清除顯示、輸入數(shù)字或執(zhí)行數(shù)學(xué)運(yùn)算。

1. 處理鍵盤輸入的按鍵

這使得計(jì)算器也可以與鍵盤一起使用。當(dāng)按下某個(gè)鍵時(shí)，會(huì)觸發(fā)對(duì)應(yīng)按鈕的操作。例如，按下鍵盤上的「1」將觸發(fā)值為「1」的handleButtonAction()函數(shù)。

1. 顯示功能

display()函數(shù)用目前的displayValue更新顯示框(displayBox)的內(nèi)容。如果displayValue為空，則預(yù)設(shè)顯示「0.0」。

1. 按鈕操作處理程序（主要邏輯）：

程式碼執(zhí)行幾個(gè)步驟來更新計(jì)算器的顯示並處理計(jì)算。首先，eval(displayValue) 計(jì)算儲(chǔ)存在displayValue 中的數(shù)學(xué)運(yùn)算式。例如，如果顯示“3 5”，則 eval 計(jì)算並傳回結(jié)果，在本例中為 8。

接下來，displayValue = String(result) 將結(jié)果轉(zhuǎn)換為字串並更新displayValue 以在螢?zāi)簧巷@示結(jié)果。計(jì)算完成後，lastOperator = "" 將lastOperator 重設(shè)為空字串，確保清除任何先前的運(yùn)算子。最後，display()函數(shù)更新顯示以顯示計(jì)算結(jié)果。

1. AC（全部清除）和 C（清除）按鈕邏輯

點(diǎn)選「AC」按鈕時(shí)，程式碼檢查buttonValue是否等於「AC」。如果為 true，它將將 displayValue 重置為空字串，從而有效地清除整個(gè)顯示並重置計(jì)算器。然後呼叫 display() 函數(shù)以空值更新顯示。

對(duì)於“C”按鈕，如果buttonValue是“C”，程式碼使用slice(0, -1)從displayValue刪除最後一個(gè)字元。這允許用戶刪除最後一個(gè)輸入或字符，並再次調(diào)用 display() 函數(shù)以相應(yīng)地更新顯示。

1. 驗(yàn)證運(yùn)算子

此條件用於驗(yàn)證是否可以根據(jù)目前顯示的值按下操作符。

條件 ["%", "/", "*", " "].includes(buttonValue) 檢查點(diǎn)選的按鈕是否為運(yùn)算子之一 (%, /, *, )。如果該按鈕是運(yùn)算符，則下一步檢查 if (!displayValue || displayValue === "-") 確保在顯示為空或僅包含減號(hào) (-) 時(shí)無法按下該運(yùn)算符。這可以防止出現(xiàn)諸如具有兩個(gè)連續(xù)運(yùn)算符或以一個(gè)運(yùn)算符開頭之類的錯(cuò)誤。如果條件為真，則函數(shù)將簡(jiǎn)單返回，並且不會(huì)將任何運(yùn)算符添加到顯示中。

1. 防止連續(xù)運(yùn)算子

此程式碼區(qū)塊處理連續(xù)按下運(yùn)算子的情況，防止無效輸入，例如「 」或「 -?！?/p>

首先，if (["%", "/", "*", " ", "-"].includes(buttonValue)) 檢查點(diǎn)選的按鈕是否為運(yùn)算子。然後， const lastCharacter = displayValue.slice(-1) 檢索 displayValue 中目前表達(dá)式的最後一個(gè)字元。

接下來，lastOperator = buttonValue 更新lastOperator 變數(shù)以儲(chǔ)存目前運(yùn)算元。如果最後一個(gè)字元也是運(yùn)算子（透過if (["%", "/", "*", " ", "-"].includes(lastCharacter)) 檢查），則程式碼使用displayValue.slice( 0, -1)。這可確保表達(dá)式末尾僅出現(xiàn)一個(gè)運(yùn)算符，並防止添加連續(xù)的運(yùn)算符。

1. 驗(yàn)證小數(shù)點(diǎn)

此程式碼區(qū)塊確保小數(shù)點(diǎn) (.) 在數(shù)字中只能出現(xiàn)一次，從而防止像「3..5.」這樣的無效輸入

首先，條件 if (buttonValue === ".") 檢查點(diǎn)擊的按鈕是否為小數(shù)點(diǎn)。如果是，則繼續(xù)進(jìn)行驗(yàn)證。

接下來， const lastOperatorIndex = displayValue.lastIndexOf(lastOperator) 尋找最後一個(gè)運(yùn)算子在 displayValue 中的位置。然後， const currentNumberSet = displayValue.slice(lastOperatorIndex) || displayValue 提取最後一個(gè)運(yùn)算子之後的 displayValue 部分，該部分錶示當(dāng)前輸入的數(shù)字。如果沒有運(yùn)算符，則考慮整個(gè) displayValue。

最後，if (currentNumberSet.includes(".")) 檢查擷取的數(shù)字部分是否已包含小數(shù)點(diǎn)。如果是這樣，函數(shù)會(huì)提前返回，從而防止使用者輸入第二個(gè)小數(shù)點(diǎn)。這可確?！?.5」等數(shù)字有效，但「3..5」等輸入無效。

1. 用新值更新顯示：

程式碼displayValue = displayValue buttonValue;將按下的按鈕的值（例如數(shù)字或運(yùn)算子）附加到現(xiàn)有的 displayValue 字串。當(dāng)使用者與計(jì)算器互動(dòng)時(shí)，這會(huì)建立當(dāng)前表達(dá)式或數(shù)字。

附加按鈕值後，呼叫display()函數(shù)來更新顯示，確保它反映更新的displayValue。這可確保使用者在輸入時(shí)看到最新的值或表達(dá)式。

結(jié)論

此 JavaScript 程式碼處理在計(jì)算器中顯示值、執(zhí)行計(jì)算、清除輸入和驗(yàn)證表達(dá)式的邏輯。它適用於按鈕點(diǎn)擊和鍵盤輸入。主要功能包括按下「=」或「Enter」鍵時(shí)執(zhí)行計(jì)算、處理AC（全部清除）和C（清除最後一個(gè)字元）按鈕，以及防止無效操作，例如連續(xù)運(yùn)算符或多個(gè)小數(shù)點(diǎn)。此外，每次操作後都會(huì)更新顯示，確保使用者看到最新的值或表達(dá)式。這些功能共同為功能性和互動(dòng)式計(jì)算器奠定了基礎(chǔ)。

下面是我的演示鏈接，因此請(qǐng)隨意查看完整程式碼、克隆存儲(chǔ)庫或與實(shí)時(shí)演示進(jìn)行交互。快樂編碼！
GITHUB - [https://github.com/bigyan1997/calculator]
VERCEL - [https://calculator-delta-sepia-91.vercel.app/]