目录
前沿
问题分析
eval 函数
# 定义和用法
# 语法
# 浏览器支持
# 实例
使用eval函数
优化
拓展
—— 要么旅行，要么读书，身体和灵魂必须有一个在路上。
前沿
之前写过一篇正则表达式的基础：http://t.csdnimg.cn/45Da3
今天继续讲讲在实际场景中的运用。
问题分析
当正则表达式来自服务端时，通过一下代码是无法进行test的
const handleInput = (value, item) => {if (!value) return;const regex = new RegExp(item.reg);const result = regex.test(value);item.checked = result;
};因为item.reg严格来说已经不是一个正则脚本，而是一个字符串
# /^\d{15,17}$/ 是验证 手机机身码(IMEI) 的正则表达式console.log(typeof item.reg);--> stringconsole.log(typeof /^\d{15,17}$/);--> object经过校验，可以使用 JavaScript eval() 函数
eval 函数
# 定义和用法
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。
如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
# 语法
eval(string)| 参数 | 描述 |
| string | 必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。 |
# 浏览器支持
# 实例
执行JavaScript代码或表达式:
eval("x=10;y=20;document.write(x*y)");
document.write("<br>" + eval("2+2"));
document.write("<br>" + eval(x+17));以上实例输出结果:
200
4
27
使用eval函数
更新代码：
const handleInput = (value, item) => {if (!value) return;const regex = new RegExp(eval(item.reg));const result = regex.test(value);item.checked = result;
};校验
const regex = new RegExp(eval(item.reg));
console.log(typeof regex);
--> object
说明经过eval处理过的字符串正则已经被编译成脚本来执行了。
你以为这样就完了？看看这段官方话
永远不要使用 eval！
eval() 是一个危险的函数，它使用与调用者相同的权限执行代码。如果你用 eval() 运行的字符串代码被恶意方（不怀好意的人）修改，你最终可能会在你的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个 eval() 被调用时的作用域，这也有可能导致一些不同方式的攻击。相似的 Function 就不容易被攻击。
优化
通过以上分析，无外乎就是需要将item.reg字符串转成函数（脚本）即可正常test。
那么，现在就来实现吧，先定义一个转换函数的函数looseJsonParse
function looseJsonParse(obj) {return Function('"use strict";return (' + obj + ")")();
}再优化我们原先的代码
const handleInput = (value, item) => {if (!value) return;const regex = new RegExp(looseJsonParse(item.reg));console.log(typeof regex);const result = regex.test(value);item.checked = result;
};这里可以看到他的输出：
const regex = new RegExp(looseJsonParse(item.reg));console.log(typeof regex);--> object
拓展
当然，如果你看过我之前分享的文章《常用正则表达式》： 常用正则表达式（含图解）_正则表达式图标-CSDN博客
里面的几种使用正则表达式的方法：
# 创建正则表达式对象，使用RegExp构造函数
const regex = new RegExp(/^\d{15,17}$/);
const result = regex.test(regex);# 使用String.prototype.match()方法匹配正则表达式
'string'.match(/^\d{15,17}$/);同理，附上 match 的同等代码
const handleInput = (value, item) => {if (!value) return;const result = value.match(looseJsonParse(item.reg));item.checked = result;
};最后，无论你使用哪一种方法，只要安全、节省性能、代码精炼就是好方法，值得推荐给大家使用。如果你有更好的注意不妨分享出来给大家~
