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

xsobi 2024-12-27 17:28 18 浏览

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

Bash

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 它是可以访问局部作用域的，后两者都只能访问全局作用域。

Bash

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 最后一个参数是函数体字符串，这样我们就可以用来动态生成拼接，具体语法如下：

let func = new Function([arg1, arg2, ...argN], functionBody)

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

setTimeout

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

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

const name = '周小黑'
const age = 18

let value
setTimeout('value = name')
setTimeout(() => {
  console.log(value)
})

html转js

上一篇：程序员的 JavaScript 代码该如何让计算机搞懂?
下一篇：安卓手机如何快速刷完青年大学习安卓怎样快速完成青年大学

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

eval() 函数

new Function()

setTimeout

相关推荐

在C#中，文件的创建、最后访问和最后修改时间是如何存储和管理的

springboot整合mybatis使用xml实现sql语句的查询配置

为智能音箱接入AI，制杖秒变学霸

HTML5(十)——Canvas 与 SVG 区别

iPhone 小工具照片轮播时间设定教学，自订想要的轮播频率

Android 接入FFmpeg命令-低成本完成各类音视频操作

西安碑林碑刻一部凝固的书法史

Acrobat Pro DC 2021 中文版下载及安装激活教程

C#裁剪图片添加水印

FFmpeg 调用 Android MediaCodec 进行硬解码(附源码)

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

eval() 函数

new Function()

setTimeout

微信扫一扫：分享

相关推荐

在C#中，文件的创建、最后访问和最后修改时间是如何存储和管理的

springboot整合mybatis使用xml实现sql语句的查询配置

为智能音箱接入AI，制杖秒变学霸

HTML5(十)——Canvas 与 SVG 区别

iPhone 小工具照片轮播时间设定教学，自订想要的轮播频率

Android 接入FFmpeg命令-低成本完成各类音视频操作

西安碑林碑刻 一部凝固的书法史

Acrobat Pro DC 2021 中文版下载及安装激活教程

C#裁剪图片添加水印

FFmpeg 调用 Android MediaCodec 进行硬解码(附源码)

西安碑林碑刻一部凝固的书法史