Le problème de ne pas utiliser la fonction eval dans le développement d'applets WeChat

1. Le problème de la fonction eval

La fonction eval en JavaScript est l'une des questions controversées parmi les développeurs. Le principal problème réside dans l'insécurité qu'elle peut provoquer. Je n’entrerai pas ici dans les détails de cette question et les lecteurs pourront facilement parcourir de nombreux articles d’introduction.

Cependant, les avantages de la fonction eval sont également évidents. Par exemple, utilisez JS pour écrire un programme de calcul. Lorsque vous rencontrez une chaîne comme "2 1-3*5", vous pouvez facilement la calculer en utilisant eval, similaire à :

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

console.log(eval(s));

Deux WeChat Mini Le programme a rencontré des problèmes lors de la pratique

(1) L'environnement du programme WeChat Mini ne prend pas en charge la fonction d'évaluation

Dans Dans le processus d'apprentissage du développement d'applets WeChat, je souhaite utiliser un outil tel qu'une calculatrice pour m'entraîner à l'écriture - principalement parce que je souhaite me familiariser avec ses compétences en matière de contrôle de mise en page. J'ai donc rencontré le problème ci-dessus. Il est naturel de penser à utiliser la fonction eval, car en programmation nous rencontrons un grand nombre de chaînes similaires à celles ci-dessus - qui contiennent une expression numérique. Cependant, l'erreur suivante a été rencontrée :

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

(2) new Function() solution Pas question !

Après une exploration préliminaire du réseau, je n'ai eu d'autre choix que d'utiliser une méthode alternative à la fonction eval(), similaire à la suivante :

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

En conséquence, j'ai de nouveau rencontré une invite d'échec, similaire à la suivante :

Impossible de créer une fonction

Trois impuissants actions

Recherche du compte WeChat Après avoir recherché des programmes sur quelques forums et effectué des recherches approfondies sur Internet, je n'ai pu utiliser que la méthode la plus primitive pour développer un programme de calcul apparemment simple. Pour résumer, il existe trois méthodes principales, à savoir la fonction de conversion

, la conversion de type forcée et la conversion de type faible utilisant des variables js.

(1) Fonction de conversion

js fournit deux fonctions de conversion, parseInt() et parseFloat(). Le premier convertit la valeur en nombre entier et le second convertit la valeur en nombre à virgule flottante. Ce n'est qu'en appelant ces méthodes sur le type String que ces deux fonctions peuvent s'exécuter correctement ; pour les autres types, NaN (Not a Number) est renvoyé.

Quelques exemples sont les suivants :

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

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

la méthode parseInt() a également un mode de base, qui peut convertir du binaire, convertir octal, hexadécimal ou toute autre chaîne de base en un entier. La base est spécifiée par le deuxième paramètre de la méthode parseInt(). Un exemple est le suivant :

Copier le code Le code est le suivant :

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

Si le nombre décimal contient des 0 en tête, il est préférable d'utiliser la base 10 pour que vous n'obtenez pas accidentellement une valeur octale. Par exemple :

Le code est le suivant :

parseInt("010"); //renvoie 8

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

méthode parseFloat() et parseInt () méthode Le traitement est similaire.

Une autre différence dans l'utilisation de la méthode parseFloat() est que la chaîne doit représenter un nombre à virgule flottante sous forme décimale et que parseFloat() n'a pas de mode de base.

Ce qui suit est un exemple d'utilisation de la méthode parseFloat() :

Le code est le suivant :

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

parseFloat("0xA"); //renvoie NaN
parseFloat("22.5"); //renvoie 22.5
parseFloat("22.34.5"); //renvoie 22.34
parseFloat("0908"); //renvoie 908
parseFloat("blue"); //renvoie NaN

(2) Conversion de type forcée

Vous pouvez également utiliser la conversion de type pour gérer le type des valeurs converties. Utilisez un cast pour accéder à une valeur spécifique, même si elle est d'un autre type.

Les trois types de conversions disponibles dans ECMAScript sont les suivants :

Boolean(value) - Convertit la valeur donnée en type booléen

Number ; (value) - Convertit la valeur donnée en nombre (peut être un nombre entier ou à virgule flottante) ;
String(value) - Convertit la valeur donnée en chaîne.



La conversion d'une valeur à l'aide de l'une de ces trois fonctions créera une nouvelle valeur qui stocke la valeur directement convertie à partir de la valeur d'origine. Cela peut avoir des conséquences inattendues.

La fonction Boolean() renvoie true lorsque la valeur à convertir est une chaîne, un nombre non nul ou un objet avec au moins un caractère (cela sera abordé dans la section suivante). Si la valeur est une chaîne vide, le nombre 0, non défini ou nul, elle renverra faux.

Vous pouvez utiliser l'extrait de code suivant pour tester la conversion de type booléen.

Le code est le suivant :

Boolean(""); //false – chaîne vide

Boolean("salut"); ); / /true – chaîne non vide
Boolean(100); //true – nombre non nul
Boolean(null); //false – null
Boolean(0); – zéro
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中文网！