Home / Questions / 287552
Accepted
cristiancajiaos
Asked: 2020-08-23 10:58:33 +0800 CST 2020-08-23 10:58:33 +0800 CST

AngularJS 表达式中的属性名称中存在字母“ñ”

  • 772

测试 AngularJS 我发现了一个我想知道为什么会发生的情况。

看看$scope.film下面控制器中定义的对象：

/* Modelo */
let app = angular.module('myApp', []);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
  /* Film */ 
  $scope.film = {
    titulo: 'Mad Max Fury Road',
    año: 2015
  };
}]);

照原样，它是一个具有 propertytitulo和 property的对象año。在属性的情况下año，它是用字母ñ定义的。

$scope.film = {
    titulo: 'Mad Max Fury Road',
    año: 2015
};

如果我想在视图中使用表达式来打印año对象属性的值，请使用语法objeto.propiedad...

<!-- Vista -->
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <p>{{film.año}}</p>
    </div>
</div>

...我收到一个错误：

词法分析器错误：表达式 [film.año] 中第 6-6 列 [ñ] 出现意外的下一个字符。

根据 AngularJS 错误参考文档，让我明白ñ字符会在表达式中产生词法错误：

当表达式有词法错误时发生，例如格式错误的数字 (0.5e-) 或无效的 unicode 转义。

另一方面，如果我使用相同的表达式año使用语法打印属性的值objeto['propiedad']，则不会导致任何问题，并且该属性的值会在视图中显示给我。

<!-- Vista -->
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <p>{{film['año']}}</p> <!-- HTML: 2015 --> 
    </div>
</div>

测试片段

在这里你可以试试。我注释掉了不出错的表达式。

/* Modelo */
let app = angular.module('myApp', []);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
  $scope.film = {
    title: 'Mad Max Fury Road',
    año: 2015
  };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

<!-- Vista -->
<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <p>{{film.año}}</p>
    
    <!-- <p>{{film['año']}}</p> -->
  </div>
</div>

我也可以使用语法objeto['propiedad']来打印我的属性值，或者将属性名称从añoto annio（或其他）更改。

但是我的问题是要知道为什么AngularJS不允许使用字母ñ作为属性名称的一部分，使用objeto.propiedad表达式中的语法。

javascript

2 Answers

  1. Best Answer

    我找到了为什么会发生这种情况的答案。

    ñ字符不是 AngularJS 中可用于对象属性的默认字符范围的一部分，因此我不能将它与语法一起使用objeto.propiedad。

    该范围的字符在脚本中的一个函数中可用angular.js，根据您正在使用的 AngularJS 的版本，它可能有不同的名称。

    例如，在AngularJS 1.4.8中，该函数被调用isIdent()，而在AngularJS 1.7.8中，该函数被调用isValidIdentifierStart()（非缩小脚本，第 15701 行）： 

    isValidIdentifierStart: function(ch) {
    return ('a' <= ch && ch <= 'z' ||
        'A' <= ch && ch <= 'Z' ||
        '_' === ch || ch === '$');
},

    如果出于某种假设的原因，我需要使用语法来处理ñobjeto.propiedad字符，我要做的就是修改脚本angular.js，将该字符添加到所述函数中。

    在下面的代码中，我还添加了相同的字母，但大写：

    /* Agrego ñ (minúscula) y Ñ (mayúscula) */
isValidIdentifierStart: function(ch) {
    return ('a' <= ch && ch <= 'z' ||
        'A' <= ch && ch <= 'Z' ||
        '_' === ch || ch === '$' || ch === 'ñ' || ch === 'Ñ');
},

    如果我愿意，我可以在现有字符的基础上定义一个额外的字符范围，这样我不仅可以使用 ñ，还可以使用其他带有波浪线或变音符号的字符。

    假设我需要使用从À到ÿ的所有字符。为此，我需要这些字符对应的十进制数（这里有一个 ASCII 码的扩展表供参考）和方法charCodeAt()。两者都允许我定义这些范围的最小值和最大值：

    /* Agrego rango de caracteres desde À (192) hasta ÿ (255), 
   incluyendo ñ (241) y Ñ (209) */
isValidIdentifierStart: function(ch) {
    return ('a' <= ch && ch <= 'z' ||
        'A' <= ch && ch <= 'Z' ||
        '_' === ch || ch === '$') 
        || 192 <= ch.charCodeAt(0) && ch.charCodeAt(0) <= 255;
},

    这样，如果我愿意，我可以使用à字符（在范围内）并将它与我的对象属性一起使用。

    /* Controlador */
app.controller('mainCtrl', ['$scope', function($scope){
    /* Propiedad 'año' escrita con el caracter adicional à (224) */ 
    $scope.film = {
        titulo: 'Mad Max: Fury Road',
        àño: 2015
    };
}]);

    我什至可以更进一步，año在我的对象上命名我的属性，只需使用我定义的额外字符，它仍然可以工作。

    模块+控制器 

    /* Módulo */
let app = angular.module('myApp', []);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
    /* La propiedad 'año' del objeto está escrita solamente 
       con los caracteres adicionales à (224), ñ (241) y ö (246) */
    $scope.film = {
        titulo: 'Mad Max: Fury Road',
        àñö: 2015
    };
}]);

    看法

    <!-- Vista -->
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <p>{{film.àñö}}</p>
    </div>
</div>

    当然，如果需要，在所有情况下我都可以使用objeto['propiedad'].

    补充说明：

    • 17

  2. 从AngularJS v1.5.4模块中添加ngParseExt了：

    提供允许Unicode在 Angular 表达式中的标识符中使用字符的功能。

    该模块允许使用遵循标识符命名约定的任何标识符ES6作为 Angular 表达式中的标识符。ES6将一些标识规则定义委托给，该模块使用和Unicode标识符约定。ES6Unicode 8.0

    例子：

    /* Modelo */
let app = angular.module('myApp', ['ngParseExt']);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
  $scope.film = {
    title: 'Mad Max Fury Road',
    àñö: 2015
  };
}]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular-parse-ext.js"></script>

<!-- Vista -->
<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <p>{{film.àñö}}</p>
  </div>
</div>

    • 7