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

我想构建一个类似于desmos的东西，你可以在画布上画一个图形，然后移动它

到目前为止我已经成功了，但只剩下用户输入了

使用

标记，我希望用户编写例如：

"5x + 2"

结果应该是：

var f = 5*x + 2;

我搜索了很多方法来实现这一点，我只找到了一些JavaScript中的数学库和

eval（）

函数。最后一个非常有用，因为我可以用图中的

x

值替换

x

，这样就可以构建函数图。问题是，当我想移动图表时，它会滞后很多，所以这不是最好的主意

我确信它是滞后的，因为

eval（）

函数每次都必须为画布的每个x值转换字符串，大约每秒转换40-50次

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

可能吗？有人能帮忙吗

编辑1： 这是我的职责：

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

    var f = 2 * x + 2;

    return getPixelY(f);
}

---

您可以使用eval，但它在每个浏览器的JavaScript引擎上的行为可能不同

这是一个易于查找和替换的方法：

函数解算器x（方程，x值）{
变量扩展=方程。替换（/（\d+（？：\。\d+））x/g，$1*x'）；
返回值（扩展的替换（/x/g，xValue））；
}
console.log（solveForX（“5x+2”，3））；//17
console.log（solveForX（“-4.2x+3x”，5））；//-6

.as控制台包装{top:0；最大高度：100%！important；}

来回答您的问题（即使这不能解决您的问题）

你可以这样做

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

这将从

字符串创建
函数
。第一个参数是第一个参数的名称，
x
，第二个参数是函数体（
return
语句）

然后你可以这样称呼它：
f（3）
结果将是
17

请注意，您必须在等式中写入乘法，如
5*x
而不是
5x

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

您的问题不是
eval
需要很长的计算时间，而是重新绘制画布非常昂贵。尝试限制绘制次数或仅在
requestAnimationFrame
回调中调用draw函数，这样浏览器仅在准备好绘制画布时才会重新绘制画布。
为什么需要每秒转换40-50次？问题不在于
eval
。你问的问题不对。当我移动鼠标时，@Cristy可能会重复，坐标系也会移动。我用一个计数变量测量它，它大约是每秒50次是的，问题是你如何重新绘制画布。评估是即时的，问题是重新绘制画布所需的时间，这就是它滞后的原因。尝试在
requestAnimationFrame
回调中调用
draw
函数。只在按下鼠标按钮和移动鼠标时，画布才会重新绘制。我还没有限制绘图的数量，而且我对
requestAnimationFrame
一无所知。我来看看你的例子是否有效。它确实有效，而且比
eval（）
好得多。这样，您只需将字符串计算到函数中一次，然后就可以使用不同的参数调用它任意次数。这就是我要找的。我将更深入地研究这个
requestAnimationFrame
。谢谢。将投票并将您的答案标记为正确答案。；）谢谢你的回答。稍后将对此进行更深入的研究