javascript - 为什么 {{undefined + number}} 返回数字？

Question

我正在从事 AngularJS 项目。我注意到以下表达式返回一个数字。

在 View 中，{{undefined + 10}} 将输出 10。

在 JavaScript 中，undefined + 10 将输出 NaN。

为什么这种行为在 View 中有所不同？

Answer 1

这就是插值的优势。

AngularJS 使用带有嵌入式表达式的

插值 标记为文本节点和属性值提供数据绑定(bind)。

如果内插值不是字符串，则计算如下:

• undefined 和 null 被转换为 ''(空字符串)
• 如果值是一个不是数字、日期或数组的对象，$interpolate 会在该对象上查找自定义的 toString() 函数，并使用该函数.
• 如果以上不适用，则使用 JSON.stringify。

在运行时，编译器使用 $interpolate 服务来查看文本节点和元素属性是否包含带有嵌入表达式的插值标记。

此外，angular 编译器使用 interpolateDirective 并注册观察者以监听模型变化。这就是摘要循环的过程。

阅读更多 here了解插值的工作原理。

Why {{'' == +Infinity}} returns true ?

在 AngularJS 中，$interpolate 服务将 +Infinity 计算为 0 值。

angular.module('app', [])

.controller('Controller', ['$injector', function($injector) {

}]);
setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div id="body">
  <div ng-controller="Controller">
    {{+Infinity}}
  </div>
</div>

现在表达式仍然是 {{0==''}}。

为什么 0=='' 被评估为 true ？

左边的类型是Number。右侧是 String 类型。

在这种情况下，右操作数被强制转换为 Number 类型:

0 == Number('') => 0 == 0,

评估为 true bool 值。

此处应用The Abstract Equality Comparison Algorithm .

If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y).