前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在javascript中如何将字符串转成变量或可执行的代码?

在javascript中如何将字符串转成变量或可执行的代码?

作者头像
咖啡教室
发布2023-11-17 11:19:04
3660
发布2023-11-17 11:19:04
举报

有这样一个需求:当前作用域内有未知的一些变量,其中一个函数中可以拿到某个变量名字符串,怎么能在函数内通过传进来的字符串取到作用域链中的变量值,示例小 demo 如下:

代码语言:javascript
复制
const name = '周小黑'
const age = 18

/**
 * @param {String} e 变量名字符串
 * @returns value 通过变量名字符串在作用域链中取到的变量值
 */
function fn(e) {
  let value
   // ...
   return value
}

const str = fn('name')

要解决上面的问题,主要就是怎么将字符串转变成可执行的代码?主要有三种方式:

eval() 函数

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行,所以下面的字符串可以正确取到变量对应的值,eval 对比 new Function 和 setTimeout 它是可以访问局部作用域的,后两者都只能访问全局作用域。

代码语言:javascript
复制
const name = '周小黑'
const age = 18

function fn(e) {
   let value = eval(e)
   return value
}

const str = fn('name')
console.log(str)

很多地方都能看到这句名言:eval is evil,eval 是魔鬼。所以使用 eval 的时候要注意,性能低而且有安全风险。

new Function() const name = '周小黑' const age = 18 function fn(e) { let value = new Function('return ' + e) return value } const str = fn('name') console.log(str) 对于函数我们平时都是直接用 function 或者箭头函数创建,不会用构造函数来创建函数,一般使用也是为了来动态创建函数,因为 new Function 最后一个参数是函数体字符串,这样我们就可以用来动态生成拼接,具体语法如下:

代码语言:javascript
复制
let func = new Function([arg1, arg2, ...argN], functionBody)

注意函数体中只能访问全局作用域,不能访问局部作用域。

setTimeout

定时器 setTimeout 的第一个参数我们平时都是传一个函数,它其实也是可以传字符串进去的,在浏览器中是可以正常执行的,在node环境中会报错。

实际上浏览器中也是不推荐这么用的,另外需要注意的是字符串中的变量只能访问全局作用域,不能访问局部作用域,如果全局作用域中没有,就是 undefined。

代码语言:javascript
复制
const name = '周小黑'
const age = 18

let value
setTimeout('value = name')
setTimeout(() => {
   console.log(value)
})
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-10-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 秘密菜单 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • eval() 函数
  • new Function() const name = '周小黑' const age = 18 function fn(e) { let value = new Function('return ' + e) return value } const str = fn('name') console.log(str) 对于函数我们平时都是直接用 function 或者箭头函数创建,不会用构造函数来创建函数,一般使用也是为了来动态创建函数,因为 new Function 最后一个参数是函数体字符串,这样我们就可以用来动态生成拼接,具体语法如下:
  • setTimeout
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档