微信小程序开发之不能使用eval函数的问题

一　eval函数问题

JavaScript中的eval函数是颇受开发者争议的问题之一，问题主要在于其可能导致的不安全性。有关此方面问题，在此不再赘述，读者可能很容易地浏览到许多介绍性文章。

但是，eval函数的优点也是很明显的。例如，使用JS编写一个计算器程序，在遇到"2+1-3*5"这样的字符串时，使用eval就可以很容易地计算出，类似如：

 

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

console.log(eval(s));

 

二　微信小程序练手遇到问题

 

（１）微信小程序环境不支持eval函数

 

在学习微信小程序开发过程中，想使用计算器这样的工具编写练练手——主要是想熟悉一下其布局控制技巧。于是，遇到了上面的问题。很自然，想到使用eval函数，因为编程中正是遇到类似于上面的大量字符串——其中包含一个数字表达式。但是，遇到如下错误：

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

 

（２）new Function()方案也不行！

 

初步网络探索后，只好想使用eval()函数的替代方法，类似于如下：

1 2 3 4 5 6 7

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

结果再次遇到失败提示，类似于如下：

can not create Function

 

三　无奈之举

 

在搜索微信小程序少有的几个论坛并全面网络搜索后，只能借助于最原始的办法实现看似简单的计算器中程序的开发了。归纳来看，方法主要有三种，分别是

转换函数、强制类型转换和利用js变量弱类型转换。

 

（１）转换函数

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。

一些示例如下：

parseInt("1234blue"); //returns 1234
parseInt("0xA"); //returns 10
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN

 

parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，示例如下：

 

复制代码 代码如下:

parseInt("AF", 16); //returns 175
parseInt("10", 2); //returns 2
parseInt("10", 8); //returns 8
parseInt("10", 10); //returns 10

 

如果十进制数包含前导0，那么最好采用基数10，这样才不会意外地得到八进制的值。例如：

 

代码如下:

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

 

parseFloat()方法与parseInt()方法的处理方式相似。
使用parseFloat()方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，parseFloat()没有基模式。

下面是使用parseFloat()方法的示例：

 

代码如下:

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）强制类型转换

还可使用强制类型转换（type casting）处理转换值的类型。使用强制类型转换可以访问特定的值，即使它是另一种类型的。
 

ECMAScript中可用的3种强制类型转换如下：

Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。
 

用这三个函数之一转换值，将创建一个新值，存放由原始值直接转换成的值。这会造成意想不到的后果。
当要转换的值是至少有一个字符的字符串、非0数字或对象（下一节将讨论这一点）时，Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null，它将返回false。

可以用下面的代码段测试Boolean型的强制类型转换。

 

代码如下:

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变量弱类型转换

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

 

代码如下:

1 2 3

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

 

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

 

小结

 

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

 

原文转自： 乐搏学院http://www.learnbo.com/front/article/cmsIndex