JS_javascript 기술로 구현된 4개의 디지털 천 자리 서식 지정 방법 공유

소위 천 단위 숫자, 즉 한 자리부터 시작하여 세 자리마다 쉼표를 추가하는 방식입니다. 예를 들어 "10,000"입니다. 이 요구 사항에 대응하여 처음에는 다음과 같은 함수를 작성했습니다.

코드 복사 코드는 다음과 같습니다.

//방법 1
함수 toThousands(num) {
var 결과 = [ ], 카운터 = 0;
num = (num || 0).toString().split('');
for (var i = num.length - 1; i >= 0; i--) {
카운터 ;
         result.unshift(num[i]);
If (!(카운터 % 3) && i != 0) { result.unshift(',') }
}
결과 반환.join('');
}

방법 1의 실행 과정은 숫자를 문자열로 변환하고 배열로 나눈 다음 배열의 요소를 끝부터 하나씩 새 배열(결과)의 시작 부분에 삽입하는 것입니다. 요소가 삽입될 때마다 counter는 한 번씩 계산됩니다(더하기 1). counter가 3의 배수이면 쉼표가 삽입되지만 처음에는 쉼표가 필요하지 않습니다(i가 0인 경우). 마지막으로 새 배열의 Join 메소드를 호출하여 결과를 얻습니다.

방법 1은 비교적 명확하고 이해하기 쉬우며 한동안 프로젝트에서 사용되었습니다. 하지만 내 직감으로는 성능이 좋지 않다는 것을 알 수 있습니다.

방법 2 - 방법 1의 문자열 버전

코드 복사 코드는 다음과 같습니다.

//방법 2
함수 toThousands(num) {
var 결과 = '', 카운터 = 0;
num = (num || 0).toString();
for (var i = num.length - 1; i >= 0; i--) {
카운터 ;
결과 = num.charAt(i) 결과;
If (!(카운터 % 3) && i != 0) { 결과 = ',' 결과 }
}
결과 반환;
}

방법 2는 방법 1의 향상된 버전입니다. 문자열을 배열로 나누지 않고 항상 문자열에 대해 작동합니다.

방법 3 - 마지막 세 숫자를 일치시키는 루프

코드 복사 코드는 다음과 같습니다.

//방법 3
함수 toThousands(num) {
var num = (num || 0).toString(), re = /d{3}$/, result = '';
동안 ( re.test(num) ) {
          결과 = RegExp.lastMatch 결과;
If (num !== RegExp.lastMatch) {
              결과 = ',' 결과;
               num = RegExp.leftContext;
         } else {
             숫자 = '';
             휴식;
}
}
If (num) { 결과 = num 결과 }
결과 반환;
}

방법 3은 정규식을 반복하여 마지막 숫자 3개를 일치시킬 때마다 쉼표와 일치하는 내용을 결과 문자열의 시작 부분에 삽입한 다음 일치하는 항목을 찾습니다. target (num) 아직 일치하지 않은 콘텐츠(RegExp.leftContext)에 값을 할당합니다. 또한 참고하세요:

1. 자릿수가 3의 배수인 경우 마지막으로 일치하는 내용은 3자리여야 하지만, 처음 3자리 앞에 쉼표를 추가할 필요는 없습니다. 2. 숫자의 자릿수가 3의 배수가 아닌 경우 끝의 num 변수에 확실히 1 또는 2개의 숫자가 남게 됩니다. 나머지 숫자는 루프의 시작 부분에 삽입되어야 합니다. 결과 문자열.

방법 3은 루프 수를 줄이지만(한 루프에서 세 문자를 처리함) 정규식 사용으로 인해 어느 정도 소비가 늘어납니다.

방법 4 - 방법 3의 문자열 버전

코드 복사 코드는 다음과 같습니다.

//방법 4
함수 toThousands(num) {
var num = (num || 0).toString(), result = '';
while (숫자.길이 > 3) {
          결과 = ',' num.slice(-3) 결과;
​​​​ num = num.slice(0, num.length - 3);
}
If (num) { 결과 = num 결과 }
결과 반환;
}

실제로 마지막 세 문자를 가로채는 기능은 string형의 Slice, substr, substring 방식을 통해 구현할 수 있습니다. 이렇게 하면 정규식 사용을 피할 수 있습니다.

방법 5 - 그룹화 및 병합 방법

코드 복사 코드는 다음과 같습니다.

//방법 5
함수 toThousands(num) {
var num = (num || 0).toString(), temp = num.length % 3;
스위치(임시) {
사례 1:
              숫자 = '00' 숫자;
             휴식;
사례 2:
              숫자 = '0' 숫자;
             휴식;
}
num.match(/d{3}/g).join(',').replace(/^0 /, '');
를 반환합니다. }

먼저 자릿수를 3의 배수로 보완하고 정규식을 사용하여 세 자리 그룹으로 나눈 다음 조인 방법을 통해 쉼표를 추가하고 마지막으로 보완된 0을 제거합니다.

방법 6 - 게으른 남자의 방법

코드 복사 코드는 다음과 같습니다.

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

이 형식화는 정규 표현식을 대체하면 가능하다고 항상 느꼈지만, 이를 위해서는 단언문 및 기타 작성 방법을 사용해야 합니다. 안타깝게도 이 부분은 익숙하지 않습니다. Google에서 검색한 결과 실제로 이러한 정규식을 찾았습니다. 이는 아마도 코드의 가장 짧은 구현일 것입니다.

테스트 결과

数字	执行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

방법 1과 방법 2를 강력하게 비교하면 문자열 작업의 효율성이 배열 작업의 효율성보다 훨씬 높다는 것을 알 수 있습니다. 방법 6의 테스트 결과는 코드 길이가 성능과 관련이 없음을 보여줍니다. 방법 4가 전체적으로 성능이 가장 좋습니다(그런데 num이 100일 때 성능이 저하되는 이유는 정말 이해가 되지 않습니다).

1. 방법 1과 2를 비교하면 각 작업은 루프 수를 줄이기 위해 1자가 아닌 3자를 사용합니다. 2. 방법 3, 5, 6에 비해 정규식을 사용하지 않아 소모량이 줄어든다.

마지막으로 최종 최적화 솔루션으로 방법 4를 선택했습니다. 독자들에게 더 나은 구현 방법이나 개선을 위한 제안 사항이 있으면 댓글을 남길 수 있습니다.