The problem of not using the eval function in WeChat applet development

一 eval function problem

The eval function in JavaScript is one of the controversial issues among developers. The main problem lies in the insecurity it may cause. I won’t go into details about this issue here, and readers may easily browse many introductory articles.

However, the advantages of the eval function are also obvious. For example, use JS to write a calculator program. When encountering a string like "2+1-3*5", you can easily calculate it using eval, similar to:

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

console.log(eval(s));

##Second WeChat applet training encounters problems

(1) The WeChat applet environment does not support the eval function

In the process of learning WeChat applet development, I want to use a tool like a calculator to practice writing - mainly because I want to become familiar with its layout control skills. So, I encountered the above problem. It is natural to think of using the eval function, because in programming we encounter a large number of strings similar to the above - which contain a numeric expression. However, the following error was encountered:

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

##(2) new Function() solution No way!

After preliminary network exploration, I had no choice but to use an alternative to the eval() function, similar to the following:

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

The result was again When encountering a failure prompt, it is similar to the following:

can not create Function

Three helpless actions

Searching for WeChat mini programs After searching several forums and comprehensively searching the Internet, we can only achieve the development of seemingly simple calculator programs with the help of the most primitive methods. To sum up, there are three main methods, namely

conversion function, forced type conversion and weak type conversion using js variables.

(1) Conversion function

js provides two conversion functions, parseInt() and parseFloat(). The former converts the value into an integer, and the latter converts the value into a floating point number. Only by calling these methods on the String type can these two functions run correctly; for other types, NaN (Not a Number) is returned.

Some examples are as follows:

parseInt("1234blue"); //returns 1234

parseInt("0xA"); //returns 10

parseInt("22.5") ; //returns 22
parseInt("blue"); //returns NaN

parseInt() method also has a base mode, which can convert binary, Convert octal, hexadecimal or any other base string to an integer. The base is specified by the second parameter of the parseInt() method. The example is as follows:

Copy code The code is as follows:

parseInt(" AF", 16); //returns 175

parseInt("10", 2); //returns 2
parseInt("10", 8); //returns 8
parseInt("10" , 10); //returns 10

If the decimal number contains leading 0s, it is best to use base 10 so that you do not accidentally get an octal value . For example:

##The code is as follows:

parseInt("010"); //returns 8

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

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

##parseFloat() method and parseInt() method The treatment is similar.

Another difference in using the parseFloat() method is that the string must represent a floating point number in decimal form, and parseFloat() has no base mode.

The following is an example of using the parseFloat() method:

The code is as follows:

parseFloat("1234blue"); //returns 1234.0

parseFloat("0xA"); //returns NaN

parseFloat("22.5"); //returns 22.5

parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN

(2) Forced type conversion

You can also use type casting to process the type of the converted value. Use a cast to access a specific value, even if it is of another type.

The three forced type conversions available in ECMAScript are as follows:

Boolean(value) - Convert the given value to Boolean type;

Number(value) - Convert the given value into a number (can be an integer or floating point number);

String(value) - Convert the given value into a string.

Converting a value using one of these three functions will create a new value that stores the value directly converted from the original value. This can have unintended consequences.
The Boolean() function returns true when the value to be converted is a string, non-zero number, or object with at least one character (this will be discussed in the next section). If the value is an empty string, the number 0, undefined, or null, it will return false.

You can use the following code snippet to test Boolean type conversion.

The code is as follows:

Boolean(""); //false – empty string

Boolean("hi"); / /true – non-empty string

Boolean(100); //true – non-zero number

Boolean(null); //false – null
Boolean(0); //false – zero
Boolean(new Object()); //true – object

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中文网！