数字实现千位分割

古城微笑少年丶 2022-04-16 03:20 325阅读 0赞

源网站：[https://wenda.so.com/q/1461341937726162][https_wenda.so.com_q_1461341937726162]

js将数字千位分割的6个方法

下面放上可以直接测试网页

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    		<title></title>
    		<style type="text/css">
    			table {
    				width: 100%;
    				text-align: center;
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<table border="0" cellspacing="10" cellpadding="10">
    			<tr>
    				<th colspan="7">数字 执行5000次消耗的时间（ms）</th>
    			</tr>
    			<tr>
    				<td>次数</td>
    				<td>toThousands1</td>
    				<td>toThousands2</td>
    				<td>toThousands3</td>
    				<td>toThousands4</td>
    				<td>toThousands5</td>
    				<td>toThousands6</td>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>4</td>
    				<td>1</td>
    				<td>3</td>
    				<td>1</td>
    				<td>14</td>
    				<td>2</td>
    			</tr>
    			<tr>
    				<td>10</td>
    				<td>14</td>
    				<td>1</td>
    				<td>3</td>
    				<td>0</td>
    				<td>7</td>
    				<td>2</td>
    			</tr>
    			<tr>
    				<td>100</td>
    				<td>12</td>
    				<td>1</td>
    				<td>2</td>
    				<td>4</td>
    				<td>5</td>
    				<td>3</td>
    			</tr>
    			<tr>
    				<td>1000</td>
    				<td>13</td>
    				<td>2</td>
    				<td>3</td>
    				<td>2</td>
    				<td>9</td>
    				<td>5</td>
    			</tr>
    			<tr>
    				<td>10000</td>
    				<td>21</td>
    				<td>4</td>
    				<td>3</td>
    				<td>1</td>
    				<td>6</td>
    				<td>3</td>
    			</tr>
    			<tr>
    				<td>100000</td>
    				<td>21</td>
    				<td>3</td>
    				<td>2</td>
    				<td>1</td>
    				<td>5</td>
    				<td>6</td>
    			</tr>
    
    			<tr>
    				<td><input type="" name="inp" id="inp" value="" placeholder="输入数字" /></td>
    				<td id="t1"></td>
    				<td id="t2"></td>
    				<td id="t3"></td>
    				<td id="t4"></td>
    				<td id="t5"></td>
    				<td id="t6"></td>
    			</tr>
    		</table>
    		<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$("inp").addEventListener("input", function(event) {
    				var inpvalue = this.value;
    				var t1 = toThousands1(inpvalue);
    
    				$("t1").innerHTML = t1;
    				//console.log("t1",t1)
    				var t2 = toThousands2(inpvalue);
    
    				$("t2").innerHTML = t2;
    				//console.log("t2",t2)
    				var t3 = toThousands3(inpvalue);
    				$("t3").innerHTML = t3;
    				//console.log("t3",t3)
    				var t4 = toThousands4(inpvalue);
    				$("t4").innerHTML = t4;
    				//console.log("t4",t4)
    				var t5 = toThousands5(inpvalue);
    				$("t5").innerHTML = t5;
    				//console.log("t5",t5)
    				var t6 = toThousands6(inpvalue);
    				$("t6").innerHTML = t6;
    				//console.log("t6",t6)
    			})
    
    			function $(id) {
    				return document.getElementById(id);
    			}
    
    			function toThousands1(num) {
    				var result = [],
    					counter = 0;
    				num = (num || 0).toString().split('');
    				for(var i = num.length - 1; i >= 0; i--) {
    					counter++;
    					result.unshift(num[i]);
    					if(!(counter % 3) && i != 0) {
    						result.unshift(',');
    					}
    				}
    				return result.join('');
    			}
    
    			function toThousands2(num) {
    				var result = '',
    					counter = 0;
    				num = (num || 0).toString();
    				for(var i = num.length - 1; i >= 0; i--) {
    					counter++;
    					result = num.charAt(i) + result;
    					if(!(counter % 3) && i != 0) {
    						result = ',' + result;
    					}
    				}
    				return result;
    			}
    
    			function toThousands3(num) {
    				var num = (num || 0).toString(),
    					re = /\d{3}$/,
    					result = '';
    				while(re.test(num)) {
    					result = RegExp.lastMatch + result;
    					if(num !== RegExp.lastMatch) {
    						result = ',' + result;
    						num = RegExp.leftContext;
    					} else {
    						num = '';
    						break;
    					}
    				}
    				if(num) {
    					result = num + result;
    				}
    				return result;
    			}
    
    			function toThousands4(num) {
    				var num = (num || 0).toString(),
    					result = '';
    				while(num.length > 3) {
    					result = ',' + num.slice(-3) + result;
    					num = num.slice(0, num.length - 3);
    				}
    				if(num) {
    					result = num + result;
    				}
    				return result;
    			}
    
    			function toThousands5(num) {
    				var num = (num || 0).toString(),
    					temp = num.length % 3;
    				switch(temp) {
    					case 1:
    						num = '00' + num;
    						break;
    					case 2:
    						num = '0' + num;
    						break;
    				}
    				return num.match(/\d{3}/g).join(',').replace(/^0+/, '');
    			}
    
    			function toThousands6(num) {
    				return(num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
    			}
    		</script>
    	</body>
    
    </html>

[https_wenda.so.com_q_1461341937726162]: https://wenda.so.com/q/1461341937726162