JavaScript eval() 语法

Question

我有一个旧脚本，用于通过将类名称添加到正文标记来更改网站的字体大小，其部分功能是在将现有类更改为其他设置之一之前删除现有类。问题是有一个eval 行从body标签上的其他类中删除了“大”、“中”或“小”字样的任何实例，这些类充当页面的唯一标识符，这会干扰我的其他脚本正在使用。如何更改以下代码中的 eval 行，使其仅匹配整个单词？

/* Override CSS with global font size selected by user */
function changeFontSize(size) {
var oldClasses, currentClass;

/*sets key words to be eliminated*/
oldClasses = eval("/large|medium|small/ig");

/*gets the current class names*/
currentClass = document.body.className;

/*eliminates key words from string, then adds new size*/
document.body.className = currentClass.replace(oldClasses, "") + " " + size;
}

Answer 1

这里没有充分的理由使用eval(...) 操作。就像这里提到的许多人一样，eval 是不好的做法。

在此处了解更多信息： what does eval do and why its evil?

执行eval("/large|medium|small/ig") 与var pattern = /large|medium|small/ig/ 相同。前者将评估 string 以找出该表达式的含义，然后再将其作为正则表达式文字。虽然后者是一个直接的声明，但本质上它更有效，因为您跳过了评估步骤。

由于字体模式是静态的（不会改变），最好将其声明为正则表达式对象并继续使用它。

例子：

var FONT_SIZE_NAMES_PATTERN = new RegExp(/\b(large|medium|small)\b/ig);

function changeFontSize(size) {
    var oldClasses, currentClass;

    /*gets the current class names*/
    currentClass = "large";

    /*eliminates key words from string, then adds new size*/
    // document.body.className = currentClass.replace(FONT_SIZE_NAMES_PATTERN, "") + " " + size;
    console.log("New class name = " + currentClass.replace(FONT_SIZE_NAMES_PATTERN, "") + " " + size);
}

changeFontSize("VERY LARGE");