Sharing of 4 digital thousand place formatting methods implemented in JS_javascript skills

The so-called thousands form of numbers, that is, starting from the single digit, add a comma between every three digits. For example "10,000". In response to this requirement, I initially wrote a function like this:

Copy code The code is as follows:

//Method 1
function toThousands(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('');
}

The execution process of method one is to convert the numbers into strings, break them into arrays, and then insert the elements in the array into the beginning of the new array (result) one by one starting from the end. Every time an element is inserted, counter counts once (plus 1). When counter is a multiple of 3, a comma is inserted, but note that no comma is required at the beginning (when i is 0). Finally, the result is obtained by calling the join method of the new array.

Method 1 is relatively clear and easy to understand, and has been used in the project for some time. But my intuition tells me that its performance is not good.

Method 2 - string version of method 1

Copy code The code is as follows:

//Method 2
function toThousands(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;
}

Method 2 is an improved version of method 1. It does not break the string into arrays and always operates on the string.

Method 3 - Loop to match the last three numbers

Copy code The code is as follows:

//Method 3
function toThousands(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;
}

Method 3 is a completely different algorithm. It loops through regular expressions to match the three numbers at the end. Each time it matches, the comma and the matched content are inserted into the beginning of the result string, and then the matching target (num) Assign the value to the content that has not yet been matched (RegExp.leftContext). Also, note:

1. If the number of digits is a multiple of 3, the last matched content must be three digits, but there is no need to add commas before the first three digits;
2. If the number of digits in the number is not a multiple of 3, then there will definitely be 1 or 2 numbers left in the num variable at the end. After the loop, the remaining numbers should be inserted into the beginning of the result string.

Although method three reduces the number of loops (processing three characters in one loop), it increases consumption to a certain extent due to the use of regular expressions.

Method 4 - String version of method 3

Copy code The code is as follows:

//Method 4
function toThousands(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;
}

In fact, the function of intercepting the last three characters can be achieved through the slice, substr or substring method of the string type. This way you avoid using regular expressions.

Method Five - Grouping and Merging Method

Copy code The code is as follows:

//Method 5
function toThousands(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 /, '');
}

First complement the number of digits to a multiple of 3, use regular expressions to cut it into groups of three digits, then add commas through the join method, and finally remove the complemented 0s.

Method Six - The Lazy Man's Method

Copy code The code is as follows:

//Method 6
function toThousands(num) {
Return (num || 0).toString().replace(/(d)(?=(?:d{3}) $)/g, '$1,');
}

I have always felt that this formatting can be done by replacing a regular expression, but it requires the use of assertions and other writing methods. Unfortunately, I am not familiar with this part. After some searching on Google, I actually found such a regular expression. This is probably the shortest implementation of the code.

Test results

数字	执行5000次消耗的时间（ms）
	方法一	方法二	方法三	方法四	方法五	方法六
1	4	1	3	1	14	2
10	14	1	3	0	7	2
100	12	1	2	4	5	3
1000	13	2	3	2	9	5
10000	21	4	3	1	6	3
100000	21	3	2	1	5	6

The strong comparison between Method 1 and Method 2 shows that the efficiency of string operations is much higher than that of array operations; the test results of Method 6 tell us that the length of the code has nothing to do with the performance. Method 4 has the best overall performance (but why the performance is reduced when num is 100, I really don’t understand). The main reason is:

1. Comparing methods one and two, each operation uses 3 characters instead of 1 character to reduce the number of loops;
2. Compared with methods three, five and six, regular expressions are not used, which reduces consumption.

Finally, I chose method four as the final optimization solution. If readers have better implementation methods or suggestions for improvement, you can leave comments.