Почему {{undefined + number}} возвращает номер?

Я работаю над проектом AngularJS. Я заметил, что следующее выражение возвращает число.

В представлении {{undefined + 10}} будет выводиться 10.

В JavaScript undefined + 10 выводится NaN.

Почему это поведение отличается в представлении?

Ответ 1

Это преимущество интерполяции.

Разметка интерполяции с встроенными выражениями используется AngularJS для обеспечения привязки данных к текстовым узлам и значениям атрибутов.

Если интерполированное значение не является строкой, оно вычисляется следующим образом:

undefined и null преобразуются в '' (пустая строка)
Если значение является объектом, который не является числом, датой или массивом, $interpolate ищет пользовательскую функцию toString() для объекта и использует это.
Если вышеуказанное не применяется, используется JSON.stringify.

В процессе выполнения компилятор использует службу $interpolate, чтобы увидеть, содержат ли текстовые узлы и атрибуты элементов интерполяционную разметку встроенные выражения.

Кроме того, компилятор 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>

Ответ 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).