Question

我需要将"100% - 1"转换为300 - 1，其中300 - 画布宽度？如何评估（批量）此操作？

//for example:
var value = batch("100% - 1", canvas.width); //Must 299, because canvas.width is 300
var secondary = batch("50% + 10", canvas.width); //Must 160
//where first argument - arithmetic operation, second - relativity value.

这个问题不是来自科幻小说的范围，而是一个非常严肃和真实的问题。

更新！但是如果只需转换百分比？

var value = hack("75%", 300); //Must 255
var operation = hack("30%", 100) + 10; //Must 40
var end = hack("1em", somearg); //EM?

Update2！如果我使用new Function("a", "b", "return (%%Expression%%)")代替eval，会有什么意义？

例如：

var operation = "90% - 10";

要：

new Function("a", "return ((a * 90 / 100) - 10)");

如何制作？

Answer 1

如果批次中有两个部分，第一部分总是百分比，第二部分是值，那么你可以做

function batch(operation, value){
    var values = operation.match(/\d+|[+-/*]/g),
        percent = parseFloat(values[0])/100,
        relative = parseFloat(values[2]),
        math = values[1],
        applied = percent*value;

     switch(math){
         case '+': return applied + relative; 
         case '-': return applied - relative;
         case '/': return applied / relative;
         case '*': return applied * relative;
     }
}

Answer 2

你可以使用替换和简单的垫规则，

实际宽度的100％（100/100 *宽度），以便您可以进行以下操作。

function batch(calcStr, objWidth)
{
calcStr = calcStr.replace("%", "/100*" + objWidth);
var newWidth = eval(calcStr); 
// The + 10 or -1 are already there...
}

Answer 3

例如，

expr = expr.replace(/(\d+)%/g, function($0, $1) { return width * parseInt($1) / 100 })
result = eval(expr)

如果您的表达始终是xxx% + yyy形式，那么您也可以在没有eval的情况下相处：

expr = expr.replace(/(\d+)%/g, function($0, $1) { return width * parseInt($1) / 100 })
result = expr.replace(/(\d+)\s*([+-*/])\s*(\d+)/g, function($0, $1, $2, $3) { 
    $1 = parseInt($1);
    $3 = parseInt($3);
    switch($2) {
        case '+': return $1 + $2;
        etc.....

Answer 4

如果您真的想要计算它，可以使用正则表达式搜索数字的所有出现，后跟百分号：

expression = "30% + 10";
m = /(\d+)%/.exec( expression );

这将给你整个匹配（30％）为m [0]和只有数字（30）为m 1。

您可以使用它来计算新值

v = width_100_percent * parseInt(m[1]) / 100;

然后将其替换为real，并评估结果 mathemtatical表达。

有关工作示例，请参阅this jsfiddle。

但是！

可能是用户输入的评估和表达式在某种程度上打开了整个安全主题...所以你 shouls认为真的，真的，真的很难避免如何避免这种情况。

我的猜测

你要解决所有这些麻烦，因为你想做一些CSS布局的计算。所以这是我的建议如何避免计算：

1）box-sizing：border-box

经典的盒子模型几乎不可能做到这样的事情 “将这个div分成三个相等的列，每个边界为1px”。

查看新的“边框”，这使得这非常简单：使用边框填充+边框计数作为宽度的一部分，所以

  width: 30%
  border: 1px;

实际上加起来是100％。

有关更详细的说明，请参阅Paul Irish's article。

2）CSS预处理器，如SASS或LESS

如果你想在CSS中进行计算，你可以使用一个预处理器为你做这件事。 SASS和LESS 支持变量和数学表达式，略有不同语法上的差异：

  padding: $x / 2;

  padding: (@x / 2);

所以你有：实现你想要的一种方法，以及两种避免它的方法。

转换字符串（算术运算）

4 个答案: