Angular7：如何评估算术字符串答案

【问题标题】：Angular7: How to eval an arithmetic stringAngular7：如何评估算术字符串
【发布时间】：2019-10-04 10:43:55
【问题描述】：

我正在使用 Angular 7，我想评估一个算术函数，我收到如下字符串：

我从服务中得到一个“价值”，它是一个数字。我还得到一个“规则”作为@Input 参数应用于这个值，它是一个字符串，可以包含“>”、“

value = 10;
rule = ">2"

然后我想应用该规则并检查它是否为真：

if (10 > 2) {
  console.log("this rule applies!");
}

我尝试像这样使用 eval：

const strValue: string = value.toString();
const expression = strValue.concat(rule);
if (eval(expression)) {
  console.log("this rule applies!");
}

但我收到一个错误：

拒绝将字符串评估为 JavaScript，因为 'unsafe-eval' 不是以下内容安全策略指令中允许的脚本来源：“script-src 'self' 'unsafe-inline'”。

所以我想我不应该使用“eval”来做到这一点。你知道我该如何解决吗？

【问题讨论】：

您确信您将使用eval 的数据是安全的吗？如果是这样，那么您可以寻找一种方法来启用它或绕过unsafe-eval 检查，因为它不是不安全的。否则，您需要一种不同的方法。

标签： javascript angular typescript

【解决方案1】：

您可以使用正则表达式(\D+)(\d+) 来获取后跟数字的任何运算符。如果您选择扩展它，您可以向switch 添加更多运算符。

function evaluate(value, rule) {
  const [,operator, number] = rule.match(/(\D+)(\d+)/)
  
  switch(operator) {
    case ">" : return value > number
    case "<" : return value < number
    case "==" : return value == number
  }
  
  return null
}

console.log(evaluate(3, ">1"))
console.log(evaluate(3, "<2"))
console.log(evaluate(3, "==3"))

【讨论】：

【解决方案2】：

您可以获取运算符并为每个运算符使用一个函数。

function evaluate(value, rule) {
    const
        operators = {
            '<': (a, b) => a < b,
            '>': (a, b) => a > b,
            '==': (a, b) => a == b
        },
        [op, value2] = rule.match(/^(<|>|==)|.*$/g);

    return operators[op](value, value2);
}

console.log(evaluate(10, '<2'));
console.log(evaluate(10, '>2'));
console.log(evaluate(10, '==2'));
console.log(evaluate(10, '==10'));

【讨论】：