JavaScript 中的乘法賦值運算子(*=)是什麼?


在這篇文章中,我們將學習 JavaScript 中的乘法賦值運算子(*=)。通常,我們使用a = a * b這個表示式來更新變數的值,該值是在將變數的原始值與其他值相乘後返回的值,這很容易理解,但是如果我們像這樣更新多個變數的值,則編寫起來會很費時間。因此,為了克服這個問題,JavaScript 引入了乘法賦值運算子(*=),因為它是在上面表示式基礎上的簡寫形式。

乘法賦值運算子(*=)

乘法賦值運算子是一個二元賦值運算子,這意味著它需要至少一對運算元來執行任務或將值賦值給運算元。乘法賦值運算子將左運算元的值與右運算元的值相乘,並將結果賦值給左運算元以更新其值。

語法

以下語法將向您展示如何使用乘法賦值(*=)運算子來更新左運算元的值:

operand1 *= operand2
//equivalent to operand1 = operand1 * operand2

讓我們藉助程式碼示例詳細瞭解乘法賦值運算子(*=)的使用或實現。

演算法

步驟 1 - 在第一步中,我們將在 HTML 文件中新增兩個數字型別的輸入元素,以獲取使用者的數字輸入。

步驟 2 - 在這一步中,我們將新增一個帶有 onclick 事件的按鈕,稍後當事件觸發時,該按鈕將呼叫一個函式。

步驟 3 - 在下一步中,我們將定義一個 JavaScript 函式並將其分配給按鈕的 onclick 事件,以便稍後呼叫它並將結果顯示給使用者。

示例 1

下面的示例將解釋如何使用乘法賦值運算子(*=)來更新左運算元的值:

<!DOCTYPE html> <html> <body> <h2> Multiplication Assignment operator (*=) in JavaScript </h2> <p> Enter two numbers: </p> <input type="number" id="inp1"> <br> <br> <input type="number" id="inp2"> <br> <br> <p> Click to see the result of Multiplication Assignment operator (*=) of above inputs. </p> <p id="result"></p> <button onclick="display()"> Show Result </button> <script> var result = document.getElementById("result"); function display() { var inp1 = document.getElementById("inp1"); var inp2 = document.getElementById("inp2"); var val1 = Number(inp1.value); var val2 = Number(inp2.value); val1 *= val2; // val1 = val1 * val2; result.innerHTML = "<b>Result: " + val1 + " </b> "; } </script> </body> </html>

在上面的示例中,首先,我們使用它們的 id 獲取了兩個輸入元素,然後使用 value 屬性獲取它們的值,並使用Number()方法將其轉換為數字型別,在執行所有這些操作後,我們對val1變數使用了乘法賦值運算子,以使用兩個輸入值的乘積結果(即val1 * val2)來更新其值,然後將結果顯示給使用者。

讓我們再看一個示例,其中一個輸入是數字型別,而另一個是字串型別。

演算法

此示例和上面示例的演算法相同,您只需要做一些更改即可。您必須將其中一個輸入元素的輸入型別替換為文字,其餘程式碼將保持不變,如以下示例所示。

示例 2

以下示例將說明當兩個運算元的資料型別不同時,乘法賦值運算子的行為:

<!DOCTYPE html> <html> <body> <h2> Multiplication Assignment operator (*=) in JavaScript</h2> <p> Enter two numbers: </p> <input type="number" id="inp1"> <br> <br> <input type="text" id="inp2"> <br> <p> Click to see the result of Multiplication Assignment operator (*=) of above inputs. </p> <p id="result"> </p> <button onclick="display()"> Show Result </button> <script> var result = document.getElementById("result"); function display() { var inp1 = document.getElementById("inp1"); var inp2 = document.getElementById("inp2"); var val1 = Number(inp1.value); var num = val1; // val1 = val1 * val2; var val2 = Number(inp2.value); val1 *= val2; result.innerHTML += " Result: <b> " + val1 + " </b> <br> "; } </script> </body> </html>

在此示例中,我們對不同資料型別的變數使用了乘法賦值運算子(*=)。在這種情況下,如果字串變數的值是數字,則乘法賦值運算子的工作方式與兩個變數都是數字型別時相同。但是,如果字串變數的值是單詞或任何字串,則它將返回NaN,因為數字和字串的乘積是 NaN。

在本教程中,我們瞭解了 JavaScript 中的乘法賦值運算子是什麼,以及透過兩個不同的程式碼示例來了解該運算子在不同條件下的工作方式,從而理解了乘法賦值運算子的行為。我們採用的第一個示例顯示了運算子在數字型別變數情況下的行為,而在第二個示例中,我們對不同資料型別的不同變數使用了乘法賦值運算子,從中我們瞭解到,當數字與單詞相乘時,乘法賦值運算子將無法按預期工作。

更新於: 2022年11月8日

451 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.