应使用单个文本输入框接收完整算式，配合mathjs.evaluate()安全计算，避免eval()风险；需处理Infinity、NaN及精度控制，并提供精准报错提示。
用 input type="text" 接收算式比用多个数字框更实际
用户真正想输的是 3.14 * (5 + 2)^2 - sqrt(16)，不是分开填“第一个数”“运算符”“第二个数”。强行拆解输入会破坏表达习惯，也增加前端校验负担。所以表单主体就一个 <input type="text" id="expr">，外加一个 <button onclick="calc()"> 触发计算。
注意别用 eval() 直接执行——它能跑任意 JS 代码，用户输 alert(1) 就弹窗，输 fetch('/api/delete') 就出事。必须走安全解析路线。
mathjs.evaluate() 是少踩坑的现成选择
它专为数学表达式设计，支持 sin、log、pi、e、幂运算 ^、括号嵌套，还默认禁用危险操作（比如不让你调 Function 或 require）。引入方式很简单：
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.8.0/math.min.js"></script>
核心计算逻辑就两行：
立即学习“前端免费学习笔记（深入）”；
function calc() {<br> const expr = document.getElementById('expr').value.trim();<br> try {<br> const result = math.evaluate(expr);<br> document.getElementById('result').textContent = result;<br> } catch (e) {<br> document.getElementById('result').textContent = '错误：' + e.message;<br> }<br>}常见报错包括：SyntaxError: Unexpected token（括号没配对）、Undefined symbol "sqrt"（函数名写成小写但 mathjs 要求 sqrt，其实它支持，但拼错如 sqr 就报）、Cannot convert "abc" to a number（输进了纯字母）。
需要支持自定义变量？用 math.evaluate(expr, scope)
比如用户想先设 a = 10，再算 a^2 + 2*a，就不能只传字符串。得准备一个作用域对象：
const scope = { a: 10, b: 2.5 };<br>const result = math.evaluate('a^2 + 2*a + b', scope); // → 122.5如果表单里允许用户输多行（如 a=5\nb=3\na+b），就得手动按换行分割，逐条 math.evaluate(line, scope)，最后取最后一行结果。注意：赋值语句如 a=5 返回的是 5，不是 undefined，所以别误判为错误。
变量名不能是保留字（if、for、return），也不能含空格或连字符——user-name 会解析失败，得用 userName。
显示结果时别忽略 Infinity 和 NaN
math.evaluate('1/0') 返回 Infinity，math.evaluate('0/0') 返回 NaN。直接 textContent = result 会显示为字符串 "Infinity" 或 "NaN"，用户可能困惑。建议统一处理：
- 用
math.isFinite(result)判断是否为普通数 - 用
math.isNaN(result)区分NaN和无效输入错误 - 对
Infinity可显示为"∞"，对NaN显示为"无效结果"，比原样吐出来友好
另外，mathjs 默认输出小数位数较多（1/3 → 0.3333333333333333），可用 math.format(result, {precision: 10}) 控制精度，避免一长串小数吓到人。
真正难的不是算出结果，而是让用户知道哪里错了、为什么错、怎么改——报错信息要贴着用户输入的原始字符串来定位，比如高亮第 3 个字符，而不是只甩一句“语法错误”。
