WeChatアプレット開発でeval関数を使用しない問題

1. eval 関数の問題

JavaScript の eval 関数は、開発者の間で議論の的となっている問題の 1 つであり、主な問題は、それが引き起こす可能性のあるセキュリティの問題です。この問題についてはここでは詳しく説明しませんが、読者は多くの紹介記事を簡単に閲覧できるでしょう。

ただし、eval 関数の利点も明らかです。たとえば、JS を使用して計算プログラムを作成すると、「2+1-3*5」のような文字列が見つかった場合、次のように eval を使用して簡単に計算できます。

var s= "2+1" -3*5";

console.log(eval(s));

第二に、WeChat ミニ プログラムの練習中に問題が発生します

(1) WeChat ミニ プログラム環境は eval 関数をサポートしていません

WeChat アプレット開発を学ぶ過程で、電卓などのツールを使って書く練習をしたいと思っています。主な理由は、そのレイアウト制御スキルに慣れておきたいからです。そこで、上記の問題に遭遇しました。プログラミングでは、上記と同様の数値式を含む文字列が多数登場するため、eval 関数の使用を考えるのは自然なことです。ただし、次のエラーが発生しました:

VM773:1 Uncaught TypeError: eval is not a function(…)

(2) 新しい Function() ソリューションも機能しません。

予備的なネットワーク探索の後、次のような eval() 関数の代替メソッドを使用する以外に選択肢はありませんでした。

//计算表达式的值
function eval(fn) {
     
    var Fn = Function;  //一个变量指向Function，防止有些前端编译工具报错
     
    return new Fn('return ' + fn)(); 
}

その結果、次のような失敗プロンプトが再び表示されました。

関数を作成できません

3つの無力な動き

WeChatミニプログラムをいくつかのフォーラムで検索し、インターネットを徹底的に検索した後、一見単純な計算機プログラムを開発するには最も原始的な方法しか使用できません。まとめると、

変換関数、強制型変換、js変数を使った弱い型変換の大きく3つの方法があります。

(1)変換関数

jsはparseInt()とparseFloat()の2つの変換関数を提供します。前者は値を整数に変換し、後者は値を浮動小数点数に変換します。 String 型でこれらのメソッドを呼び出すことによってのみ、これら 2 つの関数が正しく実行されます。他の型では NaN (Not a Number) が返されます。

いくつかの例は次のとおりです:

parseInt("1234blue"); // 1234
parseInt("0xA") を返します。 // 10
parseInt("blue" を返します); ") ; // NaN

を返します parseInt() メソッドには、2 進数、8 進数、16 進数、またはその他の基本文字列を整数に変換できる基本モードもあります。ベースは parseInt() メソッドの 2 番目のパラメータで指定されます。 例は次のとおりです。

コードのコピー コードは次のとおりです。

parseInt("AF", 16); //returns 175
parseInt("10" , 2); // 2 を返します
parseInt("10", 8); // 8 を返します

; 10 進数の先頭に 0 が含まれる場合は、誤って 8 進数の値を取得しないように、基数 10 を使用することをお勧めします。例:

コードは次のとおりです:

parseInt("010"); //returns 8

parseInt("010", 8); //returns 8

parseInt("010", 10); ); // 10

を返します parseFloat() メソッドは parseInt() メソッドと同様に処理されます。

parseFloat() メソッドを使用する場合のもう 1 つの違いは、文字列が浮動小数点数を 10 進形式で表す必要があり、parseFloat() には基本モードがないことです。

以下は parseFloat() メソッドの使用例です:

コードは次のとおりです:

parseFloat("1234blue") //1234.0 を返します

parseFloat("0xA"); returns NaN

parseFloat(" 22.5"); // 22.5

parseFloat("22.34.5"); // 22.34
parseFloat("blue") を返す; NaN を返します




(2) 強制的な型変換

型キャストを使用して、変換された値の型を処理することもできます。特定の値にアクセスするには、それが別の型であっても、キャストを使用します。

ECMAScript で使用できる 3 種類の強制型変換は次のとおりです:

Boolean(value) - 指定された値をブール型に変換します。

Number(value) - 指定された値を数値に変換します (整数または浮動小数点数);

String(value) - 指定された値を文字列に変換します。

これら 3 つの関数のいずれかを使用して値を変換すると、元の値から直接変換された値を格納する新しい値が作成されます。これにより、予期せぬ結果が生じる可能性があります。
Boolean() 関数は、変換される値が文字列、ゼロ以外の数値、または少なくとも 1 つの文字を含むオブジェクトである場合に true を返します (これについては次のセクションで説明します)。値が空の文字列、数値 0、未定義、または null の場合は、false を返します。

次のコード スニペットを使用して、ブール型の強制をテストできます。

コードは次のとおりです:

Boolean(""); //false – 空の文字列
Boolean("hi") //true – 空でない文字列

Boolean(100); true – ゼロ以外の数値

Boolean(null); //false - null

Boolean(0); //true - オブジェクト

Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似，只是它转换的是整个值，而不是部分值。示例如下：

代码如下:

用　　法          结　　　　　　　果

Number(false)             0
Number(true)             1
Number(undefined)         NaN
Number(null)         0
Number( "5.5 ")         5.5
Number( "56 ")         56
Number( "5.6.7 ")         NaN
Number(new Object())     NaN
Number(100) 100

（3）利用js变量弱类型转换

举个小例子，一看，就会明白了。

代码如下:

var str= '012.345 ';
var x = str-0;
x = x*1;

上例利用了js的弱类型的特点，只进行了算术运算，实现了字符串到数字的类型转换。属于最简单的方法了。

小结

本文描述的也算是个人开发微信小程序过程中遇到的一个“坑”吧。毕竟小程序的设计目的之一是要访问本机功能的，所以避开eval这样的复杂函数也是可以理解的。目前，我还没有在网络上找到可以使用后面介绍的原始方法的能够实现计算字符串中数字表达式的通用的工具函数。有兴趣的朋友可以试一下。

更多微信小程序开发之不能使用eval函数的问题相关文章请关注PHP中文网！