JavaScript如何对带$符号的字符串类型小数执行乘法运算

原有代码问题汇总 #

• DOM属性书写错误：输入框的取值属性为小写value，大写Value无法正确获取输入内容
• 未预处理货币符号：输入值携带$前缀，直接运算会得到NaN非数字结果
• 方法使用错误：reduce（代码中还拼错为reduc）是数组实例方法，无法在数字类型的相乘结果上调用
• 逻辑位置错误：逗号替换为小数点的格式化逻辑应该作用于输入的原始字符串，而非运算后的结果

正确实现代码 #

HTML部分（无改动） #

<input id="Text1" value="$10.99" />
<input id="Text2" value="$20.8" />

JS部分 #

// 获取输入框元素
const x = document.getElementById("Text1");
const y = document.getElementById("Text2");

// 预处理输入值：去掉$符号、替换逗号为小数点、转换为浮点型数字
const numX = parseFloat(x.value.replace('$', '').replace(',', '.'));
const numY = parseFloat(y.value.replace('$', '').replace(',', '.'));

// 执行乘法运算，toFixed(2)指定保留两位小数，可根据需求调整
const result = (numX * numY).toFixed(2);

alert(result);

逻辑说明 #

先对原始输入字符串做清洗，移除货币符号$，同时兼容逗号作为小数分隔符的场景，替换为标准小数点后，用parseFloat转换为可运算的浮点数再执行乘法即可。示例输入$10.99和$20.8运行后会弹出结果228.59。

内容的提问来源于stack exchange，提问作者Ahmad Ali