js执行字符串代码的具体实现
一、适用场景
在业务中我们很少去将一个字符串作为代码执行，因为出于安全考虑，尽量不要直接在客户端执行用户输入的代码。但是在造轮子或者框架开发中，我们需要在解析完开发者编写的代码后，来手动执行这些字符串代码。
二、具体实现
1. eval
eval是一个我们都知道的函数，这个函数会将传入的字符串当做 JavaScript 代码进行执行。所以我们很多时候会用它来执行字符串代码。
例如：
const log = `console.log('11')`
eval(log)
const testCode = `
function test() {
console.log('test')
}
test()
`
eval(testCode)
注：需要注意的是，eval是在当前上下文执行的代码，如果字符串中的变量与当前上下文的变量命名冲突，就会导致报错。
例如：
const test = 'test'
const testCode = `
function test() {
console.log('test')
}
test()
`
eval(testCode)
因为我们自己定义了test，而字符串中又有test函数，所以就发生了冲突，出现报错。
我们很难去避免字符串中的变量和当前上下文的变量重复，所以我们可以在自调用函数中执行eval来解决这个问题。
const test = 'test'
const a = 1
const testCode = `
function test() {
console.log('test')
console.log(a)
}
test()
`
;(function () {
const a = 2
eval(testCode)
})()
这样就没问题了，注：这里的a打印的是2，也就是我们自调用函数作用域的a。
2. new Function()
语法：new Function(arg0, arg1, /* …, */ argN, functionBody)Function() 构造函数创建 Function 对象。直接调用构造函数可以动态创建函数，但可能会面临一些安全性和类似于 eval() 的性能问题（但相对较小）。然而，与具有访问本地作用域的 eval 不同，Function 构造函数创建的函数仅在全局作用域中执行。
例如：
const test = 'test'
const a = 1
const testCode = `
function test() {
console.log('test')
console.log(a)
}
test()
`
;(function () {
const a = 2
const func = new Function(testCode)
func()
})()
注：当前的a打印的是1，也就是Function 构造函数创建的函数仅在全局作用域中执行。里面的未定义的变量会直接使用全局的变量。
如何解决这个问题？
创建function的时候支持传递参数，我们可以通过参数传递来解决。
const test = 'test'
const a = 1
const testCode = `
function test() {
console.log('test')
console.log(a)
}
test()
`
;(function () {
const a = 2
const func = new Function('a', testCode)
func(a)
})()
我们将a传递作为参数传递到了func中，实际上func现在就相当于：
function func(a) {
function test() {
console.log('test')
console.log(a)
}
test()
}
这种方式就不用但是上下文命名冲突的问题，因为代码是在函数中执行的，因此我们不需要在自调用函数中运行 new Function()。
并且通过这种方式我们还能接受到字符串代码中的返回。
const test = 'test'
const sum = `return a + b`
const func = new Function('a', 'b', sum)
console.log(func(2, 3))
三、两者差异
- eval是在当前上下文执行代码，会出现变量命名冲突，而new Function()是在函数内部执行，不会出现冲突
- eval的作用域是当前执行位置的作用域，而new Function()的作用域是全局
- eval不能传递参数，也不能接受返回值，new Function()可以传递参数并接收返回值
所以如果是大量的执行字符串代码，建议使用new Function()的方式，它更强大（比如Vue框架就使用new Function()的方式）。如果你只是偶尔使用，并且对参数、命名也没要求，那就直接使用eval，更加简单方便。
附：结合eval和new Function()一起实现
try {
const val = new Function(“要执行的字符串”);
let eleResult = val(); // 这里必须调用val(),不然不会执行
if (!eleResult) {
eleResult = eval(“要执行的字符串”);
}
} catch (err) {
console.info(‘执行字符串js出错');
}到此这篇关于js执行字符串代码具体实现的文章就介绍到这了,更多相关js执行字符串代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Javascript对象Clone用法,实例分析了javascript对象克隆的相关技巧,需要的朋友可以参考下2015-06-06
刚看了一篇文章对js作用域的理解又会上升到一个新的台阶，javascript里变量作用域是个经常让人头痛抓狂的问题,接下来对经常遇到又容易出错的情况进行了简单总结，感兴趣的各位可以参考下哈2013-03-03
这篇文章主要介绍了JS中sort函数排序用法,结合实例形式详细分析了sort函数的功能、原理及实现数组排序的相关技巧,代码中备有详尽的注释便于理解,需要的朋友可以参考下2016-06-06
JavaScript中,可以使用解构赋值的方式来对数组或者对象进行变量解构,下面小编就来为大家详细介绍一下JavaScript实现数组或者对象解构的方法吧2023-11-11
要在 JavaScript 中实现一个按照贝塞尔曲线运动的小球,关键是要掌握贝塞尔公式的基本原理和实现方式,以及使用 JavaScript 处理动画和物理运算,感兴趣的小伙伴跟着小编一起来看看吧2024-10-10
这篇文章主要介绍了JS+CSS3实现的类似于苹果iwatch计时器特效，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要为大家详细介绍了JS实现n秒后自动跳转的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了JavaScript实现shuffle数组洗牌操作,结合实例形式分析了javascript数组的定义、构造、排序等相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要为大家介绍了前端算法题解leetcode114二叉树展开为链表，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最近在使用layui前端框架,在使用单选按钮、下拉菜单select、checkbox等控件的时候,往往遇到一些初始化的东西,下面这篇文章主要给大家介绍了关于layui动态设置单选按钮选中效果的相关资料,需要的朋友可以参考下2023-06-06
最新评论