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

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告