JavaScript中BEDMAS运算实现及表单数据传入‘artist cut’的技术咨询

首先咱们先把BEDMAS规则理清楚，再解决表单值计算传入的问题，一步一步来：

一、搞懂BEDMAS运算顺序 #

BEDMAS其实就是运算优先级的规则，全称是Brackets（括号）> Exponents（指数）> Division/Multiplication（除法/乘法，同级）> Addition/Subtraction（加法/减法，同级），同级运算按从左到右的顺序执行。

用你给的例子((150+500)*0.6)-25=365拆解步骤，完全贴合BEDMAS：

1. 先处理最内层括号：150 + 500 = 650（括号优先）
2. 再执行乘法：650 * 0.6 = 390（乘法优先级高于减法）
3. 最后执行减法：390 - 25 = 365（减法最后执行）

如果混淆顺序，比如先算500*0.6，结果就完全错了，所以记住括号优先，同级从左到右就不会出错。

二、将输入值计算后传入"artist cut"字段 #

从你给出的表单代码片段来看，咱们需要先补全必要的输入项，再用JavaScript实时计算或提交时计算结果，赋值给"artist cut"字段。下面是完整的实现方案：

1. 完善表单结构 #

先给表单添加对应运算的数值输入框，以及用于展示/提交的"artist cut"字段：

<body>
  <form name="submit-to-google-sheet" class="pure-form pure-form-stacked" id="artistCalculationForm">
    <fieldset>
      <input name="Date" type="Date" placeholder="Date" required>
      <input name="Client" type="text" placeholder="Client" required>
      <input name="Artist" list="artist" placeholder="Artist" required>
      <datalist id="artist">
        <!-- 可添加预设艺术家选项 -->
        <option value="Artist A"></option>
        <option value="Artist B"></option>
      </datalist>
      <!-- 对应运算式的4个输入值 -->
      <input name="value1" type="number" placeholder="Value 1 (e.g. 150)" required>
      <input name="value2" type="number" placeholder="Value 2 (e.g. 500)" required>
      <input name="value3" type="number" placeholder="Value 3 (e.g. 0.6)" step="0.01" required>
      <input name="value4" type="number" placeholder="Value 4 (e.g. 25)" required>
      <!-- Artist Cut字段，设为只读避免手动修改 -->
      <input name="artist cut" type="number" id="artistCutField" readonly placeholder="Artist Cut">
      <button type="submit">Submit to Sheet</button>
    </fieldset>
  </form>
</body>

2. 编写JavaScript计算逻辑 #

通过监听输入变化实时计算结果，确保用户输入时就能看到正确的"artist cut"值，提交时再校验一次：

// 获取表单及输入元素
const form = document.getElementById('artistCalculationForm');
const inputs = {
  value1: form.querySelector('input[name="value1"]'),
  value2: form.querySelector('input[name="value2"]'),
  value3: form.querySelector('input[name="value3"]'),
  value4: form.querySelector('input[name="value4"]'),
  artistCut: form.querySelector('input[name="artist cut"]')
};

// 核心计算函数，严格遵循BEDMAS规则
function calculateArtistCut() {
  // 将输入值转为数字，避免字符串拼接错误
  const v1 = parseFloat(inputs.value1.value) || 0;
  const v2 = parseFloat(inputs.value2.value) || 0;
  const v3 = parseFloat(inputs.value3.value) || 0;
  const v4 = parseFloat(inputs.value4.value) || 0;
  
  // 按照你的运算式执行：((v1 + v2) * v3) - v4
  const result = ((v1 + v2) * v3) - v4;
  
  // 将结果赋值给artist cut字段，保留两位小数（按需调整）
  inputs.artistCut.value = result.toFixed(2);
}

// 监听所有数值输入的变化，实时计算
Object.values(inputs).forEach(input => {
  if (input.name !== 'artist cut') {
    input.addEventListener('input', calculateArtistCut);
  }
});

// 表单提交前再执行一次计算，确保结果正确
form.addEventListener('submit', (e) => {
  calculateArtistCut();
  // 这里保留你原有的Google Sheet提交逻辑即可
});

关键细节说明 #

• 避免字符串拼接：输入框的value默认是字符串，必须用parseFloat()转为数字，否则会出现"150"+"500"="150500"的错误。
• 严格遵循BEDMAS：用括号明确运算顺序，((v1 + v2) * v3) - v4完全复刻你给出的运算逻辑，不会出现优先级混淆。
• 实时反馈：监听输入事件让用户在输入过程中就能看到计算结果，提升体验。

内容的提问来源于stack exchange，提问作者Cameron McWhannell