etc./StackOverFlow

숫자를 통화 문자열로 포맷하는 방법

청렴결백한 만능 재주꾼 2021. 12. 3. 08:21
반응형

질문자 :Community Wiki


JavaScript에서 가격 형식을 지정하고 싶습니다. float 를 인수로 사용하고 다음과 같은 형식 string 반환하는 함수를 원합니다.

 "$ 2,500.00"

이 작업을 수행하는 가장 좋은 방법은 무엇입니까?



국제 번호 형식

JavaScript에는 숫자 포맷터(국제화 API의 일부)가 있습니다.

 // Create our number formatter. var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', // These options are needed to round to whole numbers if that's what you want. //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1) //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501) }); formatter.format(2500); /* $2,500.00 */

시스템 로케일(코드가 브라우저에서 실행 중인 경우 사용자 로케일)을 사용하려면 첫 번째 인수( 'en-US' undefined 로케일 코드에 대한 추가 설명입니다 .

다음 은 통화 코드 목록입니다 .

Intl.NumberFormat 대 Number.prototype.toLocaleString

이것을 이전 버전과 비교하는 마지막 메모입니다. toLocaleString . 둘 다 본질적으로 동일한 기능을 제공합니다. 그러나 이전 버전(Pre-Intl)의 toLocaleString은 실제로 로캘을 지원하지 않습니다 . 시스템 로캘을 사용합니다. 따라서 이전 브라우저를 디버깅할 때 올바른 버전을 사용하고 있는지 확인하십시오( Intl 의 존재 여부를 확인하도록 제안함 ). 구식 브라우저에 관심이 없거나 shim 만 사용한다면 이에 대해 전혀 걱정할 필요가 없습니다.

또한 둘 다 성능은 단일 항목에 대해 동일하지만 서식을 지정할 숫자가 많은 경우 Intl.NumberFormat 사용하는 것이 ~70배 더 빠릅니다. Intl.NumberFormat 을 사용하고 페이지 로드당 한 번만 인스턴스화하는 것이 가장 좋습니다. 어쨌든 다음 toLocaleString 의 동등한 사용법입니다.

 (2500).toLocaleString('en-US', { style: 'currency', currency: 'USD', }); /* $2,500.00 */

브라우저 지원 및 Node.js에 대한 몇 가지 참고 사항

  • 브라우저 지원은 전 세계적으로 98%, 미국에서 99%, EU에서 99% 지원으로 더 이상 문제가 되지 않습니다.
  • 화석화된 브라우저(예: Internet Explorer 8 )에서 이를 지원하는 shim 이 있습니다.
  • v13 이전의 Node.js는 기본적으로 en-US 만 지원합니다. 한 가지 솔루션은 full-icu 를 설치하는 것 입니다. 자세한 내용은 여기를 참조하세요.
  • 자세한 내용은 CanIUse 를 참조하십시오.

Community Wiki

Number.prototype.toFixed

이 솔루션은 모든 단일 주요 브라우저와 호환됩니다.

 const profits = 2489.8237; profits.toFixed(3) // Returns 2489.824 (rounds up) profits.toFixed(2) // Returns 2489.82 profits.toFixed(7) // Returns 2489.8237000 (pads the decimals)

통화 기호(예: "$" + profits.toFixed(2) )를 추가하기만 하면 금액이 달러로 표시됩니다.

사용자 정의 기능

당신의 사용이 필요한 경우 , 각 숫자 사이를,이 기능을 사용할 수 있습니다 :

 function formatMoney(number, decPlaces, decSep, thouSep) { decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces, decSep = typeof decSep === "undefined" ? "." : decSep; thouSep = typeof thouSep === "undefined" ? "," : thouSep; var sign = number < 0 ? "-" : ""; var i = String(parseInt(number = Math.abs(Number(number) || 0).toFixed(decPlaces))); var j = (j = i.length) > 3 ? j % 3 : 0; return sign + (j ? i.substr(0, j) + thouSep : "") + i.substr(j).replace(/(\decSep{3})(?=\decSep)/g, "$1" + thouSep) + (decPlaces ? decSep + Math.abs(number - i).toFixed(decPlaces).slice(2) : ""); } document.getElementById("b").addEventListener("click", event => { document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value); });
 <label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label> <br /> <button id="b">Get Output</button> <p id="x">(press button to get output)</p>

다음과 같이 사용하십시오.

 (123456789.12345).formatMoney(2, ".", ",");

항상 '.'를 사용하려는 경우 및 ',', 메소드 호출에서 제외할 수 있으며 메소드가 기본값으로 사용합니다.

 (123456789.12345).formatMoney(2);

문화권에 두 개의 기호가 뒤집혀 있고(즉, 유럽인) 기본값을 사용하려면 formatMoney 메서드에서 다음 두 줄 위에 붙여넣으면 됩니다.

 d = d == undefined ? "," : d, t = t == undefined ? "." : t,

사용자 정의 기능(ES6)

최신 ECMAScript 구문을 사용할 수 있다면(예: Babel을 통해) 다음과 같은 더 간단한 함수를 대신 사용할 수 있습니다.

 function formatMoney(amount, decimalCount = 2, decimal = ".", thousands = ",") { try { decimalCount = Math.abs(decimalCount); decimalCount = isNaN(decimalCount) ? 2 : decimalCount; const negativeSign = amount < 0 ? "-" : ""; let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString(); let j = (i.length > 3) ? i.length % 3 : 0; return negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : ""); } catch (e) { console.log(e) } }; document.getElementById("b").addEventListener("click", event => { document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value); });
 <label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label> <br /> <button id="b">Get Output</button> <p id="x">(press button to get output)</p>


Community Wiki

짧고 빠른 솔루션(어디서나 작동합니다!)

 (12345.67).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); // 12,345.67

이 솔루션의 이면에 있는 아이디어는 일치하는 섹션을 첫 번째 일치 및 쉼표(예: '$&,' 로 바꾸는 것입니다. 매칭은 lookahead 방식을 사용하여 수행됩니다. "숫자 뒤에 세 개의 숫자 집합(하나 이상)과 점이 있는 경우 숫자 일치" 라는 표현을 읽을 수 있습니다.

테스트:

 1 --> "1.00" 12 --> "12.00" 123 --> "123.00" 1234 --> "1,234.00" 12345 --> "12,345.00" 123456 --> "123,456.00" 1234567 --> "1,234,567.00" 12345.67 --> "12,345.67"

데모: http://jsfiddle.net/hAfMM/9571/


확장된 짧은 솔루션

Number 객체의 프로토타입을 확장하여 [0 .. n] 및 숫자 그룹 크기 [0 .. x] 에 대한 추가 지원을 추가할 수도 있습니다.

 /** * Number.prototype.format(n, x) * * @param integer n: length of decimal * @param integer x: length of sections */ Number.prototype.format = function(n, x) { var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')'; return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,'); }; 1234..format(); // "1,234" 12345..format(2); // "12,345.00" 123456.7.format(3, 2); // "12,34,56.700" 123456.789.format(2, 4); // "12,3456.79"

데모 / 테스트: http://jsfiddle.net/hAfMM/435/


슈퍼 확장된 짧은 솔루션

확장 버전 에서는 다른 구분 기호 유형을 설정할 수 있습니다.

 /** * Number.prototype.format(n, x, s, c) * * @param integer n: length of decimal * @param integer x: length of whole part * @param mixed s: sections delimiter * @param mixed c: decimal delimiter */ Number.prototype.format = function(n, x, s, c) { var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')', num = this.toFixed(Math.max(0, ~~n)); return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ',')); }; 12345678.9.format(2, 3, '.', ','); // "12.345.678,90" 123456.789.format(4, 4, ' ', ':'); // "12 3456:7890" 12345678.9.format(0, 3, '-'); // "12-345-679"

데모 / 테스트: http://jsfiddle.net/hAfMM/612/


Community Wiki

JavaScript Number 객체를 살펴보고 도움이 되는지 확인하십시오.

  • toLocaleString() 은 위치별 천 단위 구분 기호를 사용하여 숫자 형식을 지정합니다.
  • toFixed() 는 숫자를 특정 소수 자릿수로 반올림합니다.

이들을 동시에 사용하려면 둘 다 문자열을 출력하기 때문에 값의 유형을 다시 숫자로 변경해야 합니다.

예시:

 Number((someNumber).toFixed(1)).toLocaleString()

편집하다

toLocaleString을 직접 사용할 수 있으며 숫자로 다시 변환할 필요는 없습니다.

 someNumber.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});

Community Wiki

아래는 약간의 주석이 추가되고 약간의 변경 이 있는 Patrick Desjardins(별칭 Daok) 코드입니다.

 /* decimal_sep: character used as decimal separator, it defaults to '.' when omitted thousands_sep: char used as thousands separator, it defaults to ',' when omitted */ Number.prototype.toMoney = function(decimals, decimal_sep, thousands_sep) { var n = this, c = isNaN(decimals) ? 2 : Math.abs(decimals), // If decimal is zero we must take it. It means the user does not want to show any decimal d = decimal_sep || '.', // If no decimal separator is passed, we use the dot as default decimal separator (we MUST use a decimal separator) /* According to [https://stackoverflow.com/questions/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function] the fastest way to check for not defined parameter is to use typeof value === 'undefined' rather than doing value === undefined. */ t = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, // If you don't want to use a thousands separator you can pass empty string as thousands_sep value sign = (n < 0) ? '-' : '', // Extracting the absolute value of the integer part of the number and converting to string i = parseInt(n = Math.abs(n).toFixed(c)) + '', j = ((j = i.length) > 3) ? j % 3 : 0; return sign + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : ''); }

여기에 몇 가지 테스트가 있습니다.

 // Some tests (do not forget parenthesis when using negative numbers and number with no decimals) alert(123456789.67392.toMoney() + '\n' + 123456789.67392.toMoney(3) + '\n' + 123456789.67392.toMoney(0) + '\n' + (123456).toMoney() + '\n' + (123456).toMoney(0) + '\n' + 89.67392.toMoney() + '\n' + (89).toMoney()); // Some tests (do not forget parenthesis when using negative numbers and number with no decimals) alert((-123456789.67392).toMoney() + '\n' + (-123456789.67392).toMoney(-3));

사소한 변경 사항은 다음과 같습니다.

  1. NaN 이 아닐 때만 수행되도록 Math.abs(decimals) 를 약간 옮겼습니다.

  2. decimal_sep 는 더 이상 빈 문자열일 수 없습니다(일종의 소수 구분 기호는 필수입니다 ).

  3. 인수가 JavaScript 함수로 전송되지 않았는지 확인하는 가장 좋은 방법에 제안된 대로 typeof thousands_sep === 'undefined'

  4. (+n || 0) 때문에 필요하지 않습니다 this A는 Number 객체

JSFiddle


Community Wiki

금액이 숫자인 경우 -123

 amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' });

"-$123.00" 문자열을 생성합니다.

다음은 완전한 작동 입니다.


Community Wiki

Accounting.js 는 숫자, 돈 및 통화 형식을 위한 작은 JavaScript 라이브러리입니다.


Community Wiki

내가 본 최고의 JavaScript money formatter는 다음과 같습니다.

 Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator) { var n = this, decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces, decSeparator = decSeparator == undefined ? "." : decSeparator, thouSeparator = thouSeparator == undefined ? "," : thouSeparator, sign = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "", j = (j = i.length) > 3 ? j % 3 : 0; return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : ""); };

여기에서 형식이 변경되고 차용되었습니다. 숫자를 통화 문자열로 형식 지정하는 방법

자신의 통화 지정자를 제공해야 합니다( $ 를 사용함).

다음과 같이 호출합니다(인수 기본값은 2, 쉼표 및 마침표이므로 기본 설정인 경우 인수를 제공할 필요가 없습니다).

 var myMoney = 3543.75873; var formattedMoney = '$' + myMoney.formatMoney(2, ',', '.'); // "$3,543.76"

Community Wiki

재미를 위한 또 다른 시도가 있습니다.

 function formatDollar(num) { var p = num.toFixed(2).split("."); return "$" + p[0].split("").reverse().reduce(function(acc, num, i, orig) { return num=="-" ? acc : num + (i && !(i % 3) ? "," : "") + acc; }, "") + "." + p[1]; }

그리고 몇 가지 테스트:

 formatDollar(45664544.23423) // "$45,664,544.23" formatDollar(45) // "$45.00" formatDollar(123) // "$123.00" formatDollar(7824) // "$7,824.00" formatDollar(1) // "$1.00"

음수도 처리합니다.


Community Wiki

모든 현재 브라우저에서 작동

toLocaleString 을 사용 하여 언어 구분 표현(ISO 4217 통화 코드 사용)으로 통화 형식을 지정합니다.

 (2500).toLocaleString("en-GB", {style: "currency", currency: "GBP", minimumFractionDigits: 2})

avenmore에 대한 남아프리카 랜드 코드 스니펫의 예 :

 console.log((2500).toLocaleString("en-ZA", {style: "currency", currency: "ZAR", minimumFractionDigits: 2})) // -> R 2 500,00 console.log((2500).toLocaleString("en-GB", {style: "currency", currency: "ZAR", minimumFractionDigits: 2})) // -> ZAR 2,500.00


Community Wiki

나는 당신이 원하는 것 같아요 :

 f.nettotal.value = "$" + showValue.toFixed(2);

Community Wiki

좋아, 당신이 말한 것을 기반으로 나는 이것을 사용하고 있습니다 :

 var DecimalSeparator = Number("1.2").toLocaleString().substr(1,1); var AmountWithCommas = Amount.toLocaleString(); var arParts = String(AmountWithCommas).split(DecimalSeparator); var intPart = arParts[0]; var decPart = (arParts.length > 1 ? arParts[1] : ''); decPart = (decPart + '00').substr(0,2); return '£ ' + intPart + DecimalSeparator + decPart;

나는 개선 제안에 열려 있습니다 (나는 이것을하기 위해 YUI 를 포함하지 않는 것을 선호합니다 :-))

"."를 감지해야 한다는 것을 이미 알고 있습니다. 소수점 구분 기호로 사용하는 대신 ...


Community Wiki

Numeral.js - @adamwdraper의 손쉬운 숫자 형식 지정을 위한 JavaScript 라이브러리

 numeral(23456.789).format('$0,0.00'); // = "$23,456.79"

Community Wiki

나는 (Microsoft에서) Globalize 라이브러리를 사용합니다.

숫자, 통화 및 날짜를 현지화하고 사용자 로캘에 따라 올바른 방식으로 자동으로 형식을 지정하는 것은 훌륭한 프로젝트입니다! ...그리고 jQuery 확장이어야 함에도 불구하고 현재 100% 독립적인 라이브러리입니다. 나는 당신에게 그것을 시도하는 것을 제안합니다! :)


Community Wiki

javascript-number-formatter (이전 Google 코드 )

  • 짧고 빠르며 유연하지만 독립형입니다.
  • #,##0.00 또는 부정 -000.#### 과 같은 표준 숫자 형식을 허용합니다.
  • # ##0,00 , #,###.## , #'###.## 또는 숫자가 아닌 모든 유형의 기호와 같은 모든 국가 형식을 허용합니다.
  • 숫자 그룹화를 허용합니다. #,##,#0.000 또는 #,###0.## 모두 유효합니다.
  • 모든 중복/오류 방지 형식을 수락합니다. ##,###,##.# 또는 0#,#00#.###0# 모두 OK입니다.
  • 자동 숫자 반올림.
  • 간단한 인터페이스, 다음과 같이 마스크와 값을 제공하면 됩니다. format( "0.0000", 3.141592) .
  • 마스크에 접두사 및 접미사 포함

(README에서 발췌)


Community Wiki

다음은 간결하고 이해하기 쉬우며 지나치게 복잡한 정규식에 의존하지 않습니다.

 function moneyFormat(price, sign = '$') { const pieces = parseFloat(price).toFixed(2).split('') let ii = pieces.length - 3 while ((ii-=3) > 0) { pieces.splice(ii, 0, ',') } return sign + pieces.join('') } console.log( moneyFormat(100), moneyFormat(1000), moneyFormat(10000.00), moneyFormat(1000000000000000000) )

다음은 다른 지역 형식으로 다른 통화의 형식을 지정할 수 있도록 최종 출력에 더 많은 옵션이 있는 버전입니다.

 // higher order function that takes options then a price and will return the formatted price const makeMoneyFormatter = ({ sign = '$', delimiter = ',', decimal = '.', append = false, precision = 2, round = true, custom } = {}) => value => { const e = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000] value = round ? (Math.round(value * e[precision]) / e[precision]) : parseFloat(value) const pieces = value .toFixed(precision) .replace('.', decimal) .split('') let ii = pieces.length - (precision ? precision + 1 : 0) while ((ii-=3) > 0) { pieces.splice(ii, 0, delimiter) } if (typeof custom === 'function') { return custom({ sign, float: value, value: pieces.join('') }) } return append ? pieces.join('') + sign : sign + pieces.join('') } // create currency converters with the correct formatting options const formatDollar = makeMoneyFormatter() const formatPound = makeMoneyFormatter({ sign: '£', precision: 0 }) const formatEuro = makeMoneyFormatter({ sign: '€', delimiter: '.', decimal: ',', append: true }) const customFormat = makeMoneyFormatter({ round: false, custom: ({ value, float, sign }) => `SALE:$${value}USD` }) console.log( formatPound(1000), formatDollar(10000.0066), formatEuro(100000.001), customFormat(999999.555) )


Community Wiki

정규 표현식을 사용하는 더 짧은 방법(공백, 쉼표 또는 점 삽입):

 Number.prototype.toCurrencyString = function(){ return this.toFixed(2).replace(/(\d)(?=(\d{3})+\b)/g, '$1 '); } n = 12345678.9; alert(n.toCurrencyString());

Community Wiki

원래 방법을 제공한 Jonathan M에게 +1합니다. 이것은 명시적으로 통화 포맷터이므로 출력에 통화 기호(기본값은 '$')를 추가하고 기본 쉼표를 천 단위 구분 기호로 추가했습니다. 실제로 통화 기호(또는 천 단위 구분 기호)를 원하지 않으면 ""(빈 문자열)을 인수로 사용하십시오.

 Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator, currencySymbol) { // check the args and supply defaults: decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces; decSeparator = decSeparator == undefined ? "." : decSeparator; thouSeparator = thouSeparator == undefined ? "," : thouSeparator; currencySymbol = currencySymbol == undefined ? "$" : currencySymbol; var n = this, sign = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "", j = (j = i.length) > 3 ? j % 3 : 0; return sign + currencySymbol + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : ""); };

Community Wiki

주요 부분은 천 단위 구분 기호를 삽입하는 것이며 다음과 같이 수행할 수 있습니다.

 <script type="text/javascript"> function ins1000Sep(val) { val = val.split("."); val[0] = val[0].split("").reverse().join(""); val[0] = val[0].replace(/(\d{3})/g, "$1,"); val[0] = val[0].split("").reverse().join(""); val[0] = val[0].indexOf(",") == 0 ? val[0].substring(1) : val[0]; return val.join("."); } function rem1000Sep(val) { return val.replace(/,/g, ""); } function formatNum(val) { val = Math.round(val*100)/100; val = ("" + val).indexOf(".") > -1 ? val + "00" : val + ".00"; var dec = val.indexOf("."); return dec == val.length-3 || dec == 0 ? val : val.substring(0, dec+3); } </script> <button onclick="alert(ins1000Sep(formatNum(12313231)));">

Community Wiki

PHP 함수 "number_format"의 JavaScript 포트가 있습니다.

PHP 개발자가 사용하기 쉽고 인식할 수 있기 때문에 매우 유용하다고 생각합니다.

 function number_format (number, decimals, dec_point, thousands_sep) { var n = number, prec = decimals; var toFixedFix = function (n,prec) { var k = Math.pow(10,prec); return (Math.round(n*k)/k).toString(); }; n = !isFinite(+n) ? 0 : +n; prec = !isFinite(+prec) ? 0 : Math.abs(prec); var sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep; var dec = (typeof dec_point === 'undefined') ? '.' : dec_point; var s = (prec > 0) ? toFixedFix(n, prec) : toFixedFix(Math.round(n), prec); // Fix for Internet Explorer parseFloat(0.55).toFixed(0) = 0; var abs = toFixedFix(Math.abs(n), prec); var _, i; if (abs >= 1000) { _ = abs.split(/\D/); i = _[0].length % 3 || 3; _[0] = s.slice(0,i + (n < 0)) + _[0].slice(i).replace(/(\d{3})/g, sep+'$1'); s = _.join(dec); } else { s = s.replace('.', dec); } var decPos = s.indexOf(dec); if (prec >= 1 && decPos !== -1 && (s.length-decPos-1) < prec) { s += new Array(prec-(s.length-decPos-1)).join(0)+'0'; } else if (prec >= 1 && decPos === -1) { s += dec+new Array(prec).join(0)+'0'; } return s; }

(원본의 주석 블록, 아래에 예시 및 크레딧 포함)

 // Formats a number with grouped thousands // // version: 906.1806 // discuss at: http://phpjs.org/functions/number_format // + 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) // * 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'

Community Wiki

Patrick Desjardins 의 대답은 좋아 보이지만 JavaScript 코드가 단순한 것을 선호합니다. 다음은 숫자를 가져와 통화 형식(달러 기호 빼기)으로 반환하기 위해 작성한 함수입니다.

 // Format numbers to two decimals with commas function formatDollar(num) { var p = num.toFixed(2).split("."); var chars = p[0].split("").reverse(); var newstr = ''; var count = 0; for (x in chars) { count++; if(count%3 == 1 && count != 1) { newstr = chars[x] + ',' + newstr; } else { newstr = chars[x] + newstr; } } return newstr + "." + p[1]; }

Community Wiki

JavaScript에는 내장 함수 toFixed 가 있습니다.

 var num = new Number(349); document.write("$" + num.toFixed(2));

Community Wiki

function CurrencyFormatted(amount) { var i = parseFloat(amount); if(isNaN(i)) { i = 0.00; } var minus = ''; if(i < 0) { minus = '-'; } i = Math.abs(i); i = parseInt((i + .005) * 100); i = i / 100; s = new String(i); if(s.indexOf('.') < 0) { s += '.00'; } if(s.indexOf('.') == (s.length - 2)) { s += '0'; } s = minus + s; return s; }

윌마스터에서 .


Community Wiki

Google Visualization API 의 NumberFormat 클래스를 제안합니다.

다음과 같이 할 수 있습니다.

 var formatter = new google.visualization.NumberFormat({ prefix: '$', pattern: '#,###,###.##' }); formatter.formatValue(1000000); // $ 1,000,000

Community Wiki

일반적으로 동일한 작업을 수행하는 방법은 여러 가지가 있지만 Number.prototype.toLocaleString 은 사용자 설정에 따라 다른 값을 반환할 수 있으므로 사용하지 않는 것이 좋습니다.

Number.prototype 확장을 권장하지 않습니다. 네이티브 개체 프로토타입을 확장하는 것은 다른 사람 코드(예: 라이브러리/프레임워크/플러그인)와 충돌을 일으킬 수 있고 향후 JavaScript 구현/버전과 호환되지 않을 수 있기 때문에 나쁜 습관입니다.

정규 표현식이 문제에 대한 최선의 접근 방식이라고 생각합니다. 제 구현은 다음과 같습니다.

 /** * Converts number into currency format * @param {number} number Number that should be converted. * @param {string} [decimalSeparator] Decimal separator, defaults to '.'. * @param {string} [thousandsSeparator] Thousands separator, defaults to ','. * @param {int} [nDecimalDigits] Number of decimal digits, defaults to `2`. * @return {string} Formatted string (eg numberToCurrency(12345.67) returns '12,345.67') */ function numberToCurrency(number, decimalSeparator, thousandsSeparator, nDecimalDigits){ //default values decimalSeparator = decimalSeparator || '.'; thousandsSeparator = thousandsSeparator || ','; nDecimalDigits = nDecimalDigits == null? 2 : nDecimalDigits; var fixed = number.toFixed(nDecimalDigits), //limit/add decimal digits parts = new RegExp('^(-?\\d{1,3})((?:\\d{3})+)(\\.(\\d{'+ nDecimalDigits +'}))?$').exec( fixed ); //separate begin [$1], middle [$2] and decimal digits [$4] if(parts){ //number >= 1000 || number <= -1000 return parts[1] + parts[2].replace(/\d{3}/g, thousandsSeparator + '$&') + (parts[4] ? decimalSeparator + parts[4] : ''); }else{ return fixed.replace('.', decimalSeparator); } }

Community Wiki

이것은 조금 늦을 수 있지만 여기에 내가 동료를 위해 모든 숫자에 .toCurrencyString() 내부화는 통화 기호가 아닌 숫자 그룹화만을 위한 것입니다. 달러를 출력하는 경우 제공된 대로 "$" 를 사용하십시오. 일본 또는 중국의 $123 4567 은 미국의 $1,234,567 유로 등을 출력하는 경우 통화 기호를 "$" 에서 변경하십시오.

HTML <head> 섹션의 아무 곳이나 또는 필요한 곳에서 사용하기 직전에 선언하십시오.

 Number.prototype.toCurrencyString = function(prefix, suffix) { if (typeof prefix === 'undefined') { prefix = '$'; } if (typeof suffix === 'undefined') { suffix = ''; } var _localeBug = new RegExp((1).toLocaleString().replace(/^1/, '').replace(/\./, '\\.') + "$"); return prefix + (~~this).toLocaleString().replace(_localeBug, '') + (this % 1).toFixed(2).toLocaleString().replace(/^[+-]?0+/,'') + suffix; }

그럼 끝입니다! 숫자를 통화로 출력해야 하는 모든 곳에서 (number).toCurrencyString() 사용하십시오.

 var MyNumber = 123456789.125; alert(MyNumber.toCurrencyString()); // alerts "$123,456,789.13" MyNumber = -123.567; alert(MyNumber.toCurrencyString()); // alerts "$-123.57"

Community Wiki

* 아래 코드를 시도해보세요

"250000".replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');

답변: 250,000

여기에 이미지 설명 입력


Community Wiki

 Number(value) .toFixed(2) .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")


Community Wiki

다음은 몇 가지 솔루션이며 모두 테스트 스위트를 통과합니다. 테스트 스위트와 벤치마크가 포함되어 있습니다. 복사하여 붙여넣고 테스트하려면 이 요지를 시도하십시오.

방법 0(RegExp)

VisioN의 답변 기준이지만 소수점이 없으면 수정됩니다.

 if (typeof Number.prototype.format === 'undefined') { Number.prototype.format = function (precision) { if (!isFinite(this)) { return this.toString(); } var a = this.toFixed(precision).split('.'); a[0] = a[0].replace(/\d(?=(\d{3})+$)/g, '$&,'); return a.join('.'); } }

방법 1

 if (typeof Number.prototype.format === 'undefined') { Number.prototype.format = function (precision) { if (!isFinite(this)) { return this.toString(); } var a = this.toFixed(precision).split('.'), // Skip the '-' sign head = Number(this < 0); // Skip the digits that's before the first thousands separator head += (a[0].length - head) % 3 || 3; a[0] = a[0].slice(0, head) + a[0].slice(head).replace(/\d{3}/g, ',$&'); return a.join('.'); }; }

방법 2(배열로 분할)

 if (typeof Number.prototype.format === 'undefined') { Number.prototype.format = function (precision) { if (!isFinite(this)) { return this.toString(); } var a = this.toFixed(precision).split('.'); a[0] = a[0] .split('').reverse().join('') .replace(/\d{3}(?=\d)/g, '$&,') .split('').reverse().join(''); return a.join('.'); }; }

방법 3(루프)

 if (typeof Number.prototype.format === 'undefined') { Number.prototype.format = function (precision) { if (!isFinite(this)) { return this.toString(); } var a = this.toFixed(precision).split(''); a.push('.'); var i = a.indexOf('.') - 3; while (i > 0 && a[i-1] !== '-') { a.splice(i, 0, ','); i -= 3; } a.pop(); return a.join(''); }; }

사용 예

 console.log('======== Demo ========') console.log( (1234567).format(0), (1234.56).format(2), (-1234.56).format(0) ); var n = 0; for (var i=1; i<20; i++) { n = (n * 10) + (i % 10)/100; console.log(n.format(2), (-n).format(2)); }

분리 기호

천 단위 구분 기호 또는 소수 구분 기호를 사용자 지정하려면 replace() 사용하십시오.

 123456.78.format(2).replace(',', ' ').replace('.', ' ');

테스트 스위트

 function assertEqual(a, b) { if (a !== b) { throw a + ' !== ' + b; } } function test(format_function) { console.log(format_function); assertEqual('NaN', format_function.call(NaN, 0)) assertEqual('Infinity', format_function.call(Infinity, 0)) assertEqual('-Infinity', format_function.call(-Infinity, 0)) assertEqual('0', format_function.call(0, 0)) assertEqual('0.00', format_function.call(0, 2)) assertEqual('1', format_function.call(1, 0)) assertEqual('-1', format_function.call(-1, 0)) // Decimal padding assertEqual('1.00', format_function.call(1, 2)) assertEqual('-1.00', format_function.call(-1, 2)) // Decimal rounding assertEqual('0.12', format_function.call(0.123456, 2)) assertEqual('0.1235', format_function.call(0.123456, 4)) assertEqual('-0.12', format_function.call(-0.123456, 2)) assertEqual('-0.1235', format_function.call(-0.123456, 4)) // Thousands separator assertEqual('1,234', format_function.call(1234.123456, 0)) assertEqual('12,345', format_function.call(12345.123456, 0)) assertEqual('123,456', format_function.call(123456.123456, 0)) assertEqual('1,234,567', format_function.call(1234567.123456, 0)) assertEqual('12,345,678', format_function.call(12345678.123456, 0)) assertEqual('123,456,789', format_function.call(123456789.123456, 0)) assertEqual('-1,234', format_function.call(-1234.123456, 0)) assertEqual('-12,345', format_function.call(-12345.123456, 0)) assertEqual('-123,456', format_function.call(-123456.123456, 0)) assertEqual('-1,234,567', format_function.call(-1234567.123456, 0)) assertEqual('-12,345,678', format_function.call(-12345678.123456, 0)) assertEqual('-123,456,789', format_function.call(-123456789.123456, 0)) // Thousands separator and decimal assertEqual('1,234.12', format_function.call(1234.123456, 2)) assertEqual('12,345.12', format_function.call(12345.123456, 2)) assertEqual('123,456.12', format_function.call(123456.123456, 2)) assertEqual('1,234,567.12', format_function.call(1234567.123456, 2)) assertEqual('12,345,678.12', format_function.call(12345678.123456, 2)) assertEqual('123,456,789.12', format_function.call(123456789.123456, 2)) assertEqual('-1,234.12', format_function.call(-1234.123456, 2)) assertEqual('-12,345.12', format_function.call(-12345.123456, 2)) assertEqual('-123,456.12', format_function.call(-123456.123456, 2)) assertEqual('-1,234,567.12', format_function.call(-1234567.123456, 2)) assertEqual('-12,345,678.12', format_function.call(-12345678.123456, 2)) assertEqual('-123,456,789.12', format_function.call(-123456789.123456, 2)) } console.log('======== Testing ========'); test(Number.prototype.format); test(Number.prototype.format1); test(Number.prototype.format2); test(Number.prototype.format3);

기준

 function benchmark(f) { var start = new Date().getTime(); f(); return new Date().getTime() - start; } function benchmark_format(f) { console.log(f); time = benchmark(function () { for (var i = 0; i < 100000; i++) { f.call(123456789, 0); f.call(123456789, 2); } }); console.log(time.format(0) + 'ms'); } // If not using async, the browser will stop responding while running. // This will create a new thread to benchmark async = []; function next() { setTimeout(function () { f = async.shift(); f && f(); next(); }, 10); } console.log('======== Benchmark ========'); async.push(function () { benchmark_format(Number.prototype.format); }); next();

Community Wiki

나는 이것을 account.js 에서 찾았습니다. 그것은 매우 쉽고 내 필요에 완벽하게 맞습니다.

 // Default usage: accounting.formatMoney(12345678); // $12,345,678.00 // European formatting (custom symbol and separators), can also use options object as second parameter: accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99 // Negative values can be formatted nicely: 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 // Euro currency symbol to the right accounting.formatMoney(5318008, {symbol: "€", precision: 2, thousand: ".", decimal : ",", format: "%v%s"}); // 1.008,00€


Community Wiki

출처 : http:www.stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-strings

반응형