日常开发中，前端数字格式化展示

日常开发中，数字展示涉及货币格式化、小数点后位数、千位分隔符之类的处理展示很常见，网上也有很多现成的方法。在这记录一下在日常开发中见到的另一种实现方式。

Number.prototype.toLocaleString()

接下来的内容主要是围绕Number.prototype.toLocaleString()这个方法。

toLocaleString 是 JavaScript 的内置方法，用于格式化数字为字符串，考虑了地区和语言的差异。这个方法的灵活性使得它在实际开发中有很多有用的应用场景。

基本用法：

javascript 复制代码

const number = 1234567.89;

// 默认地区格式化
const formattedDefault = number.toLocaleString();
console.log(formattedDefault); // 根据浏览器/环境的默认地区输出："1,234,567.89"

// 指定地区格式化
const formattedWithLocale = number.toLocaleString('fr-FR');
console.log(formattedWithLocale); // 指定法国地区输出："1 234 567,89"

在上述例子中，toLocaleString 默认使用环境或浏览器的默认地区，但也可以通过传递一个地区字符串参数来指定特定的地区。

小数位数和千位分隔符：

javascript 复制代码

const number = 1234567.89123;

// 限定小数点后两位
const formattedWithPrecision = number.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(formattedWithPrecision); // 输出："1,234,567.89"

// 不使用千位分隔符
const formattedWithoutSeparator = number.toLocaleString(undefined, { useGrouping: false });
console.log(formattedWithoutSeparator); // 输出："1234567.89"

通过在 toLocaleString 的第二个参数中传递一个选项对象，可以设置小数点后的位数，以及是否使用千位分隔符等。

货币格式化：

javascript 复制代码

const currencyValue = 1234567.89;

// 货币格式化
const formattedCurrency = currencyValue.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
console.log(formattedCurrency); // 输出："$1,234,567.89"

toLocaleString 还支持货币格式化，可以通过指定 style 为 'currency'，并提供 currency 参数来指定货币类型。

实际应用场景：

展示用户友好的数字： 在 UI 中展示数字时，使用 toLocaleString 可以使数字更易读，符合用户的地域习惯。
报表和数据可视化： 在报表或数据可视化工具中，使用 toLocaleString 可以为数字添加千位分隔符，提高数据的可读性。
国际化： 在支持多语言的应用中，根据用户的语言偏好，使用 toLocaleString 可以动态地调整数字格式。
金融应用： 对于需要处理货币的应用，toLocaleString 是一个非常有用的工具，可以方便地将数字格式化为符合财务标准的字符串。

总的来说，toLocaleString 是一个强大而灵活的方法，可以用于各种场景，从而提升用户体验，使得数字在不同地区和语言下更易读和易懂。

借助这个方法，封装了一个数字格式化函数方便日常使用。

javascript 复制代码

/**
 * 判断为空
 * @param {any} obj 判断的数据
 * @returns {Boolean} 是否为空
 */
export const isEmpty = (obj) => {
    return typeof obj === 'undefined' || obj === null || obj === '';
}

/**
 * 数字格式化
 * @param {number} value - 需要格式化的数值
 * @param {number} [precision] - 小数点后的位数
 * @returns {string} 格式化后的字符串
 */
export const parseNum = (value, precision) => {
    if (isEmpty(value) || isNaN(value)) return '--';
    if (isEmpty(precision) || isNaN(precision))
        return value.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 10});
    return value.toLocaleString(undefined, {minimumFractionDigits: precision, maximumFractionDigits: precision});
}

isEmpty函数的作用是判断传入的数据 obj 是否为空。如果 obj 的类型是 undefined，或者 obj 的值是 null，或者 obj 是空字符串 ''，则函数返回 true，表示为空；否则返回 false，表示不为空。

parseNum函数用于格式化数字。它接受两个参数，value 表示需要格式化的数值，precision 表示小数点后的位数（可选）。首先，函数会通过调用 isEmpty 函数判断 value 是否为空或者是否是非数值，如果是，则返回字符串 '--' 表示无效值。接着，函数检查是否提供了 precision 参数，如果没有或者不是有效的数字，则使用 toLocaleString 方法将 value 格式化成字符串，保留小数点后的位数在 [0, 10] 范围内。如果提供了有效的 precision 参数，则使用相应的小数位数进行格式化。最后，函数返回格式化后的字符串。例如，假设 value 的值为 1234567.89，而 precision 的值为 2，那么函数返回的字符串可能是 "1,234,567.89"，其中千位分隔符是根据默认的地区规范添加的，小数点后保留两位。

封装这个函数已经满足了在工作中简单的数字格式化千分位和保留小数点后几位，空值展示的简单需求。

前端数字格式化展示方法

日常开发中，前端数字格式化展示

Number.prototype.toLocaleString()

基本用法：

小数位数和千位分隔符：

货币格式化：

实际应用场景：