5.5 使用JavaScript运算符

JavaScript定义了大量标准运算符。表5-2罗列了最常用的一些运算符。

表5-2 常用的JavaScript运算符

5.5.1 相等和等同运算符

相等和等同运算符需要特别说明一下。相等运算符会尝试将操作数转换为同一类型以便判断是否相等。只要明白其工作方式，这就是一个很方便的特性。代码清单5-19示范了相等运算符的用法。

代码清单5-19 使用相等运算符

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var firstVal = 5;
                  var secondVal = "5";
                  if (firstVal == secondVal) {
                      document.writeln("They are the same");
                  } else {
                      document.writeln("They are NOT the same");
                  }
                </script>
            </body>
        </html>

这段脚本的输出结果如下：

        They are the same

此例中JavaScript先将两个操作数转换为同一类型再对其进行比较——从本质上讲，相等运算符测试两个值是否相等，不管其类型。如果想判断值和类型是否都相同，那么应该使用的是等同运算符（===，由三个等号组成。相等运算符是由两个等号组成），如代码清单5-20所示。

代码清单5-20 使用等同运算符

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var firstVal = 5;
                  var secondVal = "5";
                  if (firstVal === secondVal) {
                      document.writeln("They are the same");
                  } else {
                      document.writeln("They are NOT the same");
                  }
              </script>
            </body>
        </html>

此例中等同运算符判定两个变量不一样。这个运算符不会进行类型转换，这段脚本的输出结果如下所示：

        They are NOT the same

提示

代码清单5-19和代码清单5-20使用了if条件语句。这个语句先对一个条件进行评估，要是结果为true，就执行代码块中的语句。if语句还可以加上一个else子句，子句所含代码块中的语句会在条件为false的情况下执行。

JavaScript基本类型（指字符串和数值等内置类型）的比较是值的比较，而JavaScript对象的比较则是引用的比较。代码清单5-21展示了JavaScript处理对象的相等和等同测试的方式。

代码清单5-21 对象的相等和等同测试

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var myData1 = {
                      name: "Adam",
                      weather: "sunny",
                  };
                  var myData2 = {
                      name: "Adam",
                      weather: "sunny",
                  };
                  var myData3 = myData2;
                  var test1 = myData1 == myData2;
                  var test2 = myData2 == myData3;
                  var test3 = myData1 === myData2;
                  var test4 = myData2 === myData3;
                  document.writeln("Test 1: " + test1 + " Test 2: " + test2);
                  document.writeln("Test 3: " + test3 + " Test 4: " + test4);
              </script>
            </body>
        </html>

这段脚本的结果如下：

        Test 1: false Test 2: true
        Test 3: false Test 4: true

代码清单5-22对基本类型变量做了同样的测试。

代码清单5-22 基本类型的相等和等同测试

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var myData1 = 5;
                  var myData2 = "5";
                  var myData3 = myData2;
                  var test1 = myData1 == myData2;
                  var test2 = myData2 == myData3;
                  var test3 = myData1 === myData2;
                  var test4 = myData2 === myData3;
                  document.writeln("Test 1: " + test1 + " Test 2: " + test2);
                  document.writeln("Test 3: " + test3 + " Test 4: " + test4);
              </script>
          </body>
        </html>

其结果如下：

        Test 1: true Test 2: true
        Test 3: false Test 4: true

5.5.2 显式类型转换

字符串连接运算符（+）比加法运算符（也是+）优先级更高。这可能会引起混乱，这是因为JavaScript在计算结果时会自动进行类型转换，其结果未必跟预期一样。代码清单5-23即是一例。

代码清单5-23 字符串连接运算符的优先权

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
var myData1 = 5 + 5;
var myData2 = 5 + "5";
                  document.writeln("Result 1: " + myData1);
                  document.writeln("Result 2: " + myData2);
              </script>
            </body>
        </html>

其结果如下：

        Result 1: 10
        Result 2: 55

第二个结果正是混乱所在。原想的可能是加法运算，而在运算符优先级别和过分热心的类型转换这两个因素的共同作用下，结果却被诠释成了字符串连接运算。为了避免这种局面，可以对值的类型进行显式转换，以确保执行的是正确的运算。表5-3列出了一些最常用的类型转换方法。

1．将数值转换为字符串

如果想把多个数值类型变量作为字符串连接起来，可以用toString方法将数值转换为字符串，如代码清单5-24所示。

代码清单5-24 使用Number.toString方法

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var myData1 =(5).toString() + String(5);
                  document.writeln("Result: " + myData1);
              </script>
            </body>
        </html>

注意此例中先把数值放在括号中然后才调用toString方法。这是因为要想调用number类型定义的toString方法，必须先让JavaScript将字面量转换为一个number类型的值。例中还示范了与调用toString方法等效的另一种做法，即调用String函数并将要转换的数值作为参数传递给它。这两种做法的作用都是将number类型的值转换为string类型，因此+这个运算符会被用来进行字符串连接而不是加法运算。这段脚本的输出结果如下所示：

        Result: 55

将数值转换为字符串还有一些别的方法，它们可以对转换方式施加更多控制。所有这些方法在表5-3中都有简要说明，它们都是number类型定义的方法。

表5-3 数值到字符串的常用转换方法

2．将字符串转换为数值

与前述需求相反，有时需要把字符串转换为数值，以便进行加法运算而不是字符串连接。这可以用Number函数办到，如代码清单5-25所示。

代码清单5-25 将字符串转换为数值

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var firstVal = "5";
                  var secondVal = "5";
var result = Number(firstVal) + Number(secondVal);
                  document.writeln("Result: " + result);
              </script>
            </body>
        </html>

其输出结果如下：

        Result: 10

Number函数解析字符串值的方式很严格，在这方面parseInt和parseFloat函数更为灵活，后面这两个函数还会忽略数字字符后面的非数字字符。这三个函数的说明见表5-4。

表5-4 字符串到数值的常用转换函数

上一章目录下一章