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

boyanx3个月前技术教程28

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

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

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)
})

相关文章

javascript的字符串repeat()方法_javascript 字符串方法

一、简介JavaScript中的字符串是不可变的,也就是说,一旦创建了一个字符串,就不能改变它。但是,有时候我们需要将一个字符串重复多次。为了满足这个需求,JavaScript提供了一个字符串方法:r...

在 JavaScript 中替换所有指定字符 3 种方法

在 JS 没有提供一种简便的方法来替换所有指定字符。 在 Java 中有一个 replaceAll() ,replaceAll(String regex, String replacement))方法...

Javascript字符串的常用方法有哪些?

我们也可将字符串常用的操作方法归纳为增、删、改、查,需要知道字符串的特点是一旦创建了,就不可变增这里增的意思并不是说直接增添内容,而是创建字符串的一个副本,再进行操作除了常用+以及${}进行字符串拼接...

JavaScript 变量_javascript 变量名有哪些

变量是用于存储信息的"容器"。 实例var x=5;var y=6;var z=x+y;就像代数那样x=5y=6z=x+y在代数中,我们使用字母(比如 x)来保存值(比如 5)。通过上面的表达式...

JavaScript 转义字符串_js转义字符串中特殊字符的方法

在前端学习中,我们经常会遇到写的字符不太对想改变它的如果重新些可能太麻烦,这时候我们就要用到转义字符串来改变。顾名思义,所谓的转义字符就是能够改变字符原本意义的特殊字符。在实际应用中,总有一些具有特殊...

Javascript中的字符串拼接_js字符串拼接换行

字符串拼接是所有程序设计语言都需要的操作。当拼接结果较长时,如何保证效率就成为一个很重要的问题。本文介绍的是Javascript中的字符串拼接,希望对你有帮助,一起来看。const icon = &#...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。