JavaScript前端开发中往往会用到对价格和金额的格式化的处理，因为后端传过来的的值都是数值没有进行格式化 。这时我们必须在前端进行处理货币格式化、价格格式化、或者金额数字等。
下面我将介绍利用纯js自定义货币格式化的函数-功能最全的自定义formatCurrency函数：
函数定义：
| 1 | formatCurrency(price, format, showPlus) |
参数介绍：
此formatCurrency函数有三个函数。
price：必选值，其值为数字型，或者字符串数字
format：必选值，格式化的参数，其类型是JSON (pattern, decimal, decimalsDelimeter, groupsDelimeter)
showPlus：可选值，对价格的+和-符号的限制。
函数代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | //使用patern格式化货币 function formatCurrency(price, format, showPlus) { var precision = isNaN(format.precision = Math.abs(format.precision)) ? 2 : format.precision; var requiredPrecision = isNaN(format.requiredPrecision = Math.abs(format.requiredPrecision)) ? 2 : format.requiredPrecision; precision = requiredPrecision; var integerRequired = isNaN(format.integerRequired = Math.abs(format.integerRequired)) ? 1 : format.integerRequired; var decimalSymbol = format.decimalSymbol == undefined ? ',' : format.decimalSymbol; var groupSymbol = format.groupSymbol == undefined ? '.' : format.groupSymbol; var groupLength = format.groupLength == undefined ? 3 : format.groupLength; var s = ''; if (showPlus == undefined || showPlus == true) { s = price < 0 ? '-' : showPlus ? '+' : ''; } else if (showPlus == false) { s = ''; } var i = parseInt(price = Math.abs(+price || 0).toFixed(precision)) + ''; var pad = i.length < integerRequired ? integerRequired - i.length : 0; while (pad) { i = '0' + i; pad--; } j = (j = i.length) > groupLength ? j % groupLength : 0; re = new RegExp('(\\d{' + groupLength + '})(?=\\d)', 'g'); /** * replace(/-/, 0) is only for fixing Safari bug which appears * when Math.abs(0).toFixed() executed on "0" number. * Result is "0.-0" :( */ var r = (j ? i.substr(0, j) + groupSymbol : '') + i.substr(j).replace(re, '$1' + groupSymbol) + (precision ? decimalSymbol + Math.abs(price - i).toFixed(precision).replace(/-/, 0).slice(2) : ''); var pattern = ''; if (format.pattern.indexOf('{sign}') == -1) { pattern = s + format.pattern; } else { pattern = format.pattern.replace('{sign}', s); } return pattern.replace('%s', r).replace(/^\s\s*/, '').replace(/\s\s*$/, ''); } |
调用函数与输出：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 调用：formatCurrency(22,{"pattern":"$%s","precision":2,"requiredPrecision":2,"decimalSymbol":".","groupSymbol":",","groupLength":3,"integerRequired":false}) 输出："$22.00" 调用：formatCurrency(22,{"pattern":"￥%s","precision":2,"requiredPrecision":2,"decimalSymbol":".","groupSymbol":",","groupLength":3,"integerRequired":false}) 输出："￥22.00" 调用：formatCurrency(9876543,{"pattern":"￥%s","precision":2,"requiredPrecision":2,"decimalSymbol":".","groupSymbol":",","groupLength":3,"integerRequired":false}) 输出："￥9,876,543.00" 调用：formatCurrency(9876543,{"pattern":"￥%s","precision":2,"requiredPrecision":4,"decimalSymbol":".","groupSymbol":",","groupLength":3,"integerRequired":false}) 输出："￥9,876,543.0000" 调用：formatCurrency(+22,{"pattern":"$%s","precision":2,"requiredPrecision":2,"decimalSymbol":".","groupSymbol":",","groupLength":3,"integerRequired":false}) 输出："$22.00" 调用：formatCurrency(+22,{"pattern":"$%s","precision":2,"requiredPrecision":2,"decimalSymbol":".","groupSymbol":",","groupLength":3,"integerRequired":false},true) 输出："+$22.00" 调用：formatCurrency(-22,{"pattern":"$%s","precision":2,"requiredPrecision":2,"decimalSymbol":".","groupSymbol":",","groupLength":3,"integerRequired":false},true) 输出："-$22.00" 调用：formatCurrency('-22',{"pattern":"$%s","precision":2,"requiredPrecision":2,"decimalSymbol":".","groupSymbol":",","groupLength":3,"integerRequired":false},true) 输出："-$22.00" //下面的是为了测试给大家观看,需要的参数需要自己调整 调用：formatCurrency(9876543,{"pattern":"￥%s","precision":2,"requiredPrecision":4,"decimalSymbol":"*","groupSymbol":",","groupLength":3,"integerRequired":false}) 输出："￥9,876,543*0000" 调用：formatCurrency(9876543,{"pattern":"￥%s","precision":2,"requiredPrecision":4,"decimalSymbol":"*","groupSymbol":"|","groupLength":3,"integerRequired":false}) 输出："￥9|876|543*0000" 调用：formatCurrency(9876543,{"pattern":"￥%s","precision":2,"requiredPrecision":4,"decimalSymbol":"*","groupSymbol":"|","groupLength":4,"integerRequired":false}) 输出："￥987|6543*0000" |
如果需要其他的格式可以根据需要自己定义，这里我就不再给大家演示了。怎么样是不是功能很强大。