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

Question

我正在研究一个AngularJS项目.我注意到以下表达式返回一个数字.

在视图中,{{undefined + 10}}将输出10.

在JavaScript中,undefined + 10将输出NaN.

为什么视图中的这种行为有所不同？

Answer 1

这是插值的优点.

AngularJS使用嵌入式表达式的插值标记来提供对文本节点和属性值的数据绑定.

如果插值不是String,则计算如下:

• undefined和null转换为''(空字符串)
• 如果值是不是Number,Date或Array 的对象,则在对象上$interpolate查找自定义toString()函数,并使用它.
• 如果以上不适用,JSON.stringify则使用.

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

此外,角度编译器使用interpolateDirective并注册观察者以监听模型更改.那是消化周期的过程.

阅读更多这里了解插值是如何工作的.

为什么{{'' == +Infinity}}返回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布尔值.

这里应用了抽象等式比较算法.

如果Type(x)为Number且Type(y)为String,则返回比较结果x == ToNumber(y).

Answer 2

要通过引用AngularJS代码来解释,这是神奇的:

function plusFn(l, r) {
  if (typeof l === 'undefined') return r;
  if (typeof r === 'undefined') return l;
  return l + r;
}

如果您有一个"加"表达式,则此函数将被解析为您的模板.

表达式替换由Parser.parse(angular.js:16155)或parse.js调用:1646(https://github.com/angular/angular.js/blob/87a586eb9a23cfd0d0bb681cc778b4b8e5c8451d/src/ng/parse.js# L1646).