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！new Function("a", "b", "return (%%Expression%%)")の代わりに使用すると、どのような意志になりevalますか?

例えば：

var operation = "90% - 10";

に：

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

作り方は？

4

4 に答える 4

0

本当にそれを計算したい場合は、正規表現を使用して、数字の後にパーセント記号が続くすべての出現箇所を検索できます。

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

これにより、一致全体 (30%) が m[0] として表示され、数字 (30) のみが m 1として表示されます。

これを使用して、新しい値を計算できます

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

次に、それを実数に置き換え、結果の数式を評価します。

実際の例については、この jsfiddleを参照してください。

しかし！

ある時点でユーザー入力であった可能性のある評価と表現は、セキュリティの主題全体を切り開きます...したがって、この状況を回避する方法について本当に、本当に、本当に真剣に考える必要があります。

私の推測

CSS レイアウトの計算を行う必要があるため、このすべての問題が発生します。したがって、計算を回避する方法についての私の提案は次のとおりです。

1) box-sizing: ボーダーボックス

古典的なボックス モデルでは、「この div をそれぞれ 1 ピクセルの境界線を持つ 3 つの等しい列に分割する」ようなことは事実上不可能です。

これを本当に簡単にする新しい「ボーダーボックス」を調べてください。

  width: 30%
  border: 1px;

実際には 100% になります。

より詳細な説明については、ポール アイリッシュの記事を参照してください。

2) SASS や LESS などの CSS プリプロセッサ

CSS で計算を行いたい場合は、プリプロセッサを使用してそれを行うことができます。SASSとLESSはどちらも 変数と数式をサポートしていますが、構文がわずかに異なります。

  padding: $x / 2;

  padding: (@x / 2);

つまり、あなたが望むものを実装する 1 つの方法と、それを回避する 2 つの方法があります。

于 2012-12-24T13:05:44.973 に答える