使用 == 比较整数与字符串时 JavaScript 中的隐式数据类型转换

Question

代码：

var num = 20;

if(num == "20")
{
    alert("It works");
}
else
{
    alert("Not working");
}

问题：

1. 在 C 编程中，我们有一个规则名称数据类型提升，其中当存在混合数据类型时（例如：整数和浮点数相加），整数将首先转换为浮点数，然后再转换为浮点数。

2. 上面的代码将提示我一个警告框，其中显示消息“It Works”，显示if测试条件评估为true。

3. 对于松散类型的 JavaScript，我只是好奇：是否有像 C 那样的规则来确定在哪种情况下执行哪种转换？除此之外，上面的 JavaScript 代码在进行比较之前将 num 变量值从整数值转换为字符串值，反之亦然？

Answer 1

是的，ECMA-262 规范中的抽象相等比较算法<中描述了 equals 运算符应用的所有类型转换规则。 /a>.

该算法可能看起来相当复杂，但可以概括为以下情况：

1. 两个操作数的类型相同：

   • 对于基元（字符串、数字、布尔值、空值、未定义）
     • 如果值完全相同，则返回 true
   • 对于对象类型
     • 如果两个引用指向同一个对象，则返回 true

2. 如果两个操作数的类型不同

   • 如果一个操作数的类型为 Null 或 Undefined
     • 仅当另一个操作数值为 null 或 undefined 时才返回 true
   • 如果其中一个操作数的类型为布尔值或数字
     • （经过一些步骤）将另一个操作数转换为 Number 并进行比较

3. 如果其中一个操作数是对象而另一个是基元

   • 对对象执行对象到基元的转换并再次比较

对象到基元转换是通过名为 ToPrimitive，此方法将尝试使用内部 [[PrimitiveValue]] 方法。

这将尝试弹出对象的 valueOf 和 toString 方法，并且它将获取第一个返回原始值的值。

如果这两个方法不返回原语，或者它们不可调用，则会抛出 TypeError ，例如：

1 == { toString:null } // TypeError!

上面的语句将产生 TypeError 因为默认的 Object.prototype.valueOf 方法除了实际相同的对象实例（this，不是原始值）之外不会执行任何操作，并且我们正在设置自己的 toString 属性不是一个函数。

一个朋友制作了一个你可能感兴趣的小工具，它显示了所有步骤以及类型之间的递归比较：

• JS Coercion Tool

Answer 2

在 JavaScript 中，有两个运算符可用于比较两个值：== 和 === 运算符。

引自 JavaScript 权威指南第 6 版：

相等运算符==类似于严格相等运算符(===)，但它
不太严格。如果两个操作数的值不是同一类型，
它尝试一些类型转换并再次尝试比较。

和

严格相等运算符===计算其操作数，然后比较
两个值如下，不进行类型转换。

因此，我建议您始终使用 === 以避免出现以下问题：

null == undefined // These two values are treated as equal. 
"0" == 0 // String converts to a number before comparing. 
0 == false // Boolean converts to number before comparing. 
"0" == false // Both operands convert to numbers before comparing.

PS 我可以发布书中写的整个“比较指南”，但它太长了；）只需告诉我和我将为您编辑我的帖子。

Answer 3

避免 JavaScript 中的隐式类型转换。在进行比较之前，请务必采取措施测试和/或转换各个值，以确保您进行的是同类比较。始终显式测试 undefined 以确定值或属性是否有值，使用 null 表示对象变量或属性不引用任何对象，并转换 &比较所有其他值以确保针对相同类型的值执行操作。

Answer 4

我知道问题已经得到解答。我下面给出的是一些转换的示例。对于 JavaScript 新手来说这将会很有用。下面的输出可以与一般算法进行比较，以便于理解。

代码：

var values = ["123",
          undefined,
          "not a number",
          "123.45",
          "1234 error",
          "",
          "       ",
          null,
          undefined,
          true,
          false,
          "true",
          "false"
          ];

for (var i = 0; i < values.length; i++){
    var x = values[i];
    console.log("Start");
    console.log(x);
    console.log(" Number(x) = " + Number(x));
    console.log(" parseInt(x, 10) = " + parseInt(x, 10));
    console.log(" parseFloat(x) = " + parseFloat(x));
    console.log(" +x = " + +x);
    console.log(" !!x = " + !!x);
    console.log("End");
}

输出：

"Start"
"123"
" Number(x) = 123"
" parseInt(x, 10) = 123"
" parseFloat(x) = 123"
" +x = 123"
" !!x = true"
"End"

"Start"
undefined
" Number(x) = NaN"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = NaN"
" !!x = false"
"End"

"Start"
"not a number"
" Number(x) = NaN"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = NaN"
" !!x = true"
"End"

"Start"
"123.45"
" Number(x) = 123.45"
" parseInt(x, 10) = 123"
" parseFloat(x) = 123.45"
" +x = 123.45"
" !!x = true"
"End"

"Start"
"1234 error"
" Number(x) = NaN"
" parseInt(x, 10) = 1234"
" parseFloat(x) = 1234"
" +x = NaN"
" !!x = true"
"End"

"Start"
""
" Number(x) = 0"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = 0"
" !!x = false"
"End"

"Start"
"       "
" Number(x) = 0"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = 0"
" !!x = true"
"End"

"Start"
null
" Number(x) = 0"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = 0"
" !!x = false"
"End"

"Start"
undefined
" Number(x) = NaN"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = NaN"
" !!x = false"
"End"

"Start"
true
" Number(x) = 1"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = 1"
" !!x = true"
"End"

"Start"
false
" Number(x) = 0"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = 0"
" !!x = false"
"End"

"Start"
"true"
" Number(x) = NaN"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = NaN"
" !!x = true"
"End"

"Start"
"false"
" Number(x) = NaN"
" parseInt(x, 10) = NaN"
" parseFloat(x) = NaN"
" +x = NaN"
" !!x = true"
"End"

Answer 5

最好使用下面的代码来理解隐式转换。

var values = [ 0 , 123, "0", "123", -0, +0, NaN, +NaN, -NaN, false, true, "false", "true", null, undefined, "null", "undefined", "", "GoodString", "  "];

for (var i = 0; i < values.length; i++){
    console.log("<<<<<<<<<<<<Starting comparing:  " + i + ">>>>>>>>>>>>>>>");
    for (var j = 0; j < values.length; j++){
		console.log(values[i],`==`, values[j]);
		console.log(eval(values[i] == values[j]));
	}
}