微信小程序开发之不能使用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/

或关注咱们的官方微博微信，还有更多惊喜哦~

 

本文出自 “青峰” 博客，请务必保留此出处http://zhuxianzhong.blog.51cto.com/157061/1881527