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 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告