在 JavaScript 中,加法和连接运算符是否相同?


我们不能说两者相同或不同。在某些情况下,加法和连接运算符会产生相同的结果,但在某些情况下,它们的结果会不同。这完全取决于变量的类型。我们将在下面详细了解。

我们在 JavaScript 中使用 + 运算符进行加法,使用 concat() 方法进行连接。在某些情况下,+ 运算符和 concat() 方法都会返回相同的结果。使用 + 运算符和 concat() 方法连接两个字符串会返回相同的结果。

我们也可以对加法和连接运算都使用相同的 + 运算符,但这两个操作并不相同。当其中一个操作数是字符串时,+ 运算符会执行连接操作。如果两个操作数都是数字,则执行简单的加法。

让我们使用不同的程序示例详细了解在 JavaScript 中加法和连接运算符是否相同。

两个字符串的加法和连接

让我们将两个变量视为字符串。

示例:使用加法(+)

Open Compiler
<!DOCTYPE html> <html> <body> <h2>Adding two strings</h2> <p id="demo"></p> <script> let x = "Hello"; let y = "World!"; let z = x + y; document.getElementById("demo").innerHTML = z; document.write(typeof(z)); </script> </body> </html>

我们可以在这里观察到,如果我们使用加法运算连接两个字符串,输出将是一个字符串。

示例:使用连接 (concat)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Concatenating two strings</p> <p id="demo"></p> <script> let x = "Hello"; let y = "World!"; let z = x.concat(y); document.getElementById("demo").innerHTML = z; document.write(typeof(z)); </script> </body> </html>

您会注意到,两个字符串的加法和连接是相同的。

两个数组的加法和连接

让我们将两个变量视为数组。

示例:使用加法(+)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Adding two arrays</p> <p id="demo"></p> <script> let arr1 = [1,2,3,4]; let arr2 = [5,6,7,8]; let res = arr1 + arr2; document.getElementById("demo").innerHTML = res; document.write(typeof(res)); </script> </body> </html>

在这里我们可以检查,当我们添加两个数组时,第二个数组的第一个元素与第一个数组的最后一个元素组合。加法(+)不会自动添加逗号(,)。如果您需要分隔这些元素,则需要在第二个数组的第一个位置添加一个空元素。例如,

示例

Open Compiler
<!DOCTYPE html> <html> <body> <p>Adding two arrays</p> <p id="demo"></p> <script> let arr1 = [1,2,3,4]; let arr2 = [,5,6,7,8]; let res = arr1 + arr2; document.getElementById("demo").innerHTML = res; document.write(typeof(res)); </script> </body> </html>

如果我们使用加法连接两个数组,输出将是字符串。

示例:使用 concat() 连接两个数组

我们将在此处检查将变量连接为数组。

Open Compiler
<!DOCTYPE html> <html> <body> <p>Concatenate two arrays</p> <p id="demo"></p> <script> let arr1 = [1,2,3,4]; let arr2 = [5,6,7,8]; let res = arr1.concat(arr2); document.getElementById("demo").innerHTML = res; document.write(typeof(res)); </script> </body> </html>

这里,不需要在第二个数组的第一个位置添加空元素。如果我们连接两个数组,输出将是一个对象。

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

两个数字的加法和连接

让我们将两个变量视为数字。

示例:使用加法(+)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Adding two numbers</p> <p id="demo"></p> <script> let x = 102; let y = 199; let z = x + y; document.getElementById("demo").innerHTML = z; document.write(typeof(z)); </script> </body> </html>

我们可以在这里观察到,如果我们使用加法(+)连接两个数字,输出将是一个数字。

示例:使用连接 (concat)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Concating two numbers</p> <p id="demo"></p> <script> let x = 102; let y = 199; try{ let z = x.concat(y); document.getElementById("demo").innerHTML = z; } catch(e) { document.getElementById("demo").innerHTML = e; } </script> </body> </html>

这将抛出一个错误。如果我们连接两个数字,输出是一个错误。

布尔值的加法和连接

让我们将两个变量视为布尔值。

示例:使用加法(+)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Adding two booleans</p> <p id="demo"></p> <script> let addTrue = true; let addFalse = false; let res = addTrue + addFalse; document.getElementById("demo").innerHTML = res; document.write(typeof(res)); </script> </body> </html>

在这里,true 被计为 1,false 被计为 0。它只是一个数学运算,即加法。

如果我们有两个变量都为 true,则输出为 2。如果两个变量都为 false,则输出为 0。

示例:使用连接 (concat)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Concating two booleans</p> <p id="demo"></p> <script> try{ let concatTrue = true; let concatFalse = false; let res = concatTrue.concat(concatFalse); document.getElementById("demo").innerHTML = res; } catch(e) { document.getElementById("demo").innerHTML = e; } </script> </body> </html>

在这里我们可以看到,连接对于连接布尔值不起作用。如果我们连接布尔值,它会抛出一个未捕获的错误。

对象的加法和连接

现在,我们检查变量是否为对象。

示例:使用加法(+)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Adding two objects</p> <p id="demo"></p> <script> let obj1 = {name : "xx"}; let obj2 = {name : "yy"}; let res = obj1 + obj2; document.getElementById("demo").innerHTML = res; document.write(typeof(res)); </script> </body> </html>

示例:使用连接 (concat)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Concatenating two objects</p> <p id="demo"></p> <script> try{ let obj1 = {name : "xx"}; let obj2 = {name : "yy"}; let res = obj1.concat(obj2); document.getElementById("demo").innerHTML = res; document.write(typeof(res)); } catch(e) { document.getElementById("demo").innerHTML = e; } </script> </body> </html>

到目前为止,我们已经看到了将变量作为相同数据类型进行加法和连接。现在,我们将检查不同数据类型的行为。

示例

在这里,我们将一个变量作为数字,另一个变量作为字符串。

Open Compiler
<!DOCTYPE html> <html> <body> <p>Addition of number and string</p> <p id="demo"></p> <script> let num = 100; let str = " records"; let res = num + str; document.getElementById("demo").innerHTML = res; document.write(typeof(res)); </script> </body> </html>

示例:使用连接 (concat)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Concatenation of number and string</p> <p id="demo"></p> <script> let num = 100; let str = " records"; let res = str.concat(num); document.getElementById("demo").innerHTML = res; document.write(typeof(res)); </script> </body> </html>

在这里,我们已经知道我们不能对数字使用 concat。所以我们将 str 与 num 连接起来。如果我们将数字与 str 连接起来,它会抛出一个未捕获的错误。

在上面的代码中,对于加法和连接,我们将获得相同的输出。

示例:使用加法(+)

在这里,我们将检查多个变量。

Open Compiler
<!DOCTYPE html> <html> <body> <p>Adding multiple variables</p> <p id="demo"></p> <script> let num = 1; let bool = true; let arr = [,2,4,5,6]; let str = "Hello"; let obj = {name : " World!"} let res = num + bool + arr + str + obj; document.getElementById("demo").innerHTML = res; document.write(typeof(res)) </script> </body> </html>

示例:使用连接 (concat)

Open Compiler
<!DOCTYPE html> <html> <body> <p>Concating multiple variables</p> <p id="demo"></p> <script> let num = 1; let bool = true; let arr = [,2,4,5,6]; let str = "Hello"; let obj = {name : " World!"} let res = str.concat(arr).concat(num).concat(bool).concat(obj); document.getElementById("demo").innerHTML = res; document.write(typeof(res)) </script> </body> </html>

在上面,我们看到了加法和连接的区别。在某些情况下,两者的输出相同,但在某些情况下则不同。对于相同的情况,输出相同,但结果的类型不同。正如我们所讨论的,输出将取决于变量的类型。

希望这能对加法和连接进行一些澄清。

更新于: 2022-12-08

2K+ 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告