JavaScript eval() 语法

Question

我有一个旧脚本，用于通过向正文标记添加类名称来更改网站的字体大小，其部分功能是在将其更改为其他设置之一之前删除现有的类。问题是有一个 eval 行从 body 标记上的其他类中删除了单词“large”、“medium”或“small”的任何实例，这些类充当页面的唯一标识符，干扰我正在使用的其他脚本。如何更改以下代码中的 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")与varpattern =/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");