我正在做一个AngularJS项目。我注意到下面的表达式返回一个数字。
在视图中,{{undefined + 10}}
将输出10。
在JavaScript中,undefined + 10
将输出NaN。
为什么这个行为在视图中是不同的?
发布于 2017-09-06 20:24:27
这就是插值的优点。
AngularJS使用带有嵌入表达式的插值标记来提供到文本节点和属性值的数据绑定。
如果插值的值不是字符串,则按如下方式计算:
$interpolate
在对象上查找自定义toString()
函数并使用该函数。JSON.stringify
。在运行时,编译器使用$interpolate
服务来查看文本节点和元素属性是否包含带有嵌入表达式的插值标记。
此外,angular编译器使用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
。
在这种情况下,右操作数被强制为类型编号:
0 == Number('') => 0 == 0,
该值被评估为true
布尔值。
这里是应用的The Abstract Equality Comparison Algorithm。
如果类型(X)是数字,类型(Y)是字符串,则返回比较结果x == ToNumber(Y)。
发布于 2017-09-06 22:01:09
通过引用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)调用。
https://stackoverflow.com/questions/46075072
复制相似问题