如何将字符串转换为数学函数一次？

我想构建类似于 desmos 的东西，您可以在画布中绘制图形，然后移动它。

到目前为止我已经成功了，但唯一剩下的就是用户输入。

Using a <input type="text">我希望用户写的标签例如：

"5x + 2"

结果应该是：

var f = 5*x + 2;

我搜索了很多方法来做到这一点，我发现的唯一的东西是 JavaScript 中的一些数学库和eval()功能。最后一个真的很有帮助，因为我可以替换x与x图中的值，并且可以构建函数的图形。问题是，当我想移动图表时，它会滞后很多，所以这不是最好的主意。

我确信它会滞后，因为eval()函数每次必须为画布的每个 x 值转换字符串，大约每秒 40-50 次。

我想要实现的是将字符串转换为数学函数一次，然后使用它。

是否可以？有人可以帮忙吗

EDIT 1: 这是我的功能：

function f (pixelX) {
    var x = getCoordX (pixelX);

    var f = 2 * x + 2;

    return getPixelY(f);
}

回答你的问题（即使这不能解决你的问题）。

你可以这样做。

var myString = "5 * x + 2";
var f = Function("x", "return " + myString);

这创建了一个function from a string。第一个参数是第一个参数的名称，x，第二个参数是函数体（return陈述）;

然后你可以这样称呼它：f(3)结果是17.

请注意，您必须在方程式中编写乘法，例如5 * x不喜欢5x.

这样，您只需将字符串计算为函数一次，然后就可以使用不同的参数多次调用它。

你的问题不是这个eval计算需要很长时间，但重新绘制画布的成本非常高。尝试限制绘制次数或仅在 a 中调用绘制函数requestAnimationFrame回调，这样浏览器只有在准备好时才会重绘画布。