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月8日

394 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告