【JS 】实现数字格式化效果

介绍

最近公司改造老项目，要将数字类型的显示效果做统一处理；
一个一个改显然不现实，所以做了一个公共组件统一处理；

对数字格式的要求主要有：小数保留位数、是否显示千分符、小数位不足是否补零、小数截断模式
另外还附加一个显示效果 居中、居左、居右
还要分不同类型来控制，比如金额，数量使用不同格式；

主要功能类分为3个

• NumberExtensions.js // 数字格式配置，数字剪切，格式化等核心功能
• NumberExtensions.jQuery.js // 基于 jQuery 自动渲染 input 框
• NumberExtensions.Vue.js // 基于 Vue2 自定义组件 number-input （还有一部分页面是基于vue2做的）
  源码：gitee

效果展示

目前功能已完成，效果如下：数字输入框JQuery版 demo源码预览下载- JSRUN

使用方法

$(function(){
    /**
     * 设置小数样式
     * @param {String|String[]} styleKeys 样式名称和别名。如：["price","p"]
     * @param {Object} config 配置。如： { decimals: 4, mode: "Round", thousands: true, zreofill: false, align: "left", units: {} };
     *   decimals: 小数保留位数 0~20
     *   mode: 小数截取方式 Round-四舍五入/Ceil-向上取整/Floor-向下取整
     *   thousands: 是否显示千分位 true/false
     *   zreofill: 小数位不足是否补零 true/false
     *   align: 对齐方式 left/right/center
     *   units: 单位配置
     * @param {String} unit 单位
     */
    Number.setConfig("price", "p"], { decimals: 4, mode: "Round", thousands: false, zreofill: false, align: "right" });
})

// 根据配置截取小数位数
var price = 1.234567.scale("p"); 

// 根据配置格式化数字字符串
var priceStr = 1234567.8.format("p"); 

// 同时操作截取和格式化
var str = number.scaleformat("p");

// 静态方法，可以在不确定变量类型的情况下编码
var str = Number.scaleformat(number,"p") || "-" //当参数number无法转为数字时,返回null
// Number.scale(number,"p")
// Number.format(number,"p")

// Number.parse 方法，方便转换数字，排除正负无穷，可正确处理千分符
var number = Number.parse('1,234,567.76') || 0;

基于 jQuery

基于Vue