如何使用JavaScript用逗号格式化数字？

时间：2018-11-16 08:21:00

标签： javascript

我有一个HTML表，其中包含一些数字数据。我想做的是格式化数字；目前我有 123456 ，并且我希望它的格式为 1,23,456 。

我在Java后端使用Java数字格式尝试使用Java，但是在查询中我使用的是round(sum(amount))，因此无法在UI上获得该格式，因为我仅使用JavaScript来处理json。我想通过JavaScript实现。

这是我的代码

 data= [
  {
    "amount": 291589,
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58337,
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65970,
    "billdate": "2018-08-01",
    "outlet": "KOLAR"
  },
  {
    "amount": 296125,
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56545,
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 72213,
    "billdate": "2018-08-02",
    "outlet": "KOLAR"
  },
  {
    "amount": 346605,
    "billdate": "2018-08-03",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 62459,
    "billdate": "2018-08-03",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65248,
    "billdate": "2018-08-03",
    "outlet": "KOLAR"
  },
  {
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  }
]

let formatData = function (data) {

                let billdates = [];
                let outlets = [];
                data.forEach(element => {
                    if (billdates.indexOf(element.billdate) == -1) {
                        billdates.push(element.billdate);
                    }
                    if (outlets.indexOf(element.outlet) == -1) {
                        outlets.push(element.outlet);
                    }
                });
                return {
                    data: data,
                    billdates: billdates,
                    outlets: outlets,

                };
            };



            let renderTable = function (data) {
                billdates = data.billdates;
                outlets = data.outlets;
                data = data.data;
                let tbl = document.getElementById("tbl");
                let table = document.createElement("table");
                let thead = document.createElement("thead");
                let headerRow = document.createElement("tr");
                let th = document.createElement("th");
                th.innerHTML = "Bill___Date";
                th.classList.add("text-center");
                headerRow.appendChild(th);
                let grandTotal = 0;
                let outletWiseTotal = {};
                th = document.createElement("th");
                th.innerHTML = "Total";
               th.classList.add("text-center");
                headerRow.appendChild(th);
                outlets.forEach(element => {
                    th = document.createElement("th");
                    th.innerHTML = element;
                   th.classList.add("text-center");
                    headerRow.appendChild(th);
                    outletWiseTotal[element] = 0;
                    data.forEach(el => {
                        if (el.outlet == element) {
                            outletWiseTotal[element] += parseInt(el.amount);
                        }
                    });
                    grandTotal += outletWiseTotal[element];
                });

                thead.appendChild(headerRow);
                headerRow = document.createElement("tr");
                th = document.createElement("th");
                th.innerHTML = "Total";
              th.classList.add("text-center");

                headerRow.appendChild(th);

                outlets.forEach(element => {
                    th = document.createElement("th");
                    th.innerHTML = outletWiseTotal[element];
                    th.classList.add("text-right");   //ol totals
                    headerRow.appendChild(th);
                });
                th = document.createElement("th");
                th.innerHTML = grandTotal;
                 th.classList.add("text-right");  // grand total
         /*  console.log(grandTotal);*/
               // headerRow.appendChild(th);
           headerRow.insertBefore(th , headerRow.children[1] );
                thead.appendChild(headerRow);
                table.appendChild(thead);

                let tbody = document.createElement("tbody");


                billdates.forEach(element => {
                    let row = document.createElement("tr");  
                    td = document.createElement("td");
                    td.innerHTML = element;
                    row.appendChild(td);
                    let total = 0;
                    outlets.forEach(outlet => {
                        let el = 0;
                        data.forEach(d => {
                            if (d.billdate == element && d.outlet == outlet) {
                                total += parseInt(d.amount);
                                el = d.amount;
                            }
                        });
                        td = document.createElement("td");
                        td.innerHTML = el;
                        td.classList.add("text-right"); //oldata
                        row.appendChild(td);
                    });
                    /*console.log("row is : " , row.children )*/
                    td = document.createElement("td");
                    td.innerHTML = total;
                    td.classList.add("text-right"); //column total
                   // row.appendChild(td);
                    row.insertBefore(td , row.children[1] );
                    tbody.appendChild(row);
                });

                table.appendChild(tbody);

                tbl.innerHTML = "";
                tbl.appendChild(table);
                table.classList.add("table");
                table.classList.add("table-striped");
                table.classList.add("table-bordered");
            }
            let formatedData = formatData(data);
            renderTable(formatedData);


data= [
  {
    "amount": 291589,
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58337,
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65970,
    "billdate": "2018-08-01",
    "outlet": "KOLAR"
  },
  {
    "amount": 296125,
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56545,
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 72213,
    "billdate": "2018-08-02",
    "outlet": "KOLAR"
  },
  {
    "amount": 346605,
    "billdate": "2018-08-03",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 62459,
    "billdate": "2018-08-03",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65248,
    "billdate": "2018-08-03",
    "outlet": "KOLAR"
  },
  {
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  }
]

let formatData = function (data) {

	            let billdates = [];
	            let outlets = [];
	            data.forEach(element => {
	                if (billdates.indexOf(element.billdate) == -1) {
	                    billdates.push(element.billdate);
	                }
	                if (outlets.indexOf(element.outlet) == -1) {
	                    outlets.push(element.outlet);
	                }
	            });
	            return {
	                data: data,
	                billdates: billdates,
	                outlets: outlets,
	                
	            };
	        };

		

	        let renderTable = function (data) {
	            billdates = data.billdates;
	            outlets = data.outlets;
	            data = data.data;
	            let tbl = document.getElementById("tbl");
	            let table = document.createElement("table");
	            let thead = document.createElement("thead");
	            let headerRow = document.createElement("tr");
	            let th = document.createElement("th");
	            th.innerHTML = "Bill___Date";
                th.classList.add("text-center");
	            headerRow.appendChild(th);
	            let grandTotal = 0;
	            let outletWiseTotal = {};
	            th = document.createElement("th");
	            th.innerHTML = "Total";
               th.classList.add("text-center");
	            headerRow.appendChild(th);
	            outlets.forEach(element => {
	                th = document.createElement("th");
	                th.innerHTML = element;
                   th.classList.add("text-center");
	                headerRow.appendChild(th);
	                outletWiseTotal[element] = 0;
	                data.forEach(el => {
	                    if (el.outlet == element) {
	                        outletWiseTotal[element] += parseInt(el.amount);
	                    }
	                });
	                grandTotal += outletWiseTotal[element];
	            });
	            
	            thead.appendChild(headerRow);
	            headerRow = document.createElement("tr");
	            th = document.createElement("th");
	            th.innerHTML = "Total";
              th.classList.add("text-center");
               
	            headerRow.appendChild(th);

	            outlets.forEach(element => {
	                th = document.createElement("th");
	                th.innerHTML = outletWiseTotal[element];
                    th.classList.add("text-right");   //ol totals
	                headerRow.appendChild(th);
	            });
	            th = document.createElement("th");
	            th.innerHTML = grandTotal;
                 th.classList.add("text-right");  // grand total
         /*  console.log(grandTotal);*/
	           // headerRow.appendChild(th);
           headerRow.insertBefore(th , headerRow.children[1] );
	            thead.appendChild(headerRow);
	            table.appendChild(thead);

	            let tbody = document.createElement("tbody");

	            
	            billdates.forEach(element => {
	            	let row = document.createElement("tr");  
	                td = document.createElement("td");
	                td.innerHTML = element;
	                row.appendChild(td);
	                let total = 0;
	                outlets.forEach(outlet => {
	                    let el = 0;
	                    data.forEach(d => {
	                        if (d.billdate == element && d.outlet == outlet) {
	                            total += parseInt(d.amount);
	                            el = d.amount;
	                        }
	                    });
	                    td = document.createElement("td");
	                    td.innerHTML = el;
                        td.classList.add("text-right"); //oldata
	                    row.appendChild(td);
	                });
					/*console.log("row is : " , row.children )*/
	                td = document.createElement("td");
	                td.innerHTML = total;
                    td.classList.add("text-right"); //column total
	               // row.appendChild(td);
					row.insertBefore(td , row.children[1] );
	                tbody.appendChild(row);
	            });

	            table.appendChild(tbody);

	            tbl.innerHTML = "";
	            tbl.appendChild(table);
	            table.classList.add("table");
	            table.classList.add("table-striped");
	            table.classList.add("table-bordered");
	        }
            let formatedData = formatData(data);
            renderTable(formatedData);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
  <div id="tbl"></div>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

您可以使用此功能设置电话号码的格式：

let numberFormat = (str) => str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

ES5：

function numberFormat(str){
    return str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

工作示例：

let num = 54321678;
let num2 = 123456;
let numberFormat = (num) => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
console.log(numberFormat(num));
console.log(numberFormat(num2));

答案 1 :(得分：0)

您可以使用number.toLocaleString()将整数转换为逗号分隔的整数（作为字符串数据类型）。然后，您可以使用.map来更改数组的对象，以将amount的属性设置为其逗号分隔的值（作为字符串）。

请看下面的示例代码：

let data = [{"amount":291589,"billdate":"2018-08-01","outlet":"JAYANAGAR"},{"amount":58337,"billdate":"2018-08-01","outlet":"MALLESHWARAM"},{"amount":65970,"billdate":"2018-08-01","outlet":"KOLAR"},{"amount":296125,"billdate":"2018-08-02","outlet":"JAYANAGAR"},{"amount":56545,"billdate":"2018-08-02","outlet":"MALLESHWARAM"},{"amount":72213,"billdate":"2018-08-02","outlet":"KOLAR"},{"amount":346605,"billdate":"2018-08-03","outlet":"JAYANAGAR"},{"amount":62459,"billdate":"2018-08-03","outlet":"MALLESHWARAM"},{"amount":65248,"billdate":"2018-08-03","outlet":"KOLAR"},{"amount":518212,"billdate":"2018-08-04","outlet":"JAYANAGAR"},{"amount":104801,"billdate":"2018-08-04","outlet":"MALLESHWARAM"},{"amount":138151,"billdate":"2018-08-04","outlet":"KOLAR"},{"amount":628358,"billdate":"2018-08-05","outlet":"JAYANAGAR"},{"amount":115223,"billdate":"2018-08-05","outlet":"MALLESHWARAM"},{"amount":134107,"billdate":"2018-08-05","outlet":"KOLAR"},{"amount":177866,"billdate":"2018-08-06","outlet":"JAYANAGAR"},{"amount":66095,"billdate":"2018-08-06","outlet":"KOLAR"},{"amount":284069,"billdate":"2018-08-07","outlet":"JAYANAGAR"},{"amount":58789,"billdate":"2018-08-07","outlet":"MALLESHWARAM"},{"amount":67886,"billdate":"2018-08-07","outlet":"KOLAR"},{"amount":313128,"billdate":"2018-08-08","outlet":"JAYANAGAR"},{"amount":59939,"billdate":"2018-08-08","outlet":"MALLESHWARAM"},{"amount":68558,"billdate":"2018-08-08","outlet":"KOLAR"}];

const res = data.map(({amount, ...rem}) => ({amount: amount.toLocaleString(), ...rem}));
console.log(res);

相关问题
最新问题