使用 JavaScript 格式化价格

在前端开发中，我们常常需要对价格进行格式化，以增强页面的可读性和美观性。本文将介绍如何使用 JavaScript 对价格进行格式化。

1. 格式化为金额形式

对于一个数字，我们可以使用 toLocaleString() 方法将其转换为金额形式：

const price = 1200.5;
const formattedPrice = price.toLocaleString("zh-CN", { style: "currency", currency: "CNY" });  // ￥1,200.50

其中，第一个参数 "zh-CN" 是指定地区（中国），第二个参数 { style: "currency", currency: "CNY" } 是指定格式（金额）和货币类型（人民币）。

2. 去除小数点

在某些情况下，我们需要将价格去除小数点。

一种常见的做法是使用 Math.floor() 函数：

const price = 1200.5;
const formattedPrice = Math.floor(price).toLocaleString("zh-CN");  // 1,200

其中，Math.floor(price) 返回去除小数位的结果。

3. 保留特定位数小数

有时，我们需要保留特定位数小数，例如保留两位小数：

const price = 1200.5;
const formattedPrice = price.toFixed(2).toLocaleString("zh-CN");  // 1,200.50

其中，.toFixed(2) 是指定要保留两位小数，返回的是一个字符串类型的结果。

4. 自定义格式化函数

如果以上方法不能满足我们的需求，我们可以使用自定义的格式化函数：

function formatPrice(price, decimal = 2, separator = ".", currency = "") {
  const integerPart = Math.floor(price).toLocaleString("zh-CN");
  const decimalPart = price.toFixed(decimal).split(".")[1];
  return currency + integerPart + separator + decimalPart;
}

// 使用示例
const price1 = 1200.5;
const formattedPrice1 = formatPrice(price1, 2, ".", "￥");  // ￥1,200.50

const price2 = 1200.5;
const formattedPrice2 = formatPrice(price2, 0, ",", "$");  // $1,200

其中，formatPrice() 函数接收四个参数，分别是价格、小数位数、小数点分隔符和货币符号。该函数首先将价格分为整数部分和小数部分，然后分别进行格式化，在最后将它们拼接在一起。使用时，我们可以根据需要传入不同的参数。

总结

本文介绍了 JavaScript 格式化价格的几种方法，包括将数字转换为金额形式、去除小数点、保留特定位数小数和自定义格式化函数。根据具体需求，选择合适的方法进行格式化。