首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么{{undefined + number}}会返回number?

为什么{{undefined + number}}会返回number?
EN

Stack Overflow用户
提问于 2017-09-06 20:19:40
回答 2查看 5.2K关注 0票数 49

我正在做一个AngularJS项目。我注意到下面的表达式返回一个数字。

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

在JavaScript中,undefined + 10将输出NaN

为什么这个行为在视图中是不同的?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-06 20:24:27

这就是插值的优点。

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

如果插值的值不是字符串,则按如下方式计算:

  • undefined和null将转换为“”(空string)
  • if值不是数字、日期或数组的对象,$interpolate在对象上查找自定义toString()函数并使用该函数。
  • 如果以上条件不适用,则使用JSON.stringify

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

此外,angular编译器使用interpolateDirective和寄存器观察器来监听模型更改。这就是消化循环的过程。

阅读更多here以了解插值是如何工作的。

为什么{{'' == +Infinity}}返回true?

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

代码语言:javascript
复制
angular.module('app', [])

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

}]);
setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});
代码语言:javascript
复制
<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

在这种情况下,右操作数被强制为类型编号:

代码语言:javascript
复制
0 == Number('') => 0 == 0,

该值被评估为true布尔值。

这里是应用的The Abstract Equality Comparison Algorithm

如果类型(X)是数字,类型(Y)是字符串,则返回比较结果x == ToNumber(Y)。

票数 49
EN

Stack Overflow用户

发布于 2017-09-06 22:01:09

通过引用AngularJS代码来解释,这是魔术:

代码语言:javascript
复制
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)调用。

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46075072

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档