Question

我正在构建一个融资计算器，并且输出到DOM的所有数字都在成千上万。

我当前在我的代码中的一个数字上使用.toLocaleString（），并且它可以工作（主要productPrice数字）。在输出到DOM时，我使用了.toLocatelString（）。

但是，我似乎无法弄清楚为什么当使用相同的方式时，它不能在其他数字上使用。具体来说，是预付定金，总计和每月的数字。

这是JS代码（我输入的.toLocaleString（）在代码的最底部）：

"use strict";

// Define product price / tax

const productPrice = 105000;
const tax = 0.13;

// Append product price to DOM

const productPriceID = document.getElementById("product-price");
productPriceID.innerHTML = productPrice.toLocaleString();

// Grab the id's of the main product price, down payment, total, per month and button for DOM appending

const downPaymentValue = document.getElementById("down-payment-value");
const totalValue = document.getElementById("total-value");
const perMonthValue = document.getElementById("per-month-value");
const calculateBtn = document.getElementById("calculate");

///////// Calculations

calculateBtn.addEventListener("click", calculate);

function calculate() {
  // Grab the value of the month selected
  const monthSelected = document.querySelector('input[name="month"]:checked')
    .value;
  // Grab the value of the down payment percentage selected
  const percentageSelected = document.querySelector(
    'input[name="percent"]:checked'
  ).value;
  // Calculate down payment percentage based on main price
  const totalDownPayment = (productPrice * percentageSelected).toFixed(2);
  // Calculate the total
  const totalPrice = (productPrice - totalDownPayment).toFixed(2);
  // Calculate the per month
  const perMonth = (totalPrice / monthSelected).toFixed(2);
  // Append down payment to DOM
  downPaymentValue.innerHTML =
    "<sup>$</sup>" + totalDownPayment.toLocaleString();
  downPaymentValue.parentNode.appendChild(downPaymentValue);
  // Append total to DOM
  totalValue.innerHTML = "<sup>$</sup>" + totalPrice.toLocaleString();
  totalValue.parentNode.appendChild(totalValue);
  // Append per month to DOM
  perMonthValue.innerHTML = "<sup>$</sup>" + perMonth.toLocaleString();
  perMonthValue.parentNode.appendChild(perMonthValue);
}

有什么主意吗？预先感谢。

Answer 1

这是因为您的其他数字已通过toFixed转换为字符串。因此toLocaleString不会做任何事情。

使用数字进行所有数学运算，最后将其转换为字符串。

const totalDownPayment = (productPrice * percentageSelected);
const totalPrice = (productPrice - totalDownPayment);
const perMonth = (totalPrice / monthSelected);

使用options参数转换为文本以指定小数位数：

const totalDownPaymentStr = totalDownPayment.toLocaleString(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
const totalPriceStr = totalPrice.toLocaleString(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
// ...

有关选项参数的更多信息，请参见MDN documentation。

在JavaScript中为大于一千的数字添加逗号

1 个答案: