前端金额添加逗号处理

//金额格式化获取
			formaterMoney(data, type) {
				//返回整数部分
				if (type == 0) {
					if (!data) return '0'
					// 将数据分割,保留两位小数
					data = data.toFixed(2)
					// 获取整数部分
					let intPart = Math.trunc(data)
					//给整数每隔3位加,逗号
					 intPart = (intPart || 0).toString();
					let result = '';
					while (intPart.length > 3) {
					    result = ',' + intPart.slice(-3) + result;
					    intPart = intPart.slice(0, intPart.length - 3);
					}
					if (intPart) { result = intPart + result; }
					return result
				}
				//返回小数部分
				if (type == 1) {
					if (!data) return '.00'
					// 预定义小数部分
					let decimal = '.00'
					// 将数据分割,保留两位小数
					data = data.toFixed(2)
					const newArr = data.toString().split('.')
					if (newArr.length === 2) { // 有小数部分
						decimal = '.' + newArr[1].toString() // 取得小数部分
					}
					return decimal
				}
			}

调用传入值 整数部分:formaterMoney(1788889.56888,0)   小数部分formaterMoney(1788889.56888,1)

最后效果

 

### 前端实现金额千分位格式化的方法 在前端开发中,为了提高用户体验并使数字更具可读性,通常会对金额进行千分位格式化。以下是几种常见的方式及其代码示例。 #### 使用正则表达式手动实现 可以通过正则表达式对字符串形式的数字进行匹配和替换,从而实现千分位格式化: ```javascript function formatThousandSeparator(value) { if (typeof value !== 'number') { throw new Error('Input must be a number'); } let strValue = value.toFixed(2).toString(); // 确保保留两位小数 let parts = strValue.split('.'); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 添加千分位符号 return parts.join('.'); // 返回带有千分位符号的结果 } ``` 此方法利用 `toFixed` 来固定小数点后的位数,并通过正则表达式 `\B(?=(\d{3})+(?!\d))` 对整数部分每三位插入逗号[^1]^。 --- #### 利用 JavaScript 的内置方法 `toLocaleString` 现代浏览器支持使用 `Number.prototype.toLocaleString()` 方法快速实现千分位格式化: ```javascript function formatWithLocale(value) { if (typeof value !== 'number') { throw new Error('Input must be a number'); } return value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } ``` 该方法会自动根据当前环境的语言设置调整千分位分隔符,默认情况下适用于大多数场景[^2]^。 --- #### 自定义函数处理复杂需求 如果需要兼容更多特殊情况(如输入为空、负数等),可以扩展自定义逻辑: ```javascript export function customNumFormat(num) { if (!num && num !== 0) { return ''; // 处理 null 或 undefined 输入 } if (typeof num === 'string') { num = parseFloat(num); } if (isNaN(num)) { return ''; } const integerPart = Math.trunc(Math.abs(num)).toString(); const decimalPart = ('' + (Math.abs(num) % 1)).slice(2, 4); const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return `${num < 0 ? '-' : ''}${formattedInteger}.${decimalPart}`; } ``` 这段代码能够有效应对多种边界情况,同时确保输出始终具有固定的两位小数[^3]^。 --- #### 移除千分位格式的功能补充 有时还需要将已格式化的金额转换回原始数值表示形式,这可通过简单替换操作完成: ```javascript function removeThousandSeparator(str) { if (typeof str !== 'string') { throw new Error('Input must be a string'); } return parseFloat(str.replace(/,/g, '')); } ``` 这种方法移除了所有的逗号后再尝试解析成浮点型数值[^4]^。 --- ### 性能对比与适用范围分析 - **正则表达式方式**适合轻量级项目或者特定业务逻辑下使用; - **`toLocaleString` 方式**推荐给追求简洁性和国际化支持的应用程序开发者; - 而对于高度定制化的要求,则建议采用综合考虑全面性的自定义解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值