前端随笔系列之js实现前端数据的格式化显示

最新推荐文章于 2024-03-30 11:35:53 发布

weixin_30955341

最新推荐文章于 2024-03-30 11:35:53 发布

阅读量303

点赞数

文章标签：前端数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/wolfwu/p/6814019.html

版权

　　今天由于工作需要需要对后端传过来的数值类型数据格式化输出，输出要求保留两位小数和整数部分千分位显示出来，看了一下网上的几篇帖子对其进行整理了一下，写出了如下所示的js方法用于对数值类型数据格式化输出，例如：￥123,456.00的形式，废话不多说，直接看实例：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>    
 6 </head>
 7 <body>
 8     <div style="width:600px;height:350px;background-color:#808080;color:#fff;">
 9         <input type="text" id="number" style="width:400px;margin-left:5px;margin-top:8px;"/>
10         <br />
11         <input type="button" value="Format" onclick="formate()" style="margin-left:5px;" />
12         <br/>
13         <input type="text" id="result" style="width:400px;margin-left:5px;"/>
14     </div>
15     <script type="text/javascript">
16         function formate() {
17             var num = document.getElementById('number').value;           
18             if (isNaN(num)||num==null||num=="") {
19                 alert("请输入有效数字！");
20                 document.getElementById('number').value = 0;
21                 return;
22             }
23             var result = formatNumber(num, 2, 1);            
24             document.getElementById('result').value = result;
25         }
26         /** 
27         * number:为需要格式化的数值        
28         * cent： 为number要保留的小数位
29         * isThousand： 为是否需要千分位 0:不需要,1:需要(数值类型); 
30         * 方法返回结果为格式的字符串,如'1,234,567.00'        
31         */
32         function formatNumber(number, cent, isThousand) {
33             number = number.toString().replace(/\$|\,/g, '');
34             
35             // 1、检查传入数值为数值类型  
36             if (isNaN(number))
37                 number = '0';
38 
39             // 2、获取符号(正/负数)  
40             sign = (number == (number = Math.abs(number)));//Math.abs(number)取出number的绝对值
41 
42             // 3、把指定的小数位先转换成整数.多余的小数位四舍五入，Math.pow(10, cent)为10的cent次方
43             number = Math.floor(number * Math.pow(10, cent) + 0.5);  
44             // 4、求出小数位数值
45             cents = number % Math.pow(10, cent);              
46             // 5、求出整数位数值  
47             number = Math.floor(number / Math.pow(10, cent)).toString();
48             // 6、把小数位转换成字符串,以便求小数位长度
49             cents = cents.toString();                 
50 
51             // 7、补足小数位到指定的位数  
52             while (cents.length < cent)
53                 cents = "0" + cents;
54             // 8、对整数部分进行千分位格式化.  
55             if (isThousand) {                
56                 for (var i = 0; i < Math.floor((number.length - (1 + i)) / 3) ; i++)
57                     number = number.substring(0, number.length - (4 * i + 3)) + ',' + number.substring(number.length - (4 * i + 3));
58             }
59             //9、返回格式化转换后的结果
60             if (cent > 0)
61                 return (((sign) ? '' : '-') + '￥' + number + '.' + cents);
62             else
63                 return (((sign) ? '' : '-') + '￥' + number);
64         }
65     </script>
66 </body>
67 </html>