jQuery数字格式千k - Javascript

简介

在前端开发中，数据的展示往往需要进行数字格式化，特别是当数字较大时，需要对其进行千位分隔、添加单位等操作，以提升用户体验。一个轻便、易用的jQuery插件——jQuery数字格式千k便应运而生。

功能

• 对数字进行千位分隔
• 支持小数点后保留指定位数
• 支持添加单位后缀

如何使用

首先需要引入jQuery和插件文件：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="./jquery.numberFormat.js"></script>

然后就可以进行数字格式化了：

<div id="num">9999999</div>

$("#num").numberFormat(); // 输出：9,999,999

还可以选择保留小数点后几位，并添加后缀：

<div id="num2">123456.789</div>

$("#num2").numberFormat({
    decimal: 2, // 保留小数点后两位
    suffix: '元' // 添加单位后缀
}); // 输出：123,456.79元

参数配置

| 参数名 | 默认值 | 说明 | | --- | --- | --- | | decimal | 0 | 保留小数点后的位数 | | suffix | "" | 单位后缀，例如：万元、亿等 |

兼容性

jQuery数字格式千k插件兼容以下浏览器：

• Chrome
• Firefox
• Safari
• Edge
• IE8及以上版本

代码片段

插件的完整代码片段如下所示：

$.fn.numberFormat = function (options) {
    var self = $(this);
    var defaultValue = {
        decimal: 0,
        suffix: ""
    };
    var settings = $.extend(defaultValue, options);
    var re = /(\d)(?=(\d{3})+(?!\d))/g;

    function parseNumber(str) {
        var number = parseFloat(str);
        if (isNaN(number)) {
            return "";
        }
        if (settings.decimal > 0) {
            number = number.toFixed(settings.decimal);
        }
        return number.toString();
    }
    function formatNumber(str) {
        return str.replace(re, "$1,");
    }
    function format() {
        var text = self.text();
        var number = parseNumber(text);
        var formattedNumber = formatNumber(number);
        self.text(formattedNumber + settings.suffix);
    }
    return this.each(function () {
        format();
    });
};