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-08

451 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告