javascript中计算结果数为NaN

Question

当我只使用计算功能时，它工作正常。但是当我添加输入数字逗号函数时，它会将结果编号设为 NaN。我该如何解决这个问题？

这是我的 HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <section class="form">
        <div class="container forms">
            <h3 class="first">chicken</h3>
            <input type="text" id="value1"/> times

            <h4 class="second">pizza</h4>
            <input type="text" id="value2"/> pieces
        </div>
        <button class="calculate" type="button" onclick="cal()">sum</button>
        <h5 id="result"></h5>
    </section>

她是我的JS

            const cal = () => {
            const A = value1.value,
                B = value2.value;
            const res = A * (9 / 100) * (100 / B).toLocaleString();

            result.innerText = `you have ${new Intl.NumberFormat('ja-JP', {
                style: 'currency',
                currency: 'JPY',
            }).format(res)} Yen, sir.`;
        };
    

        $('input').keyup(function (event) {
            // skip for arrow keys
            if (event.which >= 37 && event.which <= 40) return;

            // format number
            $(this).val(function (index, value) {
                return value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            });
        });

感谢您的帮助。

Answer 1

在格式化数字之前，您需要将其转换为实际数字。当它来自表单时，它是一个字符串。例如，您可以通过乘以 1 ( x * 1) 或使用 Number() 方法将其转换为数字。或通过此处的任何解析和数学函数：https://stackabuse.com/javascript-convert-string-to-number/

来自 MDN 的有关 Number() 原始包装对象的权威信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

例子：

// convert STRING '10.38899' to NUM 10.39:

const a = Number(input1.value).toFixed(2))

// convert STRING '10.38899' to NUM 10.38899

const b = parseFloat(input2.value)

// convert STRING '15.38899' to NUM 15

const c = parseInt(input3.value, 10)

// convert STRING '12.5' to NUM 12

const d = Math.floor(input4.value)

// convert STRING '12' to NUM 12 (most performant method)

const e = input5.value * 1

// Related: convert STRING '-12' to NUM 12 (convert to positive number)

const f = input6.value
const convertNeg = (x) => (Number(x) < 0) ? (x * -1) : Number(x)

convertNeg(f)

Answer 2

可能是干净的值，因此任何不属于有效数字的字符都会被删除。举个例子。

function asNumber(value) {
    return Number(String(value).replace(/[^\d\.]+/g, ''));
}

然后您可以将您的值传递为：

const A = asNumber(value1.value),
      B = asNumber(value2.value);

Answer 3

只需使用parseFloat 将输入值转换为数字。有一点，如果你想用逗号你需要把它换成一个点，否则parseFloat会给你一个整数：

const cal = () => {
            const A = parseFloat(value1.value.replace(/,/g, '.')),
                B = parseFloat(value2.value.replace(/,/g, '.'));
            const res = A * (9 / 100) * (100 / B).toLocaleString();
        };

如果您愿意，也可以这样做：

    const cal = () => {
    const A = value1.value,
        B = value2.value;
    const res = parseFloat(A.replace(/,/g, '.')) * (9 / 100) * (100 / parseFloat(B.replace(/,/g, '.'))).toLocaleString();
};

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

如上所述，你也可以使用Number()