[javascript] 숫자를 통화 문자열로 형식화하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

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

"$ 2,500.00"

가장 좋은 방법은 무엇입니까?

답변

숫자 프로토 타입

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

  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>

스 니펫 확장

답변

국제 숫자 형식

Javascript에는 숫자 포맷터 (Internationalization API의 일부)가 있습니다.

// Create our number formatter.
var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

formatter.format(2500); /* $2,500.00 */

JS 바이올린

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

통화 코드 목록은 다음과 같습니다 .

Intl.NumberFormat과 Number.prototype.toLocaleString

이것을 이전과 비교하는 마지막 메모. toLocaleString. 둘 다 본질적으로 동일한 기능을 제공합니다. 그러나 이전 화신 (pre-Intl)의 toLocaleString은 실제로 로케일을 지원하지 않습니다 . 시스템 로케일을 사용합니다. 따라서 올바른 버전을 사용하고 있는지 확인하십시오 ( MDN은의 존재 여부를 확인하도록 제안합니다Intl ). 또한 두 항목 의 성능은 단일 항목에 대해 동일 하지만 서식을 지정할 숫자가 많은 경우 사용 Intl.NumberFormat속도가 ~ 70 배 빠릅니다. 사용하는 방법은 다음과 같습니다 toLocaleString.

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

브라우저 지원에 대한 참고 사항

  • 전 세계적으로 97.5 %, 미국에서 98 %, EU에서 99 %를 지원하는 브라우저 지원은 더 이상 문제가되지 않습니다.
  • 이 심은IE8과 같은 화석화 된 브라우저에서이를 지원 이 있습니다.
  • 자세한 정보 는 CanIUse 를 보십시오

답변

짧고 빠른 솔루션 (모든 곳에서 작동!)

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

이 솔루션의 기본 개념은 일치하는 섹션을 첫 번째 일치 및 쉼표로 바꾸는 것 '$&,'입니다. 일치는 lookahead 접근법을 사용하여 수행됩니다 . “3 개의 숫자 세트 (하나 이상)의 시퀀스와 점으로 구성된 숫자와 일치하는 경우”와 같이 표현식을 읽을 수 있습니다 .

테스트 :

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/

답변

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

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

이들을 동시에 사용하려면 값이 모두 문자열로 출력되므로 유형이 숫자로 다시 변경되어야합니다.

예:

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

답변

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

/*
decimal_sep: character used as deciaml separtor, 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 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 [/programming/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. Math.abs(decimals)이 아닌 경우에만 수행 할 비트를 이동했습니다 NaN.

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

  3. 우리 는 인수가 JavaScript 함수로 전송되지 않는지를 결정하는 가장 좋은 방법에typeof thousands_sep === 'undefined' 제안 된대로 사용 합니다.

  4. (+n || 0)때문에 필요하지 않은 thisA는 Number객체가

JS 피들

답변

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

답변

amount가 숫자 -123라면

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

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

다음은 완전한 작업 예 입니다.