질문자 :Elias Zamaria
천 단위 구분 기호로 쉼표를 사용 하여 JavaScript 에서 정수를 인쇄하려고합니다. 예를 들어 숫자 1234567을 "1,234,567"로 표시하고 싶습니다. 어떻게 하면 좋을까요?
내가 하는 방법은 다음과 같습니다.
function numberWithCommas(x) { x = x.toString(); var pattern = /(-?\d+)(\d{3})/; while (pattern.test(x)) x = x.replace(pattern, "$1,$2"); return x; }더 간단하거나 더 우아한 방법이 있습니까? 수레에서도 작동하면 좋겠지만 꼭 필요한 것은 아닙니다. 마침표와 쉼표 사이를 결정하기 위해 로케일에 따라 다를 필요는 없습니다.
나는 Kerry의 대답에서 아이디어를 사용했지만 내 특정 목적을 위해 단순한 것을 찾고 있었기 때문에 단순화했습니다. 내가 한 일은 다음과 같습니다.
function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } function numberWithCommas(x) { return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); } function test(x, expect) { const result = numberWithCommas(x); const pass = result === expect; console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`); return pass; } let failures = 0; failures += !test(0, "0"); failures += !test(100, "100"); failures += !test(1000, "1,000"); failures += !test(10000, "10,000"); failures += !test(100000, "100,000"); failures += !test(1000000, "1,000,000"); failures += !test(10000000, "10,000,000"); if (failures) { console.log(`${failures} test(s) failed`); } else { console.log("All tests passed"); } .as-console-wrapper { max-height: 100% !important; }정규식은 2개의 lookahead 어설션을 사용합니다.
예를 들어, 123456789.01 을 전달하면 긍정적인 주장은 7 왼쪽의 모든 지점과 일치합니다( 789 는 3자리 678 은 3자리의 배수, 567 등). 부정 어설션은 3자리의 배수 뒤에 숫자가 없는지 확인합니다. 789 뒤에 마침표가 있으므로 정확히 3자리의 배수이므로 쉼표를 사용합니다. 678 은 3자리의 배수이지만 그 9 가 있으므로 이 3자리는 4개의 그룹에 속하며 쉼표가 없습니다. 마찬가지로 567 . 456789 는 3의 배수인 6자리이므로 그 앞에 쉼표가 옵니다. 345678 은 3의 배수이지만 9 가 있으므로 쉼표가 없습니다. 등등. \B 는 정규식이 문자열의 시작 부분에 쉼표를 넣지 않도록 합니다.
@ neu-rah 는 이 함수가 소수점 이하 자릿수가 3자리 이상인 경우 원하지 않는 위치에 쉼표를 추가한다고 언급했습니다. 이것이 문제인 경우 다음 기능을 사용할 수 있습니다.
function numberWithCommas(x) { var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return parts.join("."); } function numberWithCommas(x) { var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return parts.join("."); } function test(x, expect) { const result = numberWithCommas(x); const pass = result === expect; console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`); return pass; } let failures = 0; failures += !test(0 , "0"); failures += !test(0.123456 , "0.123456"); failures += !test(100 , "100"); failures += !test(100.123456 , "100.123456"); failures += !test(1000 , "1,000"); failures += !test(1000.123456 , "1,000.123456"); failures += !test(10000 , "10,000"); failures += !test(10000.123456 , "10,000.123456"); failures += !test(100000 , "100,000"); failures += !test(100000.123456 , "100,000.123456"); failures += !test(1000000 , "1,000,000"); failures += !test(1000000.123456 , "1,000,000.123456"); failures += !test(10000000 , "10,000,000"); failures += !test(10000000.123456, "10,000,000.123456"); if (failures) { console.log(`${failures} test(s) failed`); } else { console.log("All tests passed"); } .as-console-wrapper { max-height: 100% !important; }@ tjcrowder 는 JavaScript에 lookbehind( support info )가 있으므로 정규식 자체에서 해결할 수 있다고 지적했습니다.
function numberWithCommas(x) { return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); } function numberWithCommas(x) { return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); } function test(x, expect) { const result = numberWithCommas(x); const pass = result === expect; console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`); return pass; } let failures = 0; failures += !test(0, "0"); failures += !test(0.123456, "0.123456"); failures += !test(100, "100"); failures += !test(100.123456, "100.123456"); failures += !test(1000, "1,000"); failures += !test(1000.123456, "1,000.123456"); failures += !test(10000, "10,000"); failures += !test(10000.123456, "10,000.123456"); failures += !test(100000, "100,000"); failures += !test(100000.123456, "100,000.123456"); failures += !test(1000000, "1,000,000"); failures += !test(1000000.123456, "1,000,000.123456"); failures += !test(10000000, "10,000,000"); failures += !test(10000000.123456, "10,000,000.123456"); if (failures) { console.log(`${failures} test(s) failed`); } else { console.log("All tests passed"); } .as-console-wrapper { max-height: 100% !important; } (?<!\.\d*) 는 일치 항목 앞에 a가 올 수 없음을 나타내는 부정적인 lookbehind입니다 . 뒤에 0개 이상의 숫자가 옵니다. 부정적인 lookbehind는 적어도 V8에서 split 및 join 솔루션( 비교)보다 빠릅니다.
아무도 Number.prototype.toLocaleString 을 언급하지 않았다는 사실에 놀랐습니다. JavaScript 1.5(1999년에 도입됨)에서 구현되므로 기본적으로 모든 주요 브라우저에서 지원됩니다.
var n = 34523453.345 n.toLocaleString() "34,523,453.345"Intl 을 포함하여 v0.12부터 Node.js에서도 작동합니다.
다른 것을 원한다면 Numeral.js 가 흥미로울 수 있습니다.
다음은 Numbers 를 구조화된 String 으로 변환할 수 있는 두 가지 브라우저 API입니다. 모든 사용자의 컴퓨터 에 숫자에 쉼표를 사용 하는 로캘 이 있는 것은 아닙니다. 출력에 쉼표를 적용하려면 en-US 와 같은 "서부" 로케일을 사용할 수 있습니다.
var number = 1234567890; // Example number to be converted ⚠️ 자바스크립트의 최대 정수 값은 9007199254740991
// default behaviour on a machine with a local that uses commas for numbers number.toLocaleString(); // "1,234,567,890" // With custom settings, forcing a "US" locale to guarantee commas in output var number2 = 1234.56789; // floating point example number2.toLocaleString('en-US', {maximumFractionDigits:2}) // "1,234.57" var nf = new Intl.NumberFormat(); nf.format(number); // "1,234,567,890"내가 확인한 것(최소한 Firefox)에서 둘 다 성능과 관련하여 거의 동일합니다.
⚡ 라이브 데모 : https://codepen.io/vsync/pen/MWjdbgL?editors=1000
phpjs.org 의 number_format() 을 사용하는 것이 좋습니다.
function number_format(number, decimals, dec_point, thousands_sep) { // http://kevin.vanzonneveld.net // + original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com) // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + bugfix by: Michael White (http://getsprink.com) // + bugfix by: Benjamin Lupton // + bugfix by: Allan Jensen (http://www.winternet.no) // + revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com) // + bugfix by: Howard Yeend // + revised by: Luke Smith (http://lucassmith.name) // + bugfix by: Diogo Resende // + bugfix by: Rival // + input by: Kheang Hok Chin (http://www.distantia.ca/) // + improved by: davook // + improved by: Brett Zamir (http://brett-zamir.me) // + input by: Jay Klehr // + improved by: Brett Zamir (http://brett-zamir.me) // + input by: Amir Habibi (http://www.residence-mixte.com/) // + bugfix by: Brett Zamir (http://brett-zamir.me) // + improved by: Theriault // + improved by: Drew Noakes // * example 1: number_format(1234.56); // * returns 1: '1,235' // * example 2: number_format(1234.56, 2, ',', ' '); // * returns 2: '1 234,56' // * example 3: number_format(1234.5678, 2, '.', ''); // * returns 3: '1234.57' // * example 4: number_format(67, 2, ',', '.'); // * returns 4: '67,00' // * example 5: number_format(1000); // * returns 5: '1,000' // * example 6: number_format(67.311, 2); // * returns 6: '67.31' // * example 7: number_format(1000.55, 1); // * returns 7: '1,000.6' // * example 8: number_format(67000, 5, ',', '.'); // * returns 8: '67.000,00000' // * example 9: number_format(0.9, 0); // * returns 9: '1' // * example 10: number_format('1.20', 2); // * returns 10: '1.20' // * example 11: number_format('1.20', 4); // * returns 11: '1.2000' // * example 12: number_format('1.2000', 3); // * returns 12: '1.200' var n = !isFinite(+number) ? 0 : +number, prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, dec = (typeof dec_point === 'undefined') ? '.' : dec_point, toFixedFix = function (n, prec) { // Fix for IE parseFloat(0.55).toFixed(0) = 0; var k = Math.pow(10, prec); return Math.round(n * k) / k; }, s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.'); if (s[0].length > 3) { s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); } if ((s[1] || '').length < prec) { s[1] = s[1] || ''; s[1] += new Array(prec - s[1].length + 1).join('0'); } return s.join(dec); }업데이트 02/13/14
사람들이 이것이 예상대로 작동하지 않는다는 보고를 했기 때문에 자동화된 테스트가 포함된 JS Fiddle을 수행했습니다.
2017년 11월 26일 업데이트
다음은 약간 수정된 출력이 있는 스택 조각으로 바이올린입니다.
function number_format(number, decimals, dec_point, thousands_sep) { // http://kevin.vanzonneveld.net // + original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com) // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + bugfix by: Michael White (http://getsprink.com) // + bugfix by: Benjamin Lupton // + bugfix by: Allan Jensen (http://www.winternet.no) // + revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com) // + bugfix by: Howard Yeend // + revised by: Luke Smith (http://lucassmith.name) // + bugfix by: Diogo Resende // + bugfix by: Rival // + input by: Kheang Hok Chin (http://www.distantia.ca/) // + improved by: davook // + improved by: Brett Zamir (http://brett-zamir.me) // + input by: Jay Klehr // + improved by: Brett Zamir (http://brett-zamir.me) // + input by: Amir Habibi (http://www.residence-mixte.com/) // + bugfix by: Brett Zamir (http://brett-zamir.me) // + improved by: Theriault // + improved by: Drew Noakes // * example 1: number_format(1234.56); // * returns 1: '1,235' // * example 2: number_format(1234.56, 2, ',', ' '); // * returns 2: '1 234,56' // * example 3: number_format(1234.5678, 2, '.', ''); // * returns 3: '1234.57' // * example 4: number_format(67, 2, ',', '.'); // * returns 4: '67,00' // * example 5: number_format(1000); // * returns 5: '1,000' // * example 6: number_format(67.311, 2); // * returns 6: '67.31' // * example 7: number_format(1000.55, 1); // * returns 7: '1,000.6' // * example 8: number_format(67000, 5, ',', '.'); // * returns 8: '67.000,00000' // * example 9: number_format(0.9, 0); // * returns 9: '1' // * example 10: number_format('1.20', 2); // * returns 10: '1.20' // * example 11: number_format('1.20', 4); // * returns 11: '1.2000' // * example 12: number_format('1.2000', 3); // * returns 12: '1.200' var n = !isFinite(+number) ? 0 : +number, prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, dec = (typeof dec_point === 'undefined') ? '.' : dec_point, toFixedFix = function (n, prec) { // Fix for IE parseFloat(0.55).toFixed(0) = 0; var k = Math.pow(10, prec); return Math.round(n * k) / k; }, s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.'); if (s[0].length > 3) { s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); } if ((s[1] || '').length < prec) { s[1] = s[1] || ''; s[1] += new Array(prec - s[1].length + 1).join('0'); } return s.join(dec); } var exampleNumber = 1; function test(expected, number, decimals, dec_point, thousands_sep) { var actual = number_format(number, decimals, dec_point, thousands_sep); console.log( 'Test case ' + exampleNumber + ': ' + '(decimals: ' + (typeof decimals === 'undefined' ? '(default)' : decimals) + ', dec_point: "' + (typeof dec_point === 'undefined' ? '(default)' : dec_point) + '"' + ', thousands_sep: "' + (typeof thousands_sep === 'undefined' ? '(default)' : thousands_sep) + '")' ); console.log(' => ' + (actual === expected ? 'Passed' : 'FAILED') + ', got "' + actual + '", expected "' + expected + '".'); exampleNumber++; } test('1,235', 1234.56); test('1 234,56', 1234.56, 2, ',', ' '); test('1234.57', 1234.5678, 2, '.', ''); test('67,00', 67, 2, ',', '.'); test('1,000', 1000); test('67.31', 67.311, 2); test('1,000.6', 1000.55, 1); test('67.000,00000', 67000, 5, ',', '.'); test('1', 0.9, 0); test('1.20', '1.20', 2); test('1.2000', '1.20', 4); test('1.200', '1.2000', 3); .as-console-wrapper { max-height: 100% !important; }이것은 @mikez302의 답변의 변형이지만 소수가 있는 숫자를 지원하도록 수정되었습니다(@neu-rah의 피드백에 따라 numberWithCommas(12345.6789) -> "12,345.6789" 대신 "12,345.6,789"
function numberWithCommas(n) { var parts=n.toString().split("."); return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : ""); }function formatNumber (num) { return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") } print(formatNumber(2665)); // 2,665 print(formatNumber(102665)); // 102,665 print(formatNumber(111102665)); // 111,102,665정규식 사용
function toCommas(value) { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } console.log(toCommas(123456789)); // 123,456,789 console.log(toCommas(1234567890)); // 1,234,567,890 console.log(toCommas(1234)); // 1,234toLocaleString() 사용
var number = 123456.789; // request a currency format console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); // → 123.456,79 € // the Japanese yen doesn't use a minor unit console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) // → ￥123,457 // limit to three significant digits console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 })); // → 1,23,000참조 MDN:Number.prototype.toLocaleString()
Intl.NumberFormat() 사용
var number = 123456.789; console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)); // expected output: "123.456,79 €" // the Japanese yen doesn't use a minor unit console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number)); // expected output: "￥123,457" // limit to three significant digits console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number)); // expected output: "1,23,000"참조 국제 번호 형식
여기에서 데모
<script type="text/javascript"> // Using Regular expression function toCommas(value) { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } function commas() { var num1 = document.myform.number1.value; // Using Regular expression document.getElementById('result1').value = toCommas(parseInt(num1)); // Using toLocaleString() document.getElementById('result2').value = parseInt(num1).toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); // Using Intl.NumberFormat() document.getElementById('result3').value = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(num1); } </script> <FORM NAME="myform"> <INPUT TYPE="text" NAME="number1" VALUE="123456789"> <br> <INPUT TYPE="button" NAME="button" Value="=>" onClick="commas()"> <br>Using Regular expression <br> <INPUT TYPE="text" ID="result1" NAME="result1" VALUE=""> <br>Using toLocaleString() <br> <INPUT TYPE="text" ID="result2" NAME="result2" VALUE=""> <br>Using Intl.NumberFormat() <br> <INPUT TYPE="text" ID="result3" NAME="result3" VALUE=""> </FORM>성능
네이티브 JS 함수. IE11, Edge, 최신 Safari, Chrome, Firefox, Opera, iOS의 Safari 및 Android의 Chrome에서 지원됩니다.
var number = 3500; console.log(new Intl.NumberFormat().format(number)); // → '3,500' if in US English locale나는 이 질문에 대한 답변의 수에 깊은 인상을 받았습니다. 나는 uKolka 의 답변을 좋아합니다.
n.toLocaleString()그러나 불행히도 스페인어와 같은 일부 로케일에서는 10,000 미만의 숫자에 대해 예상대로 작동하지 않습니다(IMHO).
Number(1000).toLocaleString('ES-es') 1.000 아닌 1000 제공합니다.
이유를 알아 보려면 모든 브라우저에서 10000 미만의 숫자에서 작동하지 않는 toLocaleString을 참조하십시오.
따라서 올바른 천 단위 구분 기호를 선택하는 Elias Zamaria 의 답변을 사용해야 했습니다.
n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3)) , 또는 를 사용하는 두 로케일 모두에 대해 한 줄짜리로 잘 작동합니다 . 천 단위 구분 기호로 사용되며 모든 경우에 1,000부터 작업을 시작합니다.
Number(1000).toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3)) 스페인어 로케일 컨텍스트와 함께 1.000 을 제공합니다.
숫자 형식을 완전히 제어하려면 다음을 시도해 볼 수도 있습니다.
let number = 1234.567 let decimals = 2 let decpoint = '.' // Or Number(0.1).toLocaleString().substring(1, 2) let thousand = ',' // Or Number(10000).toLocaleString().substring(2, 3) let n = Math.abs(number).toFixed(decimals).split('.') n[0] = n[0].split('').reverse().map((c, i, a) => i > 0 && i < a.length && i % 3 == 0 ? c + thousand : c ).reverse().join('') let final = (Math.sign(number) < 0 ? '-' : '') + n.join(decpoint) console.log(final) 1,234.57 제공합니다.
이것은 정규식이 필요하지 않습니다. toFixed 를 사용하여 원하는 소수점 수로 숫자를 조정한 다음 소수점 주위로 나누어 작동합니다 . 하나가 있다면. 왼쪽은 반전된 숫자 배열로 바뀝니다. 그런 다음 처음부터 세 자리마다 천 단위 구분 기호가 추가되고 결과가 다시 반전됩니다. 최종 결과는 두 부분의 결합입니다. Math.abs 를 사용하여 입력 번호의 부호를 먼저 제거한 다음 필요한 경우 다시 넣습니다.
한 줄짜리가 아니지만 훨씬 길지 않고 쉽게 기능으로 전환됩니다. 명확성을 위해 변수가 추가되었지만 사전에 알고 있는 경우 원하는 값으로 대체될 수 있습니다. 소수점에 대한 올바른 문자와 현재 로케일에 대한 천 단위 구분 기호를 찾는 방법으로 toLocaleString 을 사용하는 표현식을 사용할 수 있습니다.
답장을 보내주신 모든 분들께 감사드립니다. 나는 좀 더 "일률적인" 솔루션을 만들기 위해 몇 가지 답변을 기반으로 했습니다.
첫 번째 스니펫은 PHP 의 number_format() 을 모방하는 함수를 Number 프로토타입에 추가합니다. 숫자 형식을 지정하는 경우 일반적으로 소수 자릿수를 원하므로 함수가 표시할 소수 자릿수를 사용합니다. 일부 국가에서는 쉼표를 소수로 사용하고 소수를 천 단위 구분 기호로 사용하므로 이 구분 기호를 설정할 수 있습니다.
Number.prototype.numberFormat = function(decimals, dec_point, thousands_sep) { dec_point = typeof dec_point !== 'undefined' ? dec_point : '.'; thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ','; var parts = this.toFixed(decimals).split('.'); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep); return parts.join(dec_point); }이것을 다음과 같이 사용합니다.
var foo = 5000; console.log(foo.numberFormat(2)); // us format: 5,000.00 console.log(foo.numberFormat(2, ',', '.')); // european format: 5.000,00수학 연산을 위해 숫자를 다시 가져와야 하는 경우가 종종 있었지만 parseFloat는 정수 값의 첫 번째 시퀀스를 사용하여 5,000을 5로 변환합니다. 그래서 나만의 float 변환 함수를 만들어 String 프로토타입에 추가했습니다.
String.prototype.getFloat = function(dec_point, thousands_sep) { dec_point = typeof dec_point !== 'undefined' ? dec_point : '.'; thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ','; var parts = this.split(dec_point); var re = new RegExp("[" + thousands_sep + "]"); parts[0] = parts[0].replace(re, ''); return parseFloat(parts.join(dec_point)); }이제 다음과 같이 두 기능을 모두 사용할 수 있습니다.
var foo = 5000; var fooString = foo.numberFormat(2); // The string 5,000.00 var fooFloat = fooString.getFloat(); // The number 5000; console.log((fooString.getFloat() + 1).numberFormat(2)); // The string 5,001.00나는 이것이 그것을 수행하는 가장 짧은 정규 표현식이라고 생각합니다.
/\B(?=(\d{3})+\b)/g "123456".replace(/\B(?=(\d{3})+\b)/g, ",")나는 몇 가지 숫자에 그것을 확인하고 작동했습니다.
Number.prototype.toLocaleString() 이 모든 브라우저(Safari) 에서 기본적으로 제공되었다면 굉장했을 것입니다.
다른 모든 답변을 확인했지만 아무도 폴리필하지 않는 것 같았습니다. 여기에 실제로 처음 두 답변의 조합인 이에 대한 poc가 있습니다. toLocaleString 작동하면 그것을 사용하고, 그렇지 않으면 사용자 정의 함수를 사용합니다.
var putThousandsSeparators; putThousandsSeparators = function(value, sep) { if (sep == null) { sep = ','; } // check if it needs formatting if (value.toString() === value.toLocaleString()) { // split decimals var parts = value.toString().split('.') // format whole numbers parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, sep); // put them back together value = parts[1] ? parts.join('.') : parts[0]; } else { value = value.toLocaleString(); } return value; }; alert(putThousandsSeparators(1234567.890));Intl 개체를 사용하여 국제 친화적인 방식으로 삽입할 수 있습니다.
Intl.NumberFormat().format(1234); // returns "1,234" if the user's locale is en_US, for example자세한 내용은 MDN의 NumberFormat 기사를 참조하세요. 로케일 동작을 지정하거나 사용자의 기본 동작을 지정할 수 있습니다. 이것은 지역적 차이를 존중하기 때문에 조금 더 완벽합니다. 많은 국가에서 마침표를 사용하여 숫자를 구분하는 반면 쉼표는 소수를 나타냅니다.
Intl.NumberFormat은 아직 모든 브라우저에서 사용할 수 없지만 최신 Chrome, Opera 및 IE에서 작동합니다. Firefox의 다음 릴리스에서는 이를 지원해야 합니다. Webkit에는 구현 일정이 없는 것 같습니다.
이 절차를 사용하여 필요한 통화 형식을 지정할 수 있습니다.
var nf = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }); nf.format(123456.789); // '$123,456.79'자세한 내용은 이 링크에 액세스할 수 있습니다.
https://www.justinmccandless.com/post/formatting-currency-in-javascript/
통화 값을 처리하고 형식을 많이 지정하는 경우 많은 경우와 현지화를 처리하는 작은 account.js를 추가하는 것이 좋습니다.
// Default usage: accounting.formatMoney(12345678); // $12,345,678.00 // European formatting (custom symbol and separators), could also use options object as second param: accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99 // Negative values are formatted nicely, too: accounting.formatMoney(-500000, "£ ", 0); // £ -500,000 // Simple `format` string allows control of symbol position [%v = value, %s = symbol]: accounting.formatMoney(5318008, { symbol: "GBP", format: "%v %s" }); // 5,318,008.00 GBP다음 코드는 char 스캔을 사용하므로 정규식이 없습니다.
function commafy( num){ var parts = (''+(num<0?-num:num)).split("."), s=parts[0], L, i=L= s.length, o=''; while(i--){ o = (i===0?'':((Li)%3?'':',')) +s.charAt(i) +o } return (num<0?'-':'') + o + (parts[1] ? '.' + parts[1] : ''); }그것은 유망한 성능을 보여줍니다: http://jsperf.com/number-formatting-with-commas/5
2015.4.26: num<0일 때 문제를 해결하기 위한 사소한 수정. https://jsfiddle.net/runsun/p5tqqvs3/ 참조
다음은 천 단위 구분 기호에 쉼표를 삽입하는 간단한 함수입니다. RegEx가 아닌 배열 함수를 사용합니다.
/** * Format a number as a string with commas separating the thousands. * @param num - The number to be formatted (eg 10000) * @return A string representing the formatted number (eg "10,000") */ var formatNumber = function(num) { var array = num.toString().split(''); var index = -3; while (array.length + index > 0) { array.splice(index, 0, ','); // Decrement by 4 since we just added another unit to the array. index -= 4; } return array.join(''); };예제가 있는 CodeSandbox 링크: https://codesandbox.io/s/p38k63w0vq
이 코드를 사용하여 인도의 통화 형식을 처리합니다. 다른 국가 통화를 처리하도록 국가 코드를 변경할 수 있습니다.
let amount =350256.95 var formatter = new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2, }); // Use it. formatter.format(amount);산출:
3,50,256.95Intl.NumberFormat 생성자를 사용할 수도 있습니다. 할 수 있는 방법은 다음과 같습니다.
resultNumber = new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(yourNumber);내 대답은 jQuery를 훨씬 더 합리적인 대안으로 완전히 대체하는 유일한 대답입니다.
function $(dollarAmount) { const locale = 'en-US'; const options = { style: 'currency', currency: 'USD' }; return Intl.NumberFormat(locale, options).format(dollarAmount); } $(1000.9999) 와 같은 금액을 입력하는 경우 가장 가까운 페니로 반올림하여 $1,001.00를 얻습니다. 또한 입력한 값은 숫자 또는 문자열일 수 있습니다. 그것은 중요하지 않습니다.
돈을 다루고 있지만 금액에 선행 달러 기호가 표시되는 것을 원하지 않는 경우 이전 함수를 사용하지만 $ 제거하는 이 함수를 추가할 수도 있습니다.
function no$(dollarAmount) { return $(dollarAmount).replace('$',''); }돈을 다루지 않고 다양한 십진수 형식 요구 사항이 있는 경우 더 다양한 기능이 있습니다.
function addCommas(number, minDecimalPlaces = 0, maxDecimalPlaces = Math.max(3,minDecimalPlaces)) { const options = {}; options.maximumFractionDigits = maxDecimalPlaces; options.minimumFractionDigits = minDecimalPlaces; return Intl.NumberFormat('en-US',options).format(number); }아, 그런데 이 코드가 Internet Explorer의 일부 이전 버전에서 작동하지 않는다는 사실은 완전히 의도된 것입니다. 나는 현대 표준을 지원하지 않는 것을 잡을 수 있을 때마다 IE를 깨려고 한다.
댓글 섹션에서 과도한 칭찬은 주제를 벗어난 것으로 간주된다는 점을 기억하세요. 대신 찬성 투표를 해주세요.
var number = 2561556862056.12; console.log(new Intl.NumberFormat().format(number));이것은 내가 찾은 가장 쉬운 방법입니다
나는 이 포스트에 걸려 넘어지기 전에 이것을 썼다. 정규식이 없으며 실제로 코드를 이해할 수 있습니다.
$(function(){ function insertCommas(s) { // get stuff before the dot var d = s.indexOf('.'); var s2 = d === -1 ? s : s.slice(0, d); // insert commas every 3 digits from the right for (var i = s2.length - 3; i > 0; i -= 3) s2 = s2.slice(0, i) + ',' + s2.slice(i); // append fractional part if (d !== -1) s2 += s.slice(d); return s2; } $('#theDudeAbides').text( insertCommas('1234567.89012' ) ); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="theDudeAbides"></div>var formatNumber = function (number) { var splitNum; number = Math.abs(number); number = number.toFixed(2); splitNum = number.split('.'); splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return splitNum.join("."); }편집: 이 기능은 양수에서만 작동합니다. 예를 들어:
var number = -123123231232; formatNumber(number)출력: "123,123,231,232"
그러나 위의 질문에 대답하려면 toLocaleString() 메서드만 있으면 문제가 해결됩니다.
var number = 123123231232; number.toLocaleString()출력: "123,123,231,232"
환호!
uKolka 의 답변 을 개선하고 다른 사람들이 시간을 절약하도록 도와 드리겠습니다.
Numerical.js를 사용합니다.
document.body.textContent = numeral(1234567).format('0,0'); <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>브라우저 호환성 이 문제가 아닌 경우에만 Number.prototype.toLocaleString()을 사용해야 합니다.
미래의 Google 직원(또는 반드시 'Google 직원'일 필요는 없음)을 위한 것:
위에서 언급한 모든 솔루션은 훌륭하지만 RegExp는 그런 상황에서 사용하는 것이 매우 나쁠 수 있습니다.
예, 제안된 옵션 중 일부를 사용하거나 다음과 같이 원시적이지만 유용한 것을 작성할 수도 있습니다.
const strToNum = str => { //Find 1-3 digits followed by exactly 3 digits & a comma or end of string let regx = /(\d{1,3})(\d{3}(?:,|$))/; let currStr; do { currStr = (currStr || str.split(`.`)[0]) .replace( regx, `$1,$2`) } while (currStr.match(regx)) //Stop when there's no match & null's returned return ( str.split(`.`)[1] ) ? currStr.concat(`.`, str.split(`.`)[1]) : currStr; }; strToNum(`123`) // => 123 strToNum(`123456`) // => 123,456 strToNum(`-1234567.0987`) // => -1,234,567.0987여기에 사용된 regexp는 매우 간단하며 루프는 작업을 완료하는 데 걸리는 횟수만큼 정확하게 진행됩니다.
그리고 "DRYify" 코드 등을 훨씬 더 잘 최적화할 수 있습니다.
아직,
(-1234567.0987).toLocaleString();(대부분의 상황에서) 훨씬 더 나은 선택이 될 것입니다.
요점은 실행 속도나 브라우저 간 호환성에 있지 않습니다.
결과 번호를 사용자에게 표시하려는 상황에서 .toLocaleString() 메서드를 사용하면 웹사이트 또는 앱 사용자(그의 언어가 무엇이든)와 동일한 언어로 말할 수 있는 강력한 기능을 제공합니다.
ECMAScript 문서에 따르면 이 방법은 1999년에 도입되었으며, 그 이유는 인터넷이 언젠가는 전 세계 사람들을 연결하게 되기를 희망했기 때문에 일부 "내재화" 도구가 필요했다고 생각합니다.
오늘날 인터넷은 우리 모두를 연결하므로 세상은 우리가 상상할 수 있는 훨씬 더 복잡하고 (/거의) 우리 모두가 인터넷에 있다는 것을 기억하는 것이 중요합니다.
물론 사람들의 다양성을 고려할 때 언어도 다르고 가치도 다르기 때문에 모든 사람에게 완벽한 UX를 보장할 수는 없습니다. 바로 그렇기 때문에 최대한 현지화하려는 노력이 더욱 중요합니다. .
따라서 날짜, 시간, 숫자 등을 표시하는 데 특정 표준이 있고 최종 사용자가 선호하는 형식으로 이러한 항목을 표시할 수 있는 도구가 있다는 점을 고려하면 그렇게 하지 않는 경우가 드물고 거의 무책임하지 않습니다. 그 도구를 사용하시겠습니까(특히 이 데이터를 사용자에게 표시하려는 상황에서)?
저에게 있어서 그런 상황에서 .toLocaleString() 대신 RegExp를 사용하는 것은 자바스크립트로 시계 앱을 만들고 이런 방식으로 하드코딩하는 것처럼 들립니다. 그래서 프라하 시간만 표시할 것입니다. 프라하에 거주하지 않는 사람들)의 기본 동작에도 불구하고
new Date();최종 사용자의 시계에 따라 데이터를 반환하는 것입니다.
소수, 다른 구분 기호 및 음수를 지원하는 대체 방법입니다.
var number_format = function(number, decimal_pos, decimal_sep, thousand_sep) { var ts = ( thousand_sep == null ? ',' : thousand_sep ) , ds = ( decimal_sep == null ? '.' : decimal_sep ) , dp = ( decimal_pos == null ? 2 : decimal_pos ) , n = Math.floor(Math.abs(number)).toString() , i = n.length % 3 , f = ((number < 0) ? '-' : '') + n.substr(0, i) ; for(;i<n.length;i+=3) { if(i!=0) f+=ts; f+=n.substr(i,3); } if(dp > 0) f += ds + parseFloat(number).toFixed(dp).split('.')[1] return f; }@Jignesh Sanghani의 일부 수정 사항은 그의 의견에 찬성하는 것을 잊지 마십시오.
이 기능이 이 문제와 관련된 모든 문제를 처리할 것이라고 생각합니다.
function commaFormat(inputString) { inputString = inputString.toString(); var decimalPart = ""; if (inputString.indexOf('.') != -1) { //alert("decimal number"); inputString = inputString.split("."); decimalPart = "." + inputString[1]; inputString = inputString[0]; //alert(inputString); //alert(decimalPart); } var outputString = ""; var count = 0; for (var i = inputString.length - 1; i >= 0 && inputString.charAt(i) != '-'; i--) { //alert("inside for" + inputString.charAt(i) + "and count=" + count + " and outputString=" + outputString); if (count == 3) { outputString += ","; count = 0; } outputString += inputString.charAt(i); count++; } if (inputString.charAt(0) == '-') { outputString += "-"; } //alert(outputString); //alert(outputString.split("").reverse().join("")); return outputString.split("").reverse().join("") + decimalPart; }1줄과 단일 정규식을 좋아하지만 split()을 사용하고 싶지 않은 사람 을 위해 소수점 이하 자릿수를 처리(무시)하는 다른 답변의 향상된 정규식 버전이 있습니다.
var formatted = (x+'').replace(/(\..*)$|(\d)(?=(\d{3})+(?!\d))/g, (digit, fract) => fract || digit + ',');정규식은 먼저 리터럴 "."로 시작하는 하위 문자열과 일치합니다. 그리고 그것을 자신으로 대체하고("fract"), 3자리의 배수가 뒤따르는 임의의 숫자와 일치 하고 그 뒤에 ","를 넣습니다.
예를 들어 x = 12345678.12345678은 formatted = '12,345,678.12345678'이 됩니다.
짧고 달콤한 솔루션을 찾고 있다면:
const number = 12345678.99; const numberString = String(number).replace( /^\d+/, number => [...number].map( (digit, index, digits) => ( !index || (digits.length - index) % 3 ? '' : ',' ) + digit ).join('') ); // numberString: 12,345,678.99Aki143S 의 솔루션에 tofix를 추가했습니다. 이 솔루션은 천 단위 구분 기호에 점을 사용하고 정밀도에 쉼표를 사용합니다.
function formatNumber( num, fixed ) { var decimalPart; var array = Math.floor(num).toString().split(''); var index = -3; while ( array.length + index > 0 ) { array.splice( index, 0, '.' ); index -= 4; } if(fixed > 0){ decimalPart = num.toFixed(fixed).split(".")[1]; return array.join('') + "," + decimalPart; } return array.join(''); };예;
formatNumber(17347, 0) = 17.347 formatNumber(17347, 3) = 17.347,000 formatNumber(1234563.4545, 3) = 1.234.563,454출처 : http:www.stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
| 스마트 포인터란 무엇이며 언제 사용해야 합니까? (0) | 2021.12.04 |
|---|---|
| Bash에서 명령줄 인수를 어떻게 구문 분석합니까? (0) | 2021.12.03 |
| 줄 바꿈이나 공백 없이 인쇄하는 방법 (0) | 2021.12.03 |
| Dockerfile에서 CMD와 ENTRYPOINT의 차이점은 무엇입니까? (0) | 2021.12.03 |
| 숫자를 통화 문자열로 포맷하는 방법 (0) | 2021.12.03 |