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

我正在开发一个AngularJS项目。 我注意到下面的expression式返回一个数字。

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

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

为什么在一个视图中这种行为是不同的？

Answer 1

这是插值的优点。

AngularJS使用内嵌expression式的插值标记来为文本节点和属性值提供数据绑定。

如果内插值不是string，则按如下方式计算：

• 未定义和null被转换为“'（空string）
• 如果该值是一个不是Number，Date或Array的对象，则$interpolate将在该对象上查找自定义的toString()函数，并使用该函数。
• 如果以上不适用，则使用JSON.stringify 。

在运行期间，编译器使用$interpolate服务来查看文本节点和元素属性是否包含embedded式expression式的插值标记。

此外，angular度编译器使用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> 

Answer 2

通过引用AngularJS代码来解释，这是神奇的：

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

如果你有一个“加号”expression式，这个函数被parsing成你的模板。

expression式replace由Parser.parse（angular.js：16155）或parse.js：1646调用（ https://github.com/angular/angular.js/blob/87a586eb9a23cfd0d0bb681cc778b4b8e5c8451d/src/ng/parse.js# L1646 ）。