什么是 JavaScript 中的乘法赋值运算符 (*=)?
在本文中，我们将学习 JavaScript 中的乘法赋值运算符 (*=)。一般来说，我们使用 a = a * b 这个表达式来更新变量的值，并将原始值与其他值相乘后返回的值作为更新值，这很容易理解，但如果我们使用更新更多变量的值，则需要反复编写，这会很耗时。因此，为了解决这个问题，JavaScript 向我们介绍了乘法赋值运算符 (*=)，因为它是使用上述表达式的简写形式。
乘法赋值运算符 (*=)
乘法赋值运算符是一个二元赋值运算符，这意味着它至少需要一对操作数来执行任务或将值分配给操作数。乘法赋值运算符将左操作数的值与右操作数的值相乘，并将其分配给左操作数以更新其值。
语法
以下语法将向您展示如何使用乘法赋值 (*=) 运算符来更新左操作数的值 −
operand1 *= operand2 //相当于 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 中的乘法赋值运算符是什么，并借助两个不同的代码示例了解了它的工作原理，以了解乘法赋值运算符在不同条件下的行为。我们采用的第一个示例展示了运算符在数字类型变量的情况下的行为，而在后一个示例中，我们将乘法赋值运算符与不同数据类型的不同变量一起使用，我们了解到，当单词与数字相乘时，乘法赋值运算符不会按预期工作。
