简单了解JavaScript中的new Function

目录前言1、语法01).无效的JSON对象字符串合法化02).模板字符串作为模板前言JavaScript技术一直处于不断发展壮大中，如果你是前端开发人员或者JavaScript开发工程师，那么，今...

目录

前言

JavaScript技术一直处于不断发展壮大中，如果你是前端开发人员或者javascript开发工程师，那么，今天这个知识点，你有必要认真了解一下，它就是“new Function”。

1、语法

语法如下：

letfunc=newFunction([arg1,arg2,…argN],functionBody);

最后一个参数必须是函数体，其余参数作为传递给函数体的参数。

例如：

letsum=newFunction('a','b','returna+b');
console.log(sum(1,2));//theresultis3

我们平时开发 JavaScript 或者 Node.js 的时候，没有理由使用 new Function 构造函数，因为不需要直接使用函数或者 () => {} 箭头函数。

这是否意味着 new Function 语法是一个鸡肋的功能python？

千万不要这样想！因为它绝对不是你想的那样！

new Function 语法有一个特别强大的特性，使它在 JavaScript 中发挥着不可替代的作用。

有什么特点python？也就是函数体的数据格式是字符串，真是不可思议！

不可替代的角色

这里有几个例子来展示 new Function 语法的微妙之处。

01).无效的 JSON 对象字符串合法化

例如，有以下字符串：

letstr=`{"id":103,name:'yh','date':'2022–07–06'}`;

其中的字符串不符合JSON格式（键值需要双引号），使用JSON.parse()解析会报错。

那么，有没有什么办法可以把这个字符串对象转换成可以解析的JSON呢？

很多人会想到正则匹配然后替换，或者使用eval等渣属性进行处理。

没必要这么麻烦， new Function 上线了，就完美了！

JS 代码如下所示：

console.log(JSON.stringify(newFunction('return'+str)()));
//Thereturnresultis:'{"id":10393,"name":"yh","date":"2022–07–06"}'

使用返回语法，你可以轻松地将任意字符串转换为其他 JavaScript数据类型。

02).模板字符串作为模板

比如vue、React等现在都有自己的模板语法，比如{}语法。

如果我们想直接使用 ES6 自己的语法作为模板语言，就必须使用 new Function 的能力，比如下面的 html：

<templateid="template">
${data.map(function(obj,index){
return`<p>Article:${obj.article}</p>
<p>Author:${obj.author}</p>
`;
}).join('')}
</template>

我们可以扩展字符串并定义一个名为 interpolate 的字符串方法来将 ES6 语法字符串转换为可执行的 ES6 代码：

String.prototype.interpolate=function(params){
constnames=Object.keys(params);
constvals=Object.values(params);returnnewFunction(…names,`return`${this}`;`)(…vals);
};

这样，只要有对应的数据，我们就可以根据

到此这篇关于简单了解JavaScript中的new Function的文章就介绍到这了,更多相关JS new Function内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！