Question

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

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

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

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

Answer 1

这就是插值的优点。

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

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

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

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

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

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

为什么{{'' == +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布尔值。

此处已应用The Abstract Equality Comparison Algorithm。

如果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）调用。

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

2 个答案: