JS如何运行JS代码段
本帖最后由 马黑黑 于 2022-9-19 13:13 编辑有时候，我们需要动态去运行实现不能确定的代码，就像 goldenpen 那样可以实时测试运行用户修改的代码，怎么办？
假如，我们有这么一个JS代码片段，我们要去运行它：
let jsStr = `
a = 12;
b = 7;
c = a + b + 1.5;
console.log(a,b,c);
`;
我们期待执行上述代码后，按 F12，切换到控制台（control），能看到这样的结果：12 7 20.5
首先可以使用定时器。没错，就是 setTimeout 或 setInterval，我们以前者为例（因为后者要额外关闭，有点麻烦）：
<script>
let jsStr = `
a = 12;
b = 7;
c = a + b + 1.5;
console.log(a,b,c);
`;
setTimeout(jsStr, 1);
</script>
完美！
其次，资深的JS开发者肯定能想到 eval，这是JS老掉牙的函数，它早期用于评估JS代码，所以可以运行JS代码片段。试看：
eval(jsStr);
运行完美！但，除非确实能确保安全性，否则不要使用 eval 函数。由于 eval 的全局性，它可以被轻易利用，临时运行具有危险性的代码，所以业界将 eval 称为 evil 函数，evil 是魔鬼的意思。并且，eval 的效能极其低下，它每次运行都要调用JS解释器。只建议自己运行或测试代码时可以使用 eval 函数。
第三，追加 script 元素。<script> ... </script> 是 HTML 引用JS代码的方式，它可以被视为是一个HTML标签，故此，可以追加它，但我们需要一个宿主元素来装载它，不建议直接加载到 <head> 头，我们可以写一个有 id 标识的HTML标签：
<div id="mama"></div>
然后，在JS代码里：
let script = document.createElement('script');
script.textContent = jsStr;
mama.appendChild(script);
也非常完美！
这个方法有个缺点：当要运行的代码片段拥有使用 var、let、const 等声明的变量存在时，只能正常运行一次，再次运行被报错（变量已经声明）、得不到预期结果。不过，上面的 jsStr 代码片段，可以随意运行任何多次。
第四、使用 new Function 实现。function 是JS声明函数的关键字，函数可以视为对象甚至变量，故此，new Function 享有同等于 new String 的待遇。试看：
let func = new Function(jsStr);
func();
我们先声明一个函数 func，这个 func 函数调用 new Function 加一个参数即JS代码片段变量 jsStr，然后 第二行 运行 func() 函数。结果与前面的一致。
new Function 方法，可以有其他参数，代码片段是关键部分不能少，是函数主体。此法被认为是最理想的运行JS代码片段的实现机制。
也许还有其他的方法，我能想到的暂时是以上这些。
哈哈，俺表示看不懂。。{:4_173:} “<script> ... </script> 是 HTML 引用JS代码的方式，它可以被视为是一个HTML标签”
怪不得看到script的字样觉得那么熟悉，原来凡是带JS的都看到过它，看得多了就成“熟人”了{:4_173:} 运行JS代码片段是为了检查的吧，这是高手需要用到的功能吧{:4_173:} 红影 发表于 2022-9-19 16:30
运行JS代码片段是为了检查的吧，这是高手需要用到的功能吧
未必。很多场合会用得上，我们的加餐程序就用上它：通过它获得lrc歌词数组的变量，从而可以大大减少编程开销。 马黑黑 发表于 2022-9-19 18:38
未必。很多场合会用得上，我们的加餐程序就用上它：通过它获得lrc歌词数组的变量，从而可以大大减少编程 ...
哦，这个可以得到数组结果啊，这些代码的运用只有黑黑比较熟悉，我这样的是完全不知呢{:4_173:} 这个真不懂，虽然老用F12 小辣椒 发表于 2022-9-19 21:42
这个真不懂，虽然老用F12
F12至少可以差错 马黑黑 发表于 2022-9-19 21:51
F12至少可以差错
是的，我经常这样找的，都是小风教的 小辣椒 发表于 2022-9-19 21:57
是的，我经常这样找的
它会告诉你，JS方面，第几行出了错误 马黑黑 发表于 2022-9-19 21:57
它会告诉你，JS方面，第几行出了错误
小风也是有空教一点，没有仔细学习 小辣椒 发表于 2022-9-19 21:58
小风也是有空教一点，没有仔细学习
也可以了，不急的，慢慢领会 马黑黑 发表于 2022-9-19 22:04
也可以了，不急的，慢慢领会
我反正也是不会，慢慢学了 小辣椒 发表于 2022-9-19 22:06
我反正也是不会，慢慢学了
学会修改自己需要改变的那部分就成了 马黑黑 发表于 2022-9-19 22:07
学会修改自己需要改变的那部分就成了
现在什么都一知半解的，改也是不会改 小辣椒 发表于 2022-9-19 22:10
现在什么都一知半解的，改也是不会改
相对是新的东东，知识点太多太多，和你过去玩那几个 style 属性比，自然有难度
页:
[1]