2012-12-24 4 views
2

변환 필요 "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? 

업데이트 2!eval 대신 new Function("a", "b", "return (%%Expression%%)")을 사용하면 어떻게 될까요? 예를 들어

:

var operation = "90% - 10"; 

하려면 :

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

어떻게 그것을 만든합니까? 예를 들어

+2

'var anything = (canvas.width * (percent/100)) + somenumber;'를 사용하지 않는 이유는 무엇입니까? –

답변

0

,

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..... 
1

당신이 교체하고 간단한 매트 규칙을 사용할 수 있습니다

폭의 100 %가 실제로는 (100/100 * width)이므로 다음을 수행 할 수 있습니다.

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

당신이 배치의 두 부분으로 첫 번째는 항상 비율이며, 당신이 정말를 계산하려면 두 번째 값은 다음

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; 
    } 
} 
+0

eval을 사용하지 않는 경우 +1. –

0

을 할 수 있다면, 당신은 사용할 수 있습니다 정규 표현식은 백분율 기호 뒤에 숫자의 모든 발행 수를 검색하려면 :

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

이 당신에게 전체 경기 (30 %)을 줄 것이다 m로 [0] 단지 숫자 (30)는 m 1입니다.

당신은 새로운 가치를

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

을 계산 한 후 진짜 교체, 결과 mathemtatical 표현을 평가 후면이를 사용할 수 있습니다.

작동 예제는 this jsfiddle을 참조하십시오.

하지만!

사용자 입력되었을 수있는 표현 및 표현 어떤 시점에서 전체 보안 문제가 열립니다.그래서 shouls는 이런 상황을 피하는 방법을 정말 열심히, 정말로 생각합니다. .

내 생각 엔

당신이 CSS 레이아웃에 대한 몇 가지 계산을 원하기 때문에 당신은이 모든 문제에 갈 수 있습니다. 그래서 여기 내 제안을 당신이 계산을 피할 수있는 방법에 :

1) 박스 크기 : 고전 박스 모델이 사실상 불가능 같은 물건을 할 수 있습니다

경계 박스 "분할이 1px의 경계선을 가진 3 개의 동일한 열로 나누십시오.

이 정말 간단하게 새로운 "경계 박스"에 보면 : 경계 상자 와 패딩 + 테두리 폭의 일부로서 계산 때문에

width: 30% 
    border: 1px; 

실제로 100 %까지 추가합니다.

자세한 설명은 Paul Irish's article을 참조하십시오.

2) CSS의 SASS와 같은 전처리 또는 당신이 당신의 CSS의 계산은 당신이 당신을 위해 그렇게 할 프리 프로세서를 사용하고 싶은 경우

LESS. 구문에서 약간의 차이가 두 SASSLESS 지원 변수와 수식 : 그래서 거기에

padding: $x/2; 

    padding: (@x/2); 

당신은 다음과 같습니다 하나의 방법은 당신이 원하는 것을 구현하고이를 피하기 위해 두 가지 방법으로 할 수 있습니다.