JavaScript 中的乘法運算子 (*) 是什麼？

在本教程中，我們將學習 JavaScript 中的乘法運算子 (*)。乘法運算子是一個二元運算子，需要至少兩個運算元才能進行運算。乘法運算子簡單地將左運算元乘以右運算元，或者您可以說它只是將左運算元的值增加相同的值，直到右運算元的值變為零。下面的示例將向您解釋一切 -

3 * 2 = 6 OR 3 + 3 = 6
5 * 3 = 15 OR 5 + 5 + 5 = 15

在上面的示例中，我們看到了乘法運算子的工作原理，它只是將左運算元3和5的值分別增加了相同的值2和3次。

語法

以下語法將向您展示如何在 JavaScript 中使用乘法運算子 -

var product = val1 * val2;

讓我們透過在程式碼示例中實際實現它來了解乘法運算子的工作原理 -

演算法

步驟 1 - 在第一步中，我們將在 HTML 文件中定義兩個不同的數字型別輸入標籤，以獲取使用者的數字輸入。

步驟 2 - 在這一步中，我們將新增一個帶有 onclick 事件的按鈕標籤，以便在使用者單擊按鈕時顯示乘法運算子的結果。

步驟 3 - 在下一步中，我們將定義一個 JavaScript 函式並將其作為值分配給 onclick 事件，該事件在使用者點選時呼叫此函式。

步驟 4 - 在最後一步中，我們將獲取使用者輸入的內容，並根據上述語法對它們應用乘法運算子，之後我們將編寫邏輯以在使用者螢幕上顯示結果。

示例 1

以下示例將說明如何使用具有兩個相同型別輸入的乘法運算子 -

<!DOCTYPE html>
<html>
<body>
   <h2> Using Multiplication operator (*) in JavaScript</h2>
   <h4> Enter two numbers: </h4>
   <input type="number" id="inp1"> <br> <br>
   <input type="number" id="inp2"> <br> <br>
   <p> Click to see the result of Multiplication 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);
         var pro = val1 * val2;
         result.innerHTML += " The result of the product or the multiplication operator (*) of expression <b> " + val1 + " * " + val2 + " </b> is: <b> " + pro + " </b> <br> ";
      }
   </script>
</body>
</html>

在此示例中，我們從使用者處獲取了兩個數字作為輸入，然後對它們應用乘法運算子以檢視此運算子的工作原理。

讓我們看看當用戶輸入的不同資料型別時，乘法運算子的工作原理和行為。

演算法

上面的演算法和這個示例幾乎相同。您只需要將任何一個輸入標籤的型別從number更改為text，並且在保持其餘程式碼不變的情況下就可以繼續使用了。

示例 2

以下示例將解釋在使用者輸入的不同資料型別的情況下，乘法運算子的行為 -

<!DOCTYPE html>
<html>
<body>
   <h2> Multiplication operator (*) in JavaScript </h2>
   <h4> Enter two numbers: </h4>
   <input type="number" id="inp1"> <br> <br>
   <input type="text" id="inp2"> <br> <br>
   <p> Click to see the result of Multiplication 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 = inp2.value;
         var pro = val1 * val2;
         result.innerHTML += " The result of the product or the multiplication operator (*) of expression <b> " + val1 + " * " + val2 + " </b> is: <b> " + pro + " </b> <br> ";
      }
   </script>
</body>
</html>

在上面的示例中，我們以兩種不同的資料型別（即字串和數字）的形式從使用者處獲取輸入，如果兩個輸入都是整數，則乘法運算子按其一直以來的方式工作，但如果一個輸入是數字而另一個是字串，則它將顯示NaN（非數字）作為輸出。

讓我們再看一個程式碼示例，其中我們處理多個輸入並對它們應用乘法運算子，以檢視此運算子在這種情況下下的行為。

演算法

此示例的演算法與上述示例類似，您只需要在文件中新增一個額外的輸入標籤以從使用者處獲取多個輸入，然後在 JavaScript 程式碼中獲取它以對所有輸入應用乘法運算子。

示例 3

以下示例將顯示乘法運算子在多個運算元或兩個以上運算元情況下的行為 -

<!DOCTYPE html>
<html>
<body>
   <h2>Multiplication operator (*) in JavaScript </h2>
   <h4> Enter three numbers: </h4>
   <input type="number" id="inp1"> <br>
   <input type="number" id="inp2"> <br>
   <input type="number" id="inp3"> <br>
   <p> Click to see the result of Multiplication 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 inp3 = document.getElementById("inp3");
         var val1 = Number(inp1.value);
         var val2 = Number(inp2.value);
         var val3 = Number(inp3.value)
         var pro = val1 * val2 * val3;
         result.innerHTML += " The result of the product or the multiplication operator (*) of expression <b> " + val1 + " * " + val2 + " * " + val3 + " </b> is: <b> " + pro + " </b> <br> ";
      }
   </script>
</body>
</html>

在此示例中，我們從使用者處獲取了三個數字型別的輸入，並對它們應用了乘法運算子，並檢視此運算子在這種情況下下的行為。

我們已經看到了在三種不同場景下實際實現乘法運算子的三個不同示例。在第一個示例中，我們看到了運算子的簡單實現，然後在後兩個示例中，我們看到了在兩種不同場景下的行為，一種是在不同型別輸入的情況下，另一種是在相同型別的多輸入的情況下。

更新於: 2022-11-08

394 次瀏覽

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.