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

displayValue 變量保存要在屏幕上顯示的當(dāng)前值，確保計(jì)算過程中的準(zhǔn)確更新。 lastOperator 變量跟蹤最后使用的操作符，防止連續(xù)操作符輸入等錯誤。此外，console.log 用于調(diào)試目的，特別是記錄CalculatorBtns 節(jié)點(diǎn)列表以供審查。

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

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

然后將 onclick 事件偵聽器添加到每個按鈕。單擊按鈕時(shí)，將執(zhí)行分配的功能。該函數(shù)handleButtonAction(buttonValue) 將按鈕的文本(buttonValue) 作為參數(shù)。通過傳遞按鈕的值，該函數(shù)允許計(jì)算器執(zhí)行正確的操作，例如清除顯示、輸入數(shù)字或執(zhí)行數(shù)學(xué)運(yùn)算。

1. 處理鍵盤輸入的按鍵

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

1. 顯示功能

display()函數(shù)用當(dāng)前的displayValue更新顯示框(displayBox)的內(nèi)容。如果displayValue為空，則默認(rèn)顯示“0.0”。

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

代碼執(zhí)行幾個步驟來更新計(jì)算器的顯示并處理計(jì)算。首先，eval(displayValue) 計(jì)算存儲在displayValue 中的數(shù)學(xué)表達(dá)式。例如，如果顯示“3 5”，則 eval 計(jì)算并返回結(jié)果，在本例中為 8。

接下來，displayValue = String(result) 將結(jié)果轉(zhuǎn)換為字符串并更新displayValue 以在屏幕上顯示結(jié)果。計(jì)算完成后，lastOperator = "" 將lastOperator 重置為空字符串，確保清除任何先前的運(yùn)算符。最后，display()函數(shù)更新顯示以顯示計(jì)算結(jié)果。

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

單擊“AC”按鈕時(shí)，代碼檢查buttonValue是否等于“AC”。如果為 true，它將把 displayValue 重置為空字符串，從而有效地清除整個顯示并重置計(jì)算器。然后調(diào)用 display() 函數(shù)以用空值更新顯示。

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

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

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

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

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

此代碼塊處理連續(xù)按下運(yùn)算符的情況，防止無效輸入，例如“ ”或“ -。”

首先，if (["%", "/", "*", " ", "-"].includes(buttonValue)) 檢查單擊的按鈕是否是運(yùn)算符。然后， const lastCharacter = displayValue.slice(-1) 檢索 displayValue 中當(dāng)前表達(dá)式的最后一個字符。

接下來，lastOperator = buttonValue 更新lastOperator 變量以存儲當(dāng)前操作符。如果最后一個字符也是一個運(yùn)算符（通過 if (["%", "/", "*", " ", "-"].includes(lastCharacter)) 檢查），則代碼使用 displayValue.slice( 0, -1)。這可確保表達(dá)式末尾僅出現(xiàn)一個運(yùn)算符，并防止添加連續(xù)的運(yùn)算符。

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

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

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

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

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

1. 用新值更新顯示：

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

附加按鈕值后，調(diào)用display()函數(shù)來更新顯示，確保它反映更新的displayValue。這可確保用戶在輸入時(shí)看到最新的值或表達(dá)式。

結(jié)論

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

下面是我的演示鏈接，因此請隨意查看完整代碼、克隆存儲庫或與實(shí)時(shí)演示進(jìn)行交互?？鞓肪幋a！
GITHUB - [https://github.com/bigyan1997/calculator]
VERCEL - [https://calculator-delta-sepia-91.vercel.app/]