执行含有【模板字符串】html代码

1、如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。

// 写法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"

// 写法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null, str);
func('Jack') // "Hello Jack!"

2、项目中应用

变量configHtml中存储的是通过配置生成的html文本

<img id='img' alt='' width='100%' height='100%' src='http://139.9.126.196/group1/M00/00/00/wKgK1V9YIfKASIkNABBBq1nFOEs481.png'>

<div style='position:absolute;top:44.5px;left:69px;border:1px solid white;border-radius:5px;padding: 5px 10px'><pre style='margin:0;background:transparent;color:white;font-size:20px'>二级RO原水产率
 ${num} us/cm
二级RO产率
 ${num2}</pre></div>
            
<div style='position:absolute;top:23.5px;left:750px;border:1px solid #4cf01c;border-radius:5px;padding: 5px 10px'><pre style='margin:0;background:transparent;color:white;font-size:'>  产水运行
EDI  产水电阻率
${num3} MO</pre></div>

模板字符串的核心应用代码，这里因为不确定变量的个数，所以采用 …param传递参数

let str = 'return '+'`'+configHtml+'`';
// let getHtml = new Function( 'num', 'num2', 'num3', str );
let getHtml = new Function( ...paramNameList, str );    // paramNameList=['num', 'num2', 'num3']

// configHtml = getHtml(123, num2, num3);
configHtml = getHtml(...paramList);                    // paramList=[ 123, num2, num3]

3、简单的实现上述功能的完整代码

const num = 123;
const num2 = (Math.random()*10000).toFixed(2);
const num3 = (Math.random()*10000).toFixed(3);
let configHtml = `
<img id='img' alt='' width='100%' height='100%' src='http://139.9.126.196/group1/M00/00/00/wKgK1V9YIfKASIkNABBBq1nFOEs481.png'>

<div style='position:absolute;top:44.5px;left:69px;border:1px solid white;border-radius:5px;padding: 5px 10px'><pre style='margin:0;background:transparent;color:white;font-size:20px'>二级RO原水产率
 ${num} us/cm
二级RO产率
 ${num2}</pre></div>
            
<div style='position:absolute;top:23.5px;left:750px;border:1px solid #4cf01c;border-radius:5px;padding: 5px 10px'><pre style='margin:0;background:transparent;color:white;font-size:'>  产水运行
EDI  产水电阻率
${num3} MO</pre></div>
`;

let str = 'return '+'`'+configHtml+'`';
let paramNameList=['num', 'num2', 'num3'];
// let getHtml = new Function( 'num', 'num2', 'num3', str );
let getHtml = new Function( ...paramNameList, str );   // paramNameList=['num', 'num2', 'num3']

let paramList=[ num, num2, num3];
// configHtml = getHtml(123, num2, num3);
configHtml = getHtml(...paramList);    // paramList=[ 123, num2, num3]
console.log("configHtml=",configHtml )

浏览器控制台运行结果截图：