前言

JavaScript技術(shù)一直處于不斷發(fā)展壯大中，如果你是前端開發(fā)人員或者JavaScript開發(fā)工程師，那么，今天這個知識點，你有必要認真了解一下，它就是“new Function”。

1、語法

語法如下：

let?func?=?new?Function?([arg1,?arg2,?…argN],?functionBody);

最后一個參數(shù)必須是函數(shù)體，其余參數(shù)作為傳遞給函數(shù)體的參數(shù)。

例如：

let?sum?=?new?Function('a',?'b',?'return?a?+?b');
console.log(sum(1,?2));?//?the?result?is?3

我們平時開發(fā) JavaScript 或者 Node.js 的時候，沒有理由使用 new Function 構(gòu)造函數(shù)，因為不需要直接使用函數(shù)或者 () => {} 箭頭函數(shù)。

這是否意味著 new Function 語法是一個雞肋的功能？

千萬不要這樣想！因為它絕對不是你想的那樣！

new Function 語法有一個特別強大的特性，使它在 JavaScript 中發(fā)揮著不可替代的作用。

有什么特點？也就是函數(shù)體的數(shù)據(jù)格式是字符串，真是不可思議！

不可替代的角色

這里有幾個例子來展示 new Function 語法的微妙之處。

01).無效的 JSON 對象字符串合法化

例如，有以下字符串：

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

其中的字符串不符合JSON格式（鍵值需要雙引號），使用JSON.parse()解析會報錯。

那么，有沒有什么辦法可以把這個字符串對象轉(zhuǎn)換成可以解析的JSON呢？

很多人會想到正則匹配然后替換，或者使用eval等渣屬性進行處理。

沒必要這么麻煩， new Function 上線了，就完美了！

JS 代碼如下所示：

console.log(JSON.stringify(new?Function('return?'?+?str)()));
//?The?return?result?is:?'{"id":10393,"name":"yh","date":"2022–07–06"}'

使用返回語法，你可以輕松地將任意字符串轉(zhuǎn)換為其他 JavaScript數(shù)據(jù)類型。

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

比如Vue、React等現(xiàn)在都有自己的模板語法，比如{}語法。

如果我們想直接使用 ES6 自己的語法作為模板語言，就必須使用 new Function 的能力，比如下面的 HTML：

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

我們可以擴展字符串并定義一個名為 interpolate 的字符串方法來將 ES6 語法字符串轉(zhuǎn)換為可執(zhí)行的 ES6 代碼：

String.prototype.interpolate?=?function?(params)?{
const?names?=?Object.keys(params);
const?vals?=?Object.values(params);return?new?Function(…names,`return?`${this}`;`)(…vals);
};

這樣，只要有對應(yīng)的數(shù)據(jù)，我們就可以根據(jù)

到此這篇關(guān)于簡單了解JavaScript中的new Function的文章就介紹到這了,更多相關(guān)JS new Function內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論